Enterprise Software

Customize your Web browsing experience with Greasemonkey

Greasemonkey allows you to write scripts that manipulate Web pages you visit. Learn specific details about how you can use this popular add-on to extend and customize the Web browsing experience.

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://www.techrepublic.com/blog*

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

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).

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.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

12 comments
JandNL
JandNL

We use Greasemonkey for Firefox. Is there anything similar for Internet Explorer? We don't use IE much because we feel Firefox is a better browser, but since our ISP uses IE and Microsoft downloads don't work from any other browser, we are forced to use it in certain situations.

50THZ
50THZ

We've been doing it for 2 yrs ... try it again

Justin James
Justin James

Yup, it does exist, but the link in the article is hard to notice. I missed it too: http://www.gm4ie.com/ J.Ja

JandNL
JandNL

Thanks a lot! One last question - is there a guidebook or something out there for new users?

flmagman
flmagman

They listed some free chapters from a book that looked like it would be useful to learn how to use it. Now I just have to come up with a compelling enough reason to spend time on it!

tech
tech

Add Developer Console to Opera and you get many of the same functions. Plus, with Opera, your using the innovator not the copycat. The Opera Browser is faster and less of a resource hog than Firefox. Almost all of the useful add-ons that you can get for Firefox are already part of Opera. Why use the copycat when Opera works better?

Justin James
Justin James

I've heard of a lot of neat things people are doing with this... enough that I wish they had a version for IE. What do you guys use Greasemonkey for? J.Ja

MadestroITSolutions
MadestroITSolutions

Within my limited knowledge of this tool (I just downloaded and played with it for 5 minutes) it seems to me like most of the neat things you can do [obviosuly] depend on the page markup. So say for example if the id of an object being targeted by a script changes the script will fail. Because of this, most of the scripts will need constant maintenance which would limit distribution. Granted I can see other more general, less dependant uses like what you mentioned below somewhere (CSS, links). All in all, I think it's a kewl tool to have. I personally was thinking about Unit Testing. I could make scripts for myself that test out forms before I even release it for Q.A., or even auto-logins (security issues aside...)

Jaqui
Jaqui

you missed the link in the entry J.Ja. http://www.gm4ie.com/

Justin James
Justin James

Thanks Jaqui! I guess this means that it may be time for me to re-start my previous attempts to get the in-content links underlined. At least I got them to make it blue, instead of the dark grey that it used to be... J.Ja

Justin James
Justin James

I just might do that, now that you mention it. :) I *would* just set a CSS that fits my needs and tell IE to use it on all sites, but that would break the majority of sites now. :( J.Ja

mosw
mosw

You could create a Greasemonkey script to underline links and just send it out to us regular readers.

Editor's Picks