Listen to the Joystiq Podcast (because your ears can't read)

Greasemonkey: Hacking the Web with JavaScript

When Adrian Holovaty had enough of various problems with AllMusic's site, he decided to fix it himself—he wrote a Firefox extension that fixed the site for himself and anyone who installed the extension. Now anyone can do it—with a new Firefox extension called Greasemonkey, all you have to do is write the script, and the extension manages multiple site-specific scripts.

For example, I've been frustrated recently by a bug in Bloglines, my RSS aggregator of choice. Read on to find out how I solved the problem using Greasemonkey and one line of JavaScript, and it should give you an idea of how you can use the same technique with other sites. (This is a long one!)

Update 1/17/2005: Bloglines has fixed the bug in question, so while the tutorial below still shows how to use Greasemonkey in general, the specific fix I mention isn't necessary.

First of all, you’ll need Firefox to do this, and you’ll need to install the Greasemonkey extension from this page. Now here’s my specific example:

Bloglines bug
Here’s the problem. When I try to save a clipping, the description (in the textarea above) includes extraneous HTML, which ends up cluttering my clip list. I want it to simply contain the name of the item, just like the text field at the top of the form. So if we could just copy the value of the text field to the textarea, the problem would be solved.

First, we need to know the names of the form fields. You can view source to do this, but I like to use the Web Developer Extension toolbar. It turns out the name of the form is saveform, the text field is postEntryTitle, and the text area is notes. We also need to know the URL of the page. Since it’s a pop-up, right-click on it and select View Page Info.

Greasemonkey can execute a script after the DOM is loaded, and before the onLoad event, which is a perfect place to copy the form data. The script we’ll need is a one-liner:

document.saveform.notes.value = document.saveform.postEntryTitle.value;

Type this line (it should be one line, remove any linebreaks) into a text file and save it as fixbloglines.user.js. The .user.js portion identifies it as a Greasemonkey user script. Next, open the script in Firefox (or click on mine) and select Tools | Install User Script from the menu. The Greasemonkey extension displays a dialog:

greasemonkey
Click Add and add the URL http://www.bloglines.com/saveitem* to the Include list, and then remove the wildcard item (*) - that way the script won’t wreak havoc with any other site you visit.  Click OK and we’re done!

After the script is installed, Bloglines suddenly behaves, as shown below. You can use the Options button next to Greasemonkey in the Extensions dialog of Firefox to modify the settings or remove a script. Good luck!

Bloglines bug2

Reader Comments

(Page 1)

RESOURCES

RSS NEWSFEEDS

Powered by Blogsmith

Other Weblogs Inc. Network blogs you might be interested in: