George V. Reilly

Greasemonkey for demos and mockups


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­ 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, Click here is as simple as document.getEle­ment­ById('spot').innerHTML = Click here. However, inserting a

Please enable JavaScript to view the comments powered by Disqus.

blog comments powered by Disqus
Review: Pro JavaScript Techniques » « Review: At End of Day