Greasemonkey
Greasemonkey is an extension of Firefox. You can write a JavaScript in the form of a Greasemonkey "user script" that your Firefox browser applies to the DOM just before the HTML is painted on the browser screen. This means that you have everything available to you: the HTML code, CSS style code and any JavaScripts attached to the webpage. Your Greasemonkey script is a JavaScript that runs in the browser and not as a child of the webpage. This means that you can make HTTPRequests to any number of other web resources from any number of domains. Thus Greasemonkey permits you to not only change the look and feel of any webpage, but you can also mash together any web content. Perhaps the only limiting parameter of your application of Greasemonkey is the totally hysterical manner in which other people build their webpages and therefore how difficult it is to modify their HTML soup.
Download Greasemonkey [Use your Firefox browser]
Dive into Greasemonkey by Mark Pilgrim
A Greasemonkey scripting template
A Greasemonkey tutorial
A scripter's comparison of XPath and DOM methods
User add-on for scripters: XPather
User add-on for scripters: Web developer
XPath - XML Path Language
This is a language for selecting nodes from an XML document. The XPath language is based on a tree representation of the XML document, and provides the ability to navigate around the tree, selecting nodes by a variety of criteria.
While our course is not focused on extensible technologies, you may be interested in seeing examples of how XPath can be used in targeting information nodes in XML documents. Here's a web page about XPath that I used in our course Winter 2006.
Here's a page where you can play with XPath queries.
An example Greasemonkey script:
Replace the picture of the "greasemonkey" on this page with a picture of President Emmert
University of Washington president Emmert has a webpage with a handsome photo. Point your browser at http://www.washington.edu/president/index.html to view his webpage and the photo. Note that the domain of this photo is "www.washington.edu", while the domain of the webpage that you're reading at this moment is "projects.washington.ischool.edu".
The following Greasemonkey script fires on this webpage. It locates the <img> tag of the greasemonkey. It reaches out to the president's page and downloads its HTML. It finds the name of the president's picture. It asks the washington.edu server for the picture. It pastes this address into this webpage. Then your browser repaints this webpage on your browser screen. Presto! gummo! President Emmert is on this page instead of the greasemonkey.
// ==UserScript==
// @name Example INFO 343
// @author Terry Brooks
// @date July 2008
// @namespace http://www.ischool.washington.edu/
// @include http://projects.ischool.washington.edu/tabrooks/343INFO/greaseMonkey/greaseMonkey.htm
// @exclude http://faculty.washington.edu/tabrooks/
// ==/UserScript==
(function()
{
try {
//////////////////////////////////////////////////////////
// Use Xpath to get image of greasemonkey
var myNodeList;
myNodeList = document.evaluate(
"/html/body/div[@id='doc2']/div[@id='bd']/div[2]/div[@id='specificationMainPage']/p[1]/img",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
// monkeyNode is img of the greasemonkey
var monkeyNode;
for (var i = 0; i < myNodeList.snapshotLength; i++)
{
monkeyNode = myNodeList.snapshotItem(i);
}
/////////////////////////////////////////////////////////////
// HTTPRequest to the president's page
GM_xmlhttpRequest({
method: 'GET',
url: 'http://www.washington.edu/president/index.html',
headers: {
'User-agent': 'Mozilla/4.0 (compatible) Greasemonkey',
'Accept': 'text/html',
},
onload: function(responseDetails) {
// stuff is of string type
var stuff = responseDetails.responseText;
// Transform string mash page into DOM object
var mashPage = document.createElement('div');
mashPage.innerHTML = stuff;
// Search mash DOM object with Xpath to the Emmert image
var mashNodeList;
mashNodeList = document.evaluate(
"//div[@id='container']/div[@id='mainContainer']/div[@id='contentContainer']/div[2]/img",
mashPage,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
// Isolate the Emmert image
var prezNode;
for (var i = 0; i < mashNodeList.snapshotLength; i++)
{
prezNode = mashNodeList.snapshotItem(i);
}
// Replace the default ischool domain with the UW domain of the Emmert image
var fullPath = prezNode.src.replace('projects.ischool.washington.edu','www.washington.edu');
// Give the UW path to the Emmert image to the greasemonkey image
monkeyNode.src = fullPath;
}
});
//////////////////////////////////////////////////////////////////
} catch (eErr) {
alert ("Greasemonkey error: " + eErr);
}
return;
}) ();
How to use Greasemonkey: (1) Use the Firefox browser, (2) Load the Greasemonkey extension (which will require that you restart Firefox), (3) Point your Firefox browser at this webpage, (4) Click on the link below, (5) Firefox will recognize this script as a Greasemonkey script, (6) Click to install this script, (7) Refresh this page. President Emmert should replace the greasemonkey.
Download this script
Do it again!
But even faster this time
There is, as you might suspect, more than one way to grease up a web page. The following script is even faster because it contains the complete path to the Emmert image right in the code. The script above is an excellent tutorial with many exemplary features and is more robust that the following script. For example, if Emmert changes the name of his picture from "MarkEmmert_June2007full.jpg" to "MarkEmmert_June2008full.jpg" the script above will still work, but the following script tanks. Take your pick between a fast, but frail, hack and a complex, but more robust, hack.
// ==UserScript==
// @name Second Emmert Script
// @author Terry Brooks
// @date August 2008
// @namespace http://www.ischool.washington.edu/
// @include http://projects.ischool.washington.edu/tabrooks/343INFO/greaseMonkey/greaseMonkey.htm
// @exclude http://faculty.washington.edu/tabrooks/
// ==/UserScript==
(function()
{
try {
//////////////////////////////////////////////////////////
// Use Xpath to get image of greasemonkey
var myNodeList;
myNodeList = document.evaluate(
"/html/body/div[@id='doc2']/div[@id='bd']/div[2]/div[@id='specificationMainPage']/p[1]/img",
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
// monkeyNode is img of the greasemonkey
var monkeyNode;
for (var i = 0; i < myNodeList.snapshotLength; i++)
{
monkeyNode = myNodeList.snapshotItem(i);
}
////////////////////////////////////////////
// Change the src attribute of the image
monkeyNode.src = "http://www.washington.edu/president/images/MarkEmmert_June2007full.jpg";
} catch (eErr) {
alert ("Greasemonkey error: " + eErr);
}
return;
}) ();