Greasemonkey

Greasemonkey is an extension for Firefox that leverages javascript to modify the look and functionality of a page. At first glance this tool looks like a neat toy. However, this tool came in quite handy at one of our clients recently.

Our client was tracking their daily status on a whiteboard in a conference room. A corporate memo was sent out banning the exclusive use of whiteboards for teams. As a result we turned to our web-based tracking tool. Unfortunately their whiteboard equivalent was clunky and inadequate. I spent a few hours putting together a Greasemonkey script that altered the look of this page to mimic our old whiteboard. These changes helped ease this transition.

Let’s walk through a simple example to change the behavior of the base Google search page.

  1. Download and install Greasemonkey from https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
  2. Navigate to www.google.com
  3. Tools – > Greasemonkey -> New User Script…
  4. Enter a name
  5. Enter a namespace (This is provided so your scripts do not clash with others)
  6. Verify that the Includes contain ‘http://www.google.com/’
  7. A new js file will open in your default text editor.
  8. The script will contain a comment that reflects the values that you entered
  9. Add the following code
  10. GM_addStyle("\
        body{\
            background-image:url('http://upload.wikimedia.org/wikipedia/en/d/d3/Gm_icon.png');\
        }\
    ");
  11. GM_addStyle is method provided by the Greasemonkey API. (http://wiki.greasespot.net/Greasemonkey_Manual:API)
  12. Save the script and refresh ‘www.google.com’
  13. You should see grease monkeys all over the page.
  14. Now add the following code
  15. alert("I have been modified by Greasemonkey.");
  16. Save the script and refresh ‘www.google.com’
  17. You should see an alert box with the text above.

While this is a trivial example you can begin to imagine the possibilities. One of my colleagues used greasemonkey to modify a monitoring page. Before his modification it took three clicks to get the detailed information. We used this page every day all day to monitor our tests. After we installed his greasemonkey script we could just click on a new link that was generated. This seems like a trivial example, but we found that a number of these modifications helped us be more efficient and improved our quality of life. As a developer I hate repetitive tasks. I have a deep desire to automate everything. Greasemonkey empowers us to make the World Wide Web our own.

One comment

  1. Thanks for posting. I’ve heard about the legendary benefits of greasemonkey but never looked into it. Didn’t realize it was this simple to get started.

Comments are closed.