Greasemonkey
Greasemonkey.
No, it's not a rude word, I promise. Nor am I talking about car mechanics. I tried to explain Greasemonkey - and why it's so damn cool - to two people yesterday and got nowhere really quickly. So I thought I'd try again in a more organised fashion. But starting at the beginning.
Greasemonkey is an extension for Firefox. (There are now equivalents for other browsers: Creammonkey and GreasemonkIE, for example.) On its own Greasemonkey doesn't do anything. When you install it all it adds is a button to switch it on or off.
To explain what it does, and what it can be used for, we need to look in a bit of detail at web pages.
The Document Object Model
Web pages are written in a language called HTML, which takes the form of pairs of commands, called tags, which are written in "angle brackets" (ie, < and >). Some tags you may be familiar with, such as … to create bold text.
Everything on a web page is constructed with these tags, nested one inside the other. At the top level, everything is stored between and . Inside these there are and pairs. Most of what we see on the page is stored in the 'body'. Further down there are
tags to denote paragraphs, and so on.
One way of representing this nested structure is with a tree: a graph that splits into many branches from a single root (the at the top). So for a simple page like this:
An example page. Hello, world!
The content of this page is somewhat lacking.
the tree structure would look like
HTML /\ HEAD BODY / /\ TITLE H1 P \ EM
This is how the data are stored inside the browser when it's running. Notice how the actual content (the text) is not represented here - it is hidden inside each node on the graph. Think of each node as being a container; the contents of the EM container, for example, is the phrase "somewhat lacking".
This tree structure is called the Document Object Model (DOM)… presumably because it is a model of how a document is stored as (nested) objects! Each node on the tree has its own unique name, so we can pinpoint particular features on the web page easily.
Graph manipulation
But where is this leading us? Well, the great thing about representing data as a tree is that each branch is independent and can be removed and changed without affecting its neighbours. If we delete the node called H1 then the heading will disappear from the page but everything else will remain the same. We could even move the EM node from P to the middle of H1, so the page would read:
Hello, somewhat lacking world!
The content of this page is.
As trees get more complicated the possibilities expand. Nodes can be removed, shuffled around, duplicated, flattened. We can even add in new nodes that were never there in the first place. We could take all the child nodes of two different bodies (ie, two different web pages) and put them together in one new tree, to make some kind of hybrid superdocument. Yes, that's right - a Frankenpage!
Content manipulation
As well as fiddling with the structure of the page we can also change the content. Since the text is meant to be readable this is difficult to do. Text analysis is done with regular expressions which I have written about before.
We could change every instance of one word with another but the result might not make sense. We can automate some things though. Take the text "$20". If you're in the US that will make perfect sense to you. For me, in the UK, I have to think about what the value of twenty dollars is. If we search a page for every instance of $ followed by a number we can convert the number to our currency of choice (using an online currency converter) and automatically insert the result into the page. So the page could end up saying "$20 (£12)" without us having to do any work at all.
Ma-ma-ma-ma-monkey!
Greasemonkey traverses the DOM, changing structure and content according to rules which we select. Greasemonkey allows us to manipulate page structure and content before it appears in the browser. It works automatically, so you don't have to make it refresh the page.
The extension lets us change stuff we don't like about pages whenever they load. It's like saving a web page to your computer, editing the source, then reloading the page to read it - but it all happens automatically when you load the page for the first time.
Greasemonkey works by keeping a store of "user scripts", which are like further plugins. Each one has a particular purpose, and may only operate when you load a particular site. There are many LiveJournal scripts available: for example, to automatically query audioscrobbler.com and insert your most recently played track into the "music" field on the web form.
That's the small end of the scale - at its most extreme Greasemonkey lets us remove posts by specific people from an online forum; perform automated price comparisons for other online stores when browsing Amazon; or replace the style sheet defined by the webmaster, so you can "skin" your other people's pages.
There's even a script for tracking the amount of time you waste on Slashdot!