I'm currently on parental leave till September 1st. Until then, I will not be available to read comments, e-mails, tweets and Facebook messages.

If you are interested in my writings, please subscribe to my RSS feed and follow me on Twitter.

Obtrusive JavaScript Checker 0.7 – support for JavaScript links, inline event information and summary report

Published on Sunday, November 2, 2008

When I launched Obtrusive JavaScript Checker, I immediately felt it had more potential, and I definitely had more features to add to make it even more compelling. Therefore, here comes a new release with javascript: link support, detailed inline event information and a summary report.

A picture of google.com when Obtrusive JavaScript Checker is enabled

Support for `javascript:` links

With this new release, support for javascript: links have been added, i.e. it also points those out and gives them a magenta border. Anyone using this practice should stop immediately, since it’s terrible, both for accessibility and SEO.

Detailed information

Now, when you hover over an element with an inline event, it will show you more information about it:

A picture of when the inline event information is being shown

The same goes for javascript: links:

A picture of when the javascript: link information is being shown

Summary report

At the bottom left corner of the window, you will be presented with a summary report of the number of javascript: links and inline events in the current web page, and occurrences of each type of inline event summarized. It should be noted that it does this for each frame/iframe.

A picture of the summary report

A picture of youtube.com when Obtrusive JavaScript Checker is enabled

Downloads

Updated November 3rd

Added a link to the newly released Obtrusive JavaScript Checker command for Ubiquity.

22 Comments/Reactions

#1 Lim Chee Aun
November 2nd, 2008 at 3:23

Wow, this is pretty cool. One question though, why wrappedJSObject property is used in the source?
#2 Robert Nyman - author
November 2nd, 2008 at 9:26

Lim,

Yeah, it is, isn’t it?
The wrappedJSObject is just something necessary for Greasemonkey-scripts to get a direct reference to a DOM element.
#3 Lim Chee Aun
November 2nd, 2008 at 12:56

Robert,

Oh, that’s weird. I was trying to make it into a bookmarklet just now, found JS errors from the wrappedJSObject property, removed them and it kind of work without them.
#4 Pelle
November 2nd, 2008 at 15:09

Nice tool Robert – detecting obtrusive fashions is really important and useful.

Which way is the recommended to use it as? As a greasemonkey script or as an extension?

Some thoughts: Would it be possible/desirable to do a version as a Ubuquity command and/or as a Firebug extension?

Great idea!
#5 Robert Nyman - author
November 2nd, 2008 at 16:08

Lim,

Ah, I see.
I’d recommend the Greasemonkey approach instead of a bookmarklet, just for the sake of being able to customize domains etc.

Pelle,

Thanks!
I’d recommend Greasemonkey, since it’s then very easy to enable/disable, and to customize for which domains it is being run.

As an Ubiquity command sounds interesting, I’ll think about that! I’ve never developed a Firebug extension, so I’m not really sure what it takes, but it seems a lot easier for the developer to write Greasemonkey scripts rather than Firefox extensions in general.
#6 Lim Chee Aun
November 2nd, 2008 at 18:04

Robert,

Ugh, I prefer the bookmarklet thing myself. It’s a good alternative approach for non-GreaseMonkey setups or non-Firefox platforms. Anyway, I’ve made it for my own use. Thanks for the code
#7 christian heilmann
November 2nd, 2008 at 19:03

Nice idea, works pretty cool here. A REST API for this would be cool, too. Maybe I’ll have a go at that.
#8 Robert Nyman - author
November 2nd, 2008 at 22:25

Lim,

I see.
Just bear in mind that the code won’t work in IE, but otherwise you should be good to go in other web browsers.

Christian,

Thanks! A REST API complement sounds good, just let me know if you do anything cool with it.
#9 Florian
November 3rd, 2008 at 23:45

Hi,
thanks for sharing.
I installed it on Firefox and I am wondering where I can turn it on and off. It does not appear under add-ons or anywhere else.

Thanks,
Florian
#10 Robert Nyman - author
November 3rd, 2008 at 23:50

Florian,

Thanks!
The Firefox extension can be found in the add-ons menu, amongst the other add-ons you have installed. Personally, I’d recommend the Greasemonkey script, since it allows enabling/disabling it without restarting the web browser, and also the possibility to customize it per different domains.
#11 Obtrusive JavaScript Checker also available as a Ubiquity command – Robert’s talk – Web development and Internet trends
November 4th, 2008 at 0:27

[...] the latest release of Obtrusive JavaScript Checker and its cool information and report features, I got the request to make it as a command for [...]
#12 HB
November 4th, 2008 at 7:51

Curious, is it possible to have the window that sits in the bottom left (“Number of javascript links: … Number of inline events: …”) act as position: fixed instead of absolute? If it’s stuck in front of a link or other element on the page, you can’t get to it without turning off the script and refreshing.

Other than that, I think this is a really cool little script!
#13 Robert Nyman - author
November 4th, 2008 at 12:09

HB,

Great idea! I’ve added in the code, it will be in the next release!
#14 Ajaxian » Weed Out Obtrusive JavaScript
November 4th, 2008 at 17:52

[...] down the path of providing developers good tools, Robert Nyman of DOMAssistant fame has updated his Obtrusive JavaScript Checker. The tool comes in a couple of different forms including a GreaseMonkey script, a Firefox add-on [...]
#15 Ionut Popa
November 4th, 2008 at 18:46

What tehnique do you recommend to be used instead of javascript: links?
#16 Robert Nyman - author
November 4th, 2008 at 20:08

Ionut,

Have the link point to a proper URL, ensuring it works as a regular link should (making it accessible for people with JavaScript disabled, for various reasons).

Then enhance the user experience by adding an onclick event to the link from JavaScript in an external JavaScript file, preventing the default link action, and instead have it perform your desired JavaScript code.
#17 Obtrusive JavaScript Checker Tool
November 5th, 2008 at 12:00

[...] Full Article [...]
#18 Obtrusive JavaScript Checker « The Rojo
November 7th, 2008 at 1:21

[...] leave a comment » Day after day, you should realize how important to build unobtrusive JavaScript code. Embracing this concept lets you ensure better code and extremely easier code structure. This is why we are happy to talk here about Robert Nyman who has updated his Obtrusive JavaScript Checker. [...]
#19 Interesting Finds: 2008.11.01~2008.11.07 – gOODiDEA.NET
November 7th, 2008 at 1:46

[...] Obtrusive JavaScript Checker 0.7 – support for JavaScript links, inline event information and summary report [...]
#20 20081127 ?? – ?????? – ???? Jacky’s Blog
November 27th, 2008 at 16:11

[...] Obtrusive JavaScript Checker 0.7 Quote: support for JavaScript links, inline event information and summary report [...]
#21 Obtrusive Javascript Checker « websenior
December 3rd, 2008 at 16:49

[...] la pÃ¡gina de su autor podemos ver su funcionamiento, asÃ como otros soportes de descargas, como en script para [...]
#22 Recopilaciones: Lo mejor de los feeds | Por ciento Internet
December 3rd, 2008 at 23:48

[...] ExtensiÃ³n de firefox para comprobar javascript intrusivo por Robert Nyman [...]