I’ve been meaning to play around with Grease­mon­key for a couple of years. Grease­mon­key is a Firefox extension that allows users to install scripts that make on-the-fly changes to the look and feel of third-party websites. For example, adding price com­par­isons to Amazon or thumbnail images to Google search results. User­Scripts.org has a large repository of Grease­mon­key scripts.

I finally built my first script the other day. We’re putting together a new feature at Cozi that integrates partner websites with our site. Since the feature is not yet announced, I’ll just say that partners will add a link to Cozi on many of their database-driven pages. That link has a complex, page-dependent querys­tring. Until the partners do the work to add the link to their sites, we were limited to testing and demoing with hand-modified pages.

I wrote a little Grease­mon­key script that finds the right spot on the partner pages to place the link, scrapes some context to construct the querys­tring, and inserts the link. Now we can test against the real sites and show a compelling demo. Of course, it only works on Firefox and it requires you to install both Grease­mon­key and this script. Our partners will have to make minor changes to their sites before ordinary users can take advantage of the feature.

Some gotchas with Grease­mon­key. Inserting, say, <b>Click here</b> is as simple as document.getEle­ment­ById('spot').innerHTML = <b>Click here</b>. However, inserting a <script> node requires:

var scr = document.createElement('script');
scr.type = 'text/javascript';
scr.text = 'createLink(' + p1 + ', ' + p2 + ', ' + p3 + ');';
document.getElementById('spot').appendChild(scr);

Grease­mon­key will definitely become part of my repertoire.