Firefox Addons‎ > ‎

Firefox Addons - Greasemonkey

Wikipedia :
Greasemonkey is a Mozilla Firefox add-on that allows users to install scripts that make on-the-fly changes to HTML web page content on the DOMContentLoaded event, which happens immediately after it is loaded in the browser (also known as augmented browsing).


After you install the addon, you will see a greasemonkey icon on bottom right.
You should left click to disable/enable or right click to add new scripts.

Once adding new scripts - you will be prompted for meta information on the script such as :
  • Name
  • Namespace
  • Description
  • Which sites it belongs to with include/exclude fields
First time in, it will prompt you for your favorite editor.

Once chosen - you can start writing your code.
Writing alert('hello world'); and refreshing the page you were in will result with the alert box showing on page refresh.



Code Example


Lets look at a simple greasemonkey script from http://userscripts.org. Its purpose is to skip the split page on Google's image search and get you straight to the original image page.

// ==UserScript==
// @name Google Images direct links
// @author Dwoo
// @version 2010-03-22
// @namespace http://userscripts.org/scripts/show/48293
// @description Makes images link directly to the original in Google Images search. The source website link is moved to the green URL below the image. Images found from a web search jumps ahead to the image too, but only if it isn't in the browser history.
// @include http://images.google.tld/*
// @include http://www.google.tld/images?*
// @include http://*.google.tld/imgres?imgurl=*
// ==/UserScript==

(function () {

function evalNodes(path) {
return document.evaluate(path, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
}

var cont = evalNodes('//div[starts-with(@id, "ImgCont")]').snapshotItem(0);

function addLinks() {
var imgs = evalNodes('//a[starts-with(@href, "/imgres")]');
var links = evalNodes('//td[starts-with(@id, "tDataText")]//div[@class="a"] | //td/font/font[@color="green"]');
var image, link, urls, a;
for (var i = 0; image = imgs.snapshotItem(i), link = links.snapshotItem(i); i++) {
urls = image.href.match(/imgurl=(.*)&imgrefurl=(.*)&usg/);
image.href = decodeURIComponent(urls[1]);
a = document.createElement('a');
a.innerHTML = link.innerHTML;
a.setAttribute('class', "a");
a.setAttribute('style', "border-style: none");
a.setAttribute('href', decodeURIComponent(urls[2]));
link.parentNode.replaceChild(a, link);
}
cont.addEventListener('DOMNodeInserted', trigger, false);
}

function trigger() {
cont.removeEventListener('DOMNodeInserted', trigger, false);
setTimeout(addLinks, 100);
}

if (cont) {
addLinks();
} else {
var style = '#thumbnail:visited{color:red !important}';
if (typeof GM_addStyle == "function") {
GM_addStyle(style);
} else {
evalNodes('//head/style').snapshotItem(0).appendChild(document.createTextNode(style));
}
var tmb = document.getElementById('thumbnail');
if (document.defaultView.getComputedStyle(tmb, null).getPropertyValue('color') != "rgb(255, 0, 0)") {
unsafeWindow.location = tmb.href;
}
}
})()
Explanation:
The code defines a function and immediately invokes it.

It iterates over all images in the google image search by evaluating "ImgCont" elements.
If it finds them - it modifies the domain string into a link and replaces the target of the image-link to the actual img.

Here is a comparison of the same search with (right) and without (left) greasemonkey :

References


Comments