Notes about combining jQuery and Greasemonkey

By David Pratt / Tags: greasemonkey, javascript, jquery / 1 Comment / Published: 05-11-09

Having just written my first Greasemonkey script in a while, I thought I might share some of my learning’s!

Include jQuery by using the @require statement

Greasemonkey doesn’t inherit the jQuery library if it is just loaded onto the web page as normal, you need to figure out a way of allowing your Greasemonkey script to use it another way. If I had read the Greasemonkey docs from the off, I would have stumbled across the correct method within about 5 minutes, but I didn’t, I just dived straight on in and it took a lot longer…

To add jQuery, include the @require line in your script header. This needs to be done before you install the script and cannot be done retrospectively.

// ==UserScript==
// @name          Awesome Tool
// @namespace     http://daipratt.co.uk
// @description   Top Secret
// @include       http://daipratt.co.uk/*
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
// ==/UserScript==

Make sure that your Greasemonkey script ends in .user.js

If it doesn’t, you’ll spend ages wondering why it won’t let you install a local script.

Store session data

You don’t need an elaborate method of storing data for retrieval between sessions and pages, there are a pair of functions built into Greasemonkey that do the job nicely:

//Sets a key value pair that Greasemonkey should store
GM_setValue(key, value);
//Retrieves a value, given an existing key
var v = GM_getValue(key);