My first greasemonkey script

Seems almost compulsory for web2.0 enthusiasts to write a brief greasemonkey article these days!

Here’s my attempt. Nothing whatsoever to do with bioinformatics; instead, this one resizes Flickr images on Profilactic mashup pages, such as this one. My aim is just to convince you that greasemonkey development is quite easy, even for JavaScript novices like myself.

1. What’s Greasemonkey then?

It’s a Firefox extension that allows you to install user scripts – small programs written in JavaScript which modify the appearance and functionality of a web page.

2. Where do I learn about it?

A little dated now, but still by far the best “jump in and start” resource, is Dive Into Greasemonkey. You can also try the GreaseSpot wiki.
Basic JavaScript tuition is available all over the web: try W3Schools. Since Greasemonkey scripts achieve their effects by acting on the HTML DOM (Document Object Model), a basic grasp of that will help you too – also at W3Schools.

3. Is it difficult to develop and test?

Not at all. It can be as simple as right-clicking the Greasemonkey icon in your browser, selecting “new user script” and starting to write code.

4. So tell us about your first script

I’m a big fan of Profilactic, a lifestream app that aggregates feeds from your online activities. However, the images displayed from Flickr are a little large for my taste – I’d prefer to see thumbnails. I wrote a small script that adds a button to the Profilactic mashup page: when clicked, Flickr images are resized to 120 px wide.

5. Show us the code then

// ==UserScript==
// @name Resize Flickr
// @namespace https://nsaunders.wordpress.com
// @description Make Flickr images smaller on Profilactic mashup pages
// @include http://www.profilactic.com/mashup/*
// @include http://www.profilactic.com/friends_mashup/*
// ==/UserScript==

// add a button to resize images
function addButton() {
var allDivs, thisDiv, newButton;
allDivs = document.evaluate(
‘//div[@class=”sig_tabs”]’,
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
if (allDivs.snapshotItem(0)) {
thisDiv = allDivs.snapshotItem(0);
newButton = document.createElement(‘input’);
newButton.setAttribute(“type”, “submit”);
newButton.setAttribute(“value”, “miniFlickr”);
newButton.addEventListener(“click”, reSize, false);
thisDiv.parentNode.insertBefore(newButton, thisDiv.nextSibling);
}
}

// resize flickr images to 120px wide
function reSize () {
var allImg, thisImg;
allImg = document.evaluate(
‘//img’,
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
for (var i = 0; i < allImg.snapshotLength; i++) { thisImg = allImg.snapshotItem(i); var pattern = /static\.flickr\.com/; if(pattern.test(thisImg.src)) { thisImg.setAttribute("width", "120"); } } } window.addEventListener('load',addButton,true); [/sourcecode] Just two functions. The first, addButton(), looks for a DIV element on the page of class "sig_tabs". This is the menu bar near the top of the Profilactic page. It then inserts an INPUT element of type "submit" (a button) and configures the event for the button - when clicked, run the reSize() function. The reSize() function looks for all IMG elements with a SRC attribute that matches "static.flickr.com". If it finds them, the image WIDTH attribute is set to 120 pixels. My resize tip: just set width and the browser will scale height automatically. Finally, functions are initialised using window.addEventListener(), which waits for the page to load. Note that Profilactic uses Ajax calls to build the page content dynamically, so you can't do anything until it's finished.

6. How could this be improved?

In many ways. It places a big ugly button in a non-ideal location. The JavaScript could undoubtedly be cleaner, sleeker and better (I learned most of it along the way just for this script). It would be nice if the button toggled between thumbnail and full-size, or allowed a range of thumbnail sizes.

The great thing about Greasemonkey is that if you can do better – then go right ahead!

7. Can I see it in action?

Sure. Copy the code above to your own Greasemonkey installation and ensure that the included pages are “http://www.profilactic.com/mashup/*&#8221; and “http://www.profilactic.com/friends_mashup/*&#8221;. Or, watch this screencast (no sound, rubbish quality – don’t go full screen!) showing the script in action at Profilactic.