JS Challenge: Help with an unofficial DIC Chrome Extension

  • (2 Pages)
  • +
  • 1
  • 2

22 Replies - 9379 Views - Last Post: 13 February 2013 - 03:09 PM

#1 Curtis Rutland  Icon User is online

  • (╯°□°)╯︵ (~ .o.)~
  • member icon


Reputation: 4557
  • View blog
  • Posts: 7,964
  • Joined: 08-June 10

JS Challenge: Help with an unofficial DIC Chrome Extension

Post icon  Posted 06 November 2012 - 01:51 PM

*
POPULAR

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

Posted Image

Posted Image

Posted Image

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.

Is This A Good Question/Topic? 12
  • +

Replies To: JS Challenge: Help with an unofficial DIC Chrome Extension

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3569
  • View blog
  • Posts: 10,399
  • Joined: 08-June 10

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 06 November 2012 - 02:08 PM

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.
Was This Post Helpful? 0
  • +
  • -

#3 Curtis Rutland  Icon User is online

  • (╯°□°)╯︵ (~ .o.)~
  • member icon


Reputation: 4557
  • View blog
  • Posts: 7,964
  • Joined: 08-June 10

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 06 November 2012 - 02:14 PM

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.
Was This Post Helpful? 0
  • +
  • -

#4 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6087
  • View blog
  • Posts: 23,597
  • Joined: 23-August 08

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 06 November 2012 - 03:02 PM

Nicely done, Curtis Rutland. Unfortunately the API is crap.
Was This Post Helpful? 0
  • +
  • -

#5 blackcompe  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1156
  • View blog
  • Posts: 2,538
  • Joined: 05-May 05

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 06 November 2012 - 06:32 PM

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

Was This Post Helpful? 0
  • +
  • -

#6 Curtis Rutland  Icon User is online

  • (╯°□°)╯︵ (~ .o.)~
  • member icon


Reputation: 4557
  • View blog
  • Posts: 7,964
  • Joined: 08-June 10

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 06 November 2012 - 10:18 PM

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.
Was This Post Helpful? 0
  • +
  • -

#7 blackcompe  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1156
  • View blog
  • Posts: 2,538
  • Joined: 05-May 05

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 06 November 2012 - 11:09 PM

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.
Was This Post Helpful? 0
  • +
  • -

#8 blackcompe  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1156
  • View blog
  • Posts: 2,538
  • Joined: 05-May 05

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 08 November 2012 - 05:14 AM

I made a login form.

Posted Image

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

Was This Post Helpful? 2
  • +
  • -

#9 Curtis Rutland  Icon User is online

  • (╯°□°)╯︵ (~ .o.)~
  • member icon


Reputation: 4557
  • View blog
  • Posts: 7,964
  • Joined: 08-June 10

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 08 November 2012 - 07:01 AM

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!
Was This Post Helpful? 1
  • +
  • -

#10 blackcompe  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1156
  • View blog
  • Posts: 2,538
  • Joined: 05-May 05

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 08 November 2012 - 07:35 AM

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.
Was This Post Helpful? 1
  • +
  • -

#11 Curtis Rutland  Icon User is online

  • (╯°□°)╯︵ (~ .o.)~
  • member icon


Reputation: 4557
  • View blog
  • Posts: 7,964
  • Joined: 08-June 10

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 09 November 2012 - 09:46 AM

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.
Was This Post Helpful? 0
  • +
  • -

#12 blackcompe  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1156
  • View blog
  • Posts: 2,538
  • Joined: 05-May 05

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 19 November 2012 - 04:10 AM

@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

Was This Post Helpful? 0
  • +
  • -

#13 Curtis Rutland  Icon User is online

  • (╯°□°)╯︵ (~ .o.)~
  • member icon


Reputation: 4557
  • View blog
  • Posts: 7,964
  • Joined: 08-June 10

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 19 November 2012 - 07:13 AM

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.
Was This Post Helpful? 0
  • +
  • -

#14 blackcompe  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1156
  • View blog
  • Posts: 2,538
  • Joined: 05-May 05

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 19 November 2012 - 03:03 PM

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

Was This Post Helpful? 0
  • +
  • -

#15 Curtis Rutland  Icon User is online

  • (╯°□°)╯︵ (~ .o.)~
  • member icon


Reputation: 4557
  • View blog
  • Posts: 7,964
  • Joined: 08-June 10

Re: JS Challenge: Help with an unofficial DIC Chrome Extension

Posted 19 November 2012 - 03:09 PM

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.
Was This Post Helpful? 1
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2