Learning jQuery in the Greasemonkey playground

If you want to learn jQuery, but are not sure how to go about it, then you should go check out Greasemonkey, which is a Firefox add-on. Basically, what it does is it allows you to provide Firefox with a javascript file and a url pattern, and it will run the javascript on the page every time you go to it.

Most people kind of scratch their heads at this, not quite realizing the power of a tool like that. It is cool in and of itself, because it allows you to tweak your favorite webpages any way you like, and once installed it is transparent.

Another really cool benefit of it, though, is it makes a great testbed for practicing your javascript skills. You don't have to have an entire website to practice with, because you can practice on any site out there.

For example, here is a very small Greasemonkey script.

// ==UserScript==
// @name           Google Test
// @namespace      gtest
// @description    A small test script that picks on google
// @include        http://www.google.com/
// ==/UserScript==

document.getElementsByName("btnI")[0].style.display = "none";

All this does is remove the I'm Feeling Lucky button on the Google homepage. Not a lot, but as you can see, there is not a lot of buildup, either - you can just jump right in to doing javascript manipulations against whatever page you want.

The top part of the above script is the script metadata - it tells Greasemonkey what to do with the script. The most important part there is the @include tag - this is the URL pattern on which this script will execute.

What is even better is that you can start to play with jQuery as well. There is one more gotcha with jQuery - you need to include it into your script. You do this with a relatively simple little bit of metadata. Here is the same script, this time using jQuery.

// ==UserScript==
// ==UserScript==
// @name           Google Test
// @namespace      gtest
// @description    A small test script that picks on google
// @include        http://www.google.com/
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
// ==/UserScript==

$("input[name=btnI]").hide();

Notice the @require metadata - that tells Greasemonkey to include that external javascript file into your script.

Alright, we have the scripts ready, but how do we start using this thing? There are just a few steps to get you going:

1. Go to the Greasemonkey installation page, and install the add-on
   
2. Grab the script text above, and save it onto your computer somewhere. Call it "googleTest.user.js". The ".user.js" part is convention when dealing with Greasemonkey scripts.
   
3. With Firefox open and Greasemonkey installed, grab the googleTest file, and drag it onto Firefox. You should see a Greasemonkey pop up asking if you want to install. Tell it yes.
   
4. Go to Google, and see that we have gotten rid of the I'm Feeling Lucky button.
   

All there is to it. Once you have the script installed, you do not have to go through the drag and drop process again. Simply go to Tools > Greasemonkey > Manage User Scripts... and select your script to edit. It should open the script in your favorite text editor, ready to edit away to your heart's content. As soon as you save the file, the script is updated in Firefox and ready to test out.

Another great tool that goes hand in hand with this process is Firebug. Most web developers probably already know and love Firebug, but just in case you are not familiar, it is another Firefox add-on that is incredibly useful for web development. It is particularly useful for writing Greasemonkey scripts, because you need to know what to edit with your javascript. For example, I used it to determine what element to grab to get rid of the I'm Feeling Lucky button on Google.

I have successfully used Greasemonkey to expand my own jQuery knowledge, and it was an effective and entertaining way of going about it. If you want to learn more about jQuery, I highly recommend this method. Good luck!