[Curtis Rutland]

Hi all,

I've been working on something that I feel like sharing now. I don't like the way the DIC Subscribed Threads page works. If you have lots of subscribed threads, you have to scroll through all of them to find ones with new posts, because they seem to be ordered by forum, then by date of initial submission.

So, first I made a little bookmarklet that would move all the ones with subscriptions to the top of the page. But I figured I could do more than that.

So, I put together a simple Chrome extension:

https://github.com/c...land/DIC-Chrome







So, functionally, all it does is check your subscriptions on an interval and on demand to determine if anyone has posted to any threads you've subscribed to. When you click on a link, it'll open in a new tab, and if you click "open all", it'll open all unread links in new tabs.

It's not using any API, just making an ajax request to get the page, then jQuery to find img elements that have an src of the unread image (or any image with unread in the path, actually). For UI elements, I'm using Bootstrap. I started with the ability to add a config page, but didn't get around to that part.

So, I guess here's the challenge: help make it better. Clone the repo, and add whatever features you think might be an improvement. I'm not married to the current design or architecture, so go ahead and change literally whatever you want, or start from scratch and make it new if it the two conflict.

If you've never worked on a Chrome Extension, you may wonder why I'm posting this here. Well, Chrome Extensions are just Javascript, HTML, and CSS. They can either be content scripts that are injected into pages, or they can run in "background pages". This is one of the latter. You gain access to a chrome object that allows you functionality not available to you outside of extensions, like tab management and such. You can also perform cross site queries with the proper permissions. If you've never done any extension work but would be interested in it, here's a great guide:

http://developer.chr...getstarted.html

That link also included instructions to load an extension that hasn't been packaged up as a .crx file, which of course this hasn't.

Have fun, and hope to see some participation!

Three notes:

1) This is not an official DIC product. I've cleared it with the admins, but this isn't going to be owned or supported by D.I.C. the company

2) I'm no Javascript expert, so I have no ego here. Criticize away; it'll only make me better at what I do.

3) I'm also not a git expert. So far, all I've used it to do is synchronize my own work between computers. I'll try to deal with pull requests, but I'm new to this, so I'll have to learn as I go.

[Dormilich]

with regards to the API, I didn’t find anything useful in the API forum (mostly due to the current lack of a login API). So I would rather try to improve the current set-up.

[Curtis Rutland]

Yeah, I think that would be an issue. I didn't find any useful API either. However, when Chrome makes the web request, it uses all the cookies it would if a normal page made the request, so if you're logged in, it will automatically work without sending any login information. If you're not logged in, this addon will tell you and ask you to log in.

[JackOfAllTrades]

Nicely done, Curtis Rutland. Unfortunately the API is crap.

[blackcompe]

This is exciting!! I've already forked the project to play around with it!! Bootstrap is awesome!! I'm thankful it exists, because I suck at CSS.

Edit: This works very well. Good job Curtis! Now I can stop DIC from flooding my email... that's if I switch from firefox.

This post has been edited by blackcompe: 06 November 2012 - 06:46 PM

[Curtis Rutland]

Well, feel free to make a firefox addon out of it. I've never done so; I understand Firefox's addons have more capabilities, but more complexity too.

[blackcompe]

Quote

Well, feel free to make a firefox addon out of it. I've never done so; I understand Firefox's addons have more capabilities, but more complexity too.

Yeah, I figured that will be necessary at some point. For now, I'd just be happy to learn enough Javascript to add some features into the existing codebase, which is what I'm aiming for.

[blackcompe]

I made a login form.



Curtis Rutland, so what exactly were you thinking should go into the config page? I was thinking one improvement could be to sort the unread messages by most recent.

This post has been edited by blackcompe: 18 November 2012 - 02:13 PM

[Curtis Rutland]

I love the sign in screen. That's great!

As for Config, I was thinking maybe we could make the jquery selector customizable, that way people could choose what to look for. Also, I was thinking maybe we could add other pages to check, like for me I'd add the front page of the C# forum. We could maybe add it as a tab on the page itself. It could be configurable which pages to check for.

As for sorting, that would be a cool option to have in the config. You'd have to check the row the link lives in to find the posted date.

I'm excited that someone else is working on this!

[blackcompe]

Quote

Also, I was thinking maybe we could add other pages to check, like for me I'd add the front page of the C# forum.

Bingo!! I was thinking the same thing. We should have a link for the front page and for the first 20 unanswered.

Quote

We could maybe add it as a tab on the page itself. It could be configurable which pages to check for

Great idea.

Quote

As for sorting, that would be a cool option to have in the config. You'd have to check the row the link lives in to find the posted date.

Yeah, I figured. I'll look into that tonight.

Quote

I'm excited that someone else is working on this!

Yeah, this is awesome! I'm tired of writing throw-away code. Time to start putting my efforts to good use. I'm completely blown away with Bootstrap. It makes front-end design much more rewarding. I feel like I could put together a good looking site in no time with it.

[Curtis Rutland]

Had another thought. Perhaps we could also have it check to see if you have a private message waiting. Since the "My Account" link changes when you have one, it must be possible to determine that from the page load we're doing to get the subscriptions.

[blackcompe]

@Curtis Rutland: After tirelessly mucking around with Bootstrap and the extension, I've concluded Javascript components don't work in Chrome. The styling works, obviously, but any Bootstrap component that requires Javascript (e.g accordion, tabs) doesn't. It's as if Chrome has disabled the Javascript from running, however, Javascript invoked from a button works fine. I found only 2 Google results on using Bootstrap and Chrome. Both were StackOverflow questions, where in one, someone claimed Chrome extensions could do anything a regular webpage could. Tossing this working code for a tabbed pane into popup.html doesn't even work. I'm going to look at changing the default security settings to see if something gives, but past that I'm lost on how to get them to work. I hope I'm just making a mistake.

This post has been edited by blackcompe: 19 November 2012 - 04:15 AM

[Curtis Rutland]

Well, here's the content security policy rules:

http://developer.chr...rityPolicy.html

Are you bumping up against the remote script policy? Or are you using the scripts that are included in the bundle? How about inline JS? That won't execute.

Last, make sure to check the console in chrome. You can inspect the popup, then use the console to do a reload so you can capture any on-load errors.

[blackcompe]

Quote

Well, here's the content security policy rules:

http://developer.chr...rityPolicy.html

Are you bumping up against the remote script policy? Or are you using the scripts that are included in the bundle? How about inline JS? That won't execute.

Yeah, I looked at that. Tried changing the Manifest to version 1 and that didn't work (not that I really wanted to do that to begin with). I'm not executing inline JS and I am using local scripts.

This post has been edited by blackcompe: 19 November 2012 - 03:04 PM

[Curtis Rutland]

Are there any console errors? Remember that you'll have to open the popup, right-click->Inspect, then use the Console tab to reload the window to see them.