Fixing Broken Websites with Greasemonkey

Sometimes a website doesn’t function correctly. Even if a website works fine we may want it to display or perform differently. With a few web development and javascript skills we can change a website for ourselves using the Greasemonkey Firefox extension.

Below this paragraph we have a web based sales invoice. Unfortunately the invoice has a broken image. The image is supposed to display a logo. Perhaps we receive many invoices like this-all with broken images-and we want to print these out. We would prefer the logo to display and print.

If we analyse the source code of the webpage we can see that the broken image is trying to load a file at ‘http://www.example.com/images/paymentDetails.gif’. We have a copy of the logo and have uploaded it to our own webserver. We can use greasemonkey to substitute the broken link.

[in_article_ad]First we need to be running the firefox browser; available for free here. Next we need to install the Greasemonkey Firefox extension; available here. Greasemonkey loads javascript files and executes them on designated webpages automatically.

These scripts must be named using the following convention ‘scriptName.user.js’ and include a few special Greasemonkey directives in the script. Please find below, the code for our script followed by a detailed explanation.

// ==UserScript==
// @name          Fix Broken Invoice Image
// @description   blog.dingoeweb.com Greasemonkey example
// @include       *
// ==/UserScript==

var docImages = document.getElementsByTagName("img");
var image;
for(var x=0;x<docImages.length;x++)
{
	image = docImages[x];
	if(image.src == "http://www.example.com/images/paymentDetails.gif")
		image.src = "{DOMAIN_NAME}/images/paymentDetails.gif";
}

[in_article_ad]@name and @description provide Greasemonkey with information used to store the script in it’s list and user interface. @include tells Greaemonkey which domains the script should run on. The ‘*’ wildcard instructs Greaemonkey to work on all domains.

// ==UserScript==
// @name          Fix Broken Invoice Image
// @description   Greasemonkey example
// @include       *
// ==/UserScript==

The following code iterates through every image in the document object model (DOM). If the image is trying to load the broken image; we replace it with our own, forcing the image to display.

var docImages = document.getElementsByTagName("img");
var image;
for(var x=0;x<docImages.length;x++)
{
	image = docImages[x];
	if(image.src == "http://www.example.com/images/paymentDetails.gif")
		image.src = "{DOMAIN_NAME}/images/paymentDetails.gif";
}

To install the script open in in Firefox using the native ‘open’ command. After reloading the page we will see that our image now displays correctly. More user scripts can be downloaded from here. More information on Greasemonkey can be found here.