With the Greasemonkey Firefox plugin, you can create JavaScript snippets that will modify third-party websites to your own tastes.
If you're like me, then chances are you often run across websites that don't work quite as you would like. Wouldn't it be great if you could rewrite the Web to suit your tastes, for instance, change YouTube's color scheme or invert Google's color scheme to reduce eye fatigue?
Enter Greasemonkey, a Firefox extension that allows you to write JavaScript programs that execute on a domain-specific basis. Because JavaScript is capable of manipulating the Document Object Model (DOM) in every conceivable fashion, Greasemonkey enables you to tweak a website's presentation and behavior in innumerable ways.
Installing Greasemonkey
Greasemonkey is a Firefox extension, meaning it extends Firefox's capabilities by running within an instance of the browser. This also means you'll need to install Firefox in order to use Greasemonkey. After installing the browser, go to the Firefox extensions website where you'll find the Greasemonkey page. There, you'll find a button titled Add to Firefox. Click on that button to install Greasemonkey. When installed, you'll need to restart Firefox so be sure to save any browser-related work first.
Creating Your First Greasemonkey Script
When Firefox has restarted, you'll see the extension's smiling mascot monkey residing in the browser status bar. Right-click on the icon and you'll be presented with two options (see Figure 1), inviting you to either view your installed Greasemonkey scripts or create your own. In this article, you'll create a new script, so choose the latter option.
Before you can write a script, you'll need to provide the following few key pieces of information:
Name: The name of your script, used to uniquely identify it within the Greasemonkey manager.
Namespace: The namespace is used in conjunction with the aforementioned script name to uniquely identify it within the larger realm of the Greasemonkey community. Therefore, if you want to distribute your script, you should choose a namespace that you know will be globally unique. The most common naming solution is to use your URL. For instance, I use the namespace http://www.wjgilmore.com/code/. Keep in mind that this URL doesn't need to exist actually (although the domain should, and it should be owned by you).
Description: The description serves to explain the script's purpose.
Includes: This determines which domains will cause the script to execute. You're free to specify a particular domain (such as http://www.wjgilmore.com/*), a particular page within a domain (such as http://www.wjgilmore.com/code.html), or even every domain you visit (such as http://*). You can also specify multiple domains (or variations thereof) if you'd like the script to execute in multiple locations.
Excludes: The Excludes option allows you to assign filter rules to the domains identified within the Includes option. For instance, you may wish to cause a script to execute within http://www.wjgilmore.com/code/* but want to make an exception for http://www.wjgilmore.com/code/profile.html. You would define that exclusion here.
Press the OK button and you'll be prompted to next choose a text editor, which you'll use to edit the script. After that, Greasemonkey will populate the script header with the information you provided in the previous step. As an example, suppose you found the use of a certain term (such as profanity) to be disrespectful and wanted to swap out all occurrences of that term with something less grating. You can use JavaScript's native innerHTML.replace method to carry out this task. In order to make this example practical, I'll point the script to the homepage of my website, which regularly references the term "Zend" due to my ongoing writings on the Zend Framework:
I've always found JavaScript's native syntax to be quite painful to write, and I generally attempted to avoid the language altogether until jQuery came along. Naturally, I prefer to write Greasemonkey scripts using jQuery, and came across a great solution for doing so thanks to Joan Piedra. His script not only allows you to use jQuery's syntax to write your Greasemonkey scripts, but it will also determine whether the site is already using jQuery. If it doesn't, Piedra's script will reference the Google CDN rather than require you to host your own jQuery library.
The integration script is quite lengthy, so I won't repeat it here. Go to the website for the full script. Copy that code into the script, and in the letsJQuery function add the following line:
$('#header').replaceWith('<h2>CRITIC</h2>');
Again, point the include to http://www.wjgilmore.com and you'll see that my website header has been swapped out with a header that simply states CRITIC!
Third-party Resources
A friend once remarked that everyone is either an artist or a critic, an observation that has stuck in my head ever since. Although being a Web developer may qualify as art, I nonetheless would tend to side with the critics, given my penchant for simultaneously critiquing, categorizing, subcategorizing, lauding, berating, and classifying pretty much everything I encounter.
Perhaps proving that the world is not suffering from any shortage of critics, an enormous Greasemonkey community has sprung up, making tens of thousands of scripts available for download. You'll find information about many of these scripts at userscripts.org, a Greasemonkey script repository that allows you to keep tabs on your favorite scripts, as well as upload and manage your own.
Also be sure to check out GreaseSpot, which serves as Greasemonkey's official home. There, you'll find the manual, an FAQ, and a great deal of information regarding the finer points of script development.
Conclusion
The power of the "read-write Web" lies in the Web's ability not only to disseminate information but also to allow others to contribute their own. Greasemonkey takes that concept to the next level, allowing you to wield maximum control over how that information is presented to you! What else are you doing to make the Web your own?
