On several ocassions I’ve looked for an animated weather map where I can see the predicted weather for a region. After some struggling, I found maps on weather underground that were close to what I wanted.

However, when I changed the date of the map, it loaded a whole new page with the new map for the new date. It was cumbersome to cycle through the dates. I figured I could write a little Greasemonkey script to make life easier. Some 6 or so hours of hacking later, it’s done. It was much more finicky than I anticipated, but it’s done, and it works. I present Wunderground AJAXifier.

What is Greasemonkey?

Greasemonkey is a plugin for Firefox that allows you to use custom scripts on various web sites. For example, I use the YouTube without flash auto script. When I load a YouTube video, the script removes the flash player and replaces it with an embed code that fires up my default browser plugin (VLC, xine, mplayer, etc). The script also creates a few links to download videos directly to my computer. Easy peasy.

There are thousands of scripts on userscripts.org. Mine is here. Be warned, the first few scripts I installed were malicious, they redirected me to the author’s web site. I recommend you check the reviews and read the source code before installing any scripts.

Philosophy

I think greasemonkey is a really big development for browsers. It provides an easy way for users to customise and control their web experience. For example, it’s now relatively easy to reorganise your favourite web site to improve the layout, add a WSIWYG editor, and more. It’s a significant step for users to regain control of their web experience from site publishers. Power to the people!

Removing onclick or onchange with Greasemonkey

It took me quite a while to figure out how to remove the page’s default onchange event. I found the solution thanks to joeytwiddle on #greasemonkey. The trick is to use the wrappedJSObject method. Here’s a quick example:

var myel = document.getElementById('callum');
console.log(myel.onchange); // null, see XPCNativeWrapper
console.log(myel.wrappedJSObject.onchange); // works
myel.wrappedJSObject.onchange = null; // unsets the onchange handler

It took me a while to figure this out, hopefully this post helps somebody else.

Here’s a completely unrelated image from a flickr search for greasemonkey to brighten the post.