Posts Tagged ‘advanced’

From 0 to Greasemonkey in 5 Steps (or 5 to 20 Minutes)

6 Jul 2008

Did you know that you can — with a little effort — customize any web page within your Firefox web browser?

You can with Greasemonkey.  The best way to know it is to dive in.  If you are ready, try this:

  1. Get Firefox and the Greasemonkey and Firebug (essential for debugging code) extensions.
  2. Write some code.  Get to a console by selecting Tools > Firebug > Command Line (Ctrl/Cmd+Shift+L).  Try some of the code you find in Dive Into Greasemonkey.  You can also try these statements:
    alert("Hello, World!");
    var my_div = document.createElement("div");
    my_div.innerHTML = "Hello, you are at " +; = "center";
    document.body.insertBefore(my_div, document.body.firstChild);
    // This will open a window with a greeting,
    // then insert your location at the top of the page.
  3. Install your first script.  Select Tools > Greasemonkey > New User Script … or click on the Greasemonkey icon in the status bar.  Provide:
    • Name: My First Script
    • Namespace:
      which is not accurate, but is harmless for our test
    • Includes: *

    Click Ok to bring up an editor (you may have to select an editor first).  Append the code from step 2 to the new file, and save your changes.
    See Dive Into Greasemonkey: Hello World for a more detailed explanation.

  4. Load a new page to see your script in action.
  5. Find more scripts.  Look around, ask your friends, and try some of the links below.  If you are up for it, try creating your own scripts.

Once you are satisfied with your first script, feel free to uninstall it before it gets in your way.  Select “Manage User Scripts…” from the Greasemonkey menu, select your script, and then click the “Uninstall” button.

What’s going on here? Wikipedia says, “Greasemonkey is a Mozilla Firefox extension that allows users to install scripts that make on-the-fly changes to most HTML-based web pages.”  Basically, Greasemonkey monkeys around with a web page based on the code you feed it.  This code is in the form of JavaScript.

Warning: running code in your browser can be dangerous.  Only accept user scripts from trusted sources, and always examine the code before running it.

This demonstration was tested with Greasemonkey version 0.8.2.

Further Reading: