Tech

Manipulate Web pages with Greasemonkey

After I wrote about the Firefox add-on Chickenfoot, TechRepublic members e-mailed me to point out other tools provide similar functionality. Based on member feedback, Greasemonkey is one of the more popular add-ons. Discover how you can use Greasemonkey to extend and customize the Web browsing experience.

Extensibility
Greasemonkey allows you to write scripts that manipulate Web pages you visit. This may include tweaking a page to make it more accessible, fixing errors on a page, or pulling data from another Web site. You can accomplish all of this via JavaScript.

Freely available
Like Chickenfoot, Greasemonkey is freely available for download from the Firefox Add-ons page. Greasemonkey is also available for Internet Explorer. Once you download and install the Greasemonkey add-on, it is available for use when you browse the Web.

In Firefox, Greasemonkey is available via the Tools menu, which offers three menu items: Install User Script, Manage User Scripts, and User Script Commands. The Internet Explorer version runs separately with a shortcut installed to start it. (Note: I use the Firefox version for the examples in this article.)

The Greasemonkey installation simply gives you a platform for using scripts to interact with Web pages. You may create your own scripts or use one of the many freely available scripts on the Web.

Working with scripts
When a new Web page loads, Greasemonkey examines its list of installed scripts to determine if there are scripts that apply to the page that is loading. Scripts have include and exclude directives that specify what sites or domains apply or don't apply to it. If a match is found, the script runs before the page is rendered in the browser.

A script begins and ends with a wrapper of comments; these comments tell Greasemonkey where a script starts and stops. The wrapper has the following syntax:

// ==UserScript==
//
// ==/UserScript==

Scripts include metadata that provide details about the script, including target sites and sites that should never apply. The following metadata elements may be used:

• Name: The name assigned to the script. It is displayed when the script is installed, as well as within the Manage Scripts window.
• Namespace: The namespace used to distinguish scripts when more than one has the same name. (This is the same approach as used in programming languages like Java and C#.)
• Description: A brief description of the script's purpose.
• Include: A list of URLs associated with the script (i.e., the URLs for running the script). The URLs may include wildcard characters (*). Multiple URLs appear on their own line.
• Exclude: A list of URLs for which the scripts will never run. Multiple entries appear on their own line.

With the metadata section in place, the remaining portion of the script is the JavaScript that provides the desired functionality.

I have written a small script as an example. The script hides a certain element on the page; in this instance, it's the element with an id of contentData. The script's include directive says it only runs on the blogs.techrepublic.com door. The URL includes an asterisk on the end to tell the script to run on all pages that begin with the designated URL.

// ==UserScript==
// @namespace     http://tonypatton.com
// @name          TR Test
// @description   Removes the author name from TR blog page
// @include       http://blogs.techrepublic.com.com*
document.getElementById('contentData').style.display = 'none';
// ==/UserScript==

This script is saved in its own text file. You may assign any name to the file, but the file name must end with .user.js. Greasemonkey requires the user portion, and the js file extension signals JavaScript. Once the file is saved, you may load it in Firefox by choosing Open File from the File drop-down menu. The lower right corner of the browser will tell you if it loads successfully. For this example, it reads "'TR Test' installed successfully."

With the script loaded, you may visit a Web site to test its functionality. I decided to check out my TechRepublic article about migrating legacy .NET projects to Visual Studio 2008 to see the script in action. When it loads, the article's author name section does not display. This simple example demonstrates Greasemonkey's power and flexibility.

You can get to the Greasemonkey menu via the Tools menu or by right-clicking the monkey located in the lower right corner of the browser window. The Greasemonkey menu features the Manage User Scripts selection, which you can see in Figure A.

Figure A

Figure A: Managing Greasemonkey scripts in Firefox

Manage User Scripts allows you to add or manipulate the include and exclude directives for installed scripts. Also, you may uninstall a script via the Uninstall button. The Enabled check box lets you to turn scripts on and off, so you don’t have to uninstall a script to stop it.

Plenty of scripts
There are lots of freely available Greasemonkey scripts. A good example is the Userscripts.org site, which provides a searchable inventory of scripts along with user comments.

The script you see in Figure A is one that I installed from ESPN4Factors. It adds more information to NBA box score pages located on the ESPN site. The script takes existing data on an NBA box score page and performs calculations that are displayed in their own table. It is a great example of taking existing data and extending it to provide more information.

Greasemonkey hacks
You can pick up some amazing tips in these nine chapter downloads from Mark Pilgrim's Greasemonkey Hacks, First Edition: Tips & Tools for Remixing the Web with Firefox (published by O'Reilly).

• Greasemonkey Hacks: Make Pop-Up Titles Prettier
• Greasemonkey Hacks: Keep Track of Secure Site Passwords
• Greasemonkey Hacks: Trace XMLHttpRequest Activity
• Greasemonkey Hacks: Add Keyboard Shortcuts to Google Search Results
• Greasemonkey Hacks: Add Saved Searches to Gmail
• Greasemonkey Hacks: Make Google More Accessible for Low-Vision Users
• Greasemonkey Hacks: Bypass Annoying Site Registrations
• Greasemonkey Hacks: Syndicate Encrypted Content
• Greasemonkey Hacks: Compare Book Prices

Leverage the Web
You can use Greasemonkey to: make a page more accessible or easier to read, add or eliminate data, or whatever fits your needs. It is another great example of the innovation associated with the Web.

Do you use tools such as Greasemonkey and Chickenfoot to alter your Web browsing experience? If so, what is your favorite browser add-on? Share your thoughts with the Web Developer community.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Latest from Blog Central

Up close and personal with a merger

Read more »

What's important from our sponsors

Business

Intelligence Summit

Presented by

Cutting-edge technology from premium sponsors

HP Simply StorageWorks D2D Backup System

Explore this disk-to-disk backup system that is fully automated and provides reliable data protection for your business.