Reusing page jQuery in a Greasemonkey script

Many times I’ve used a RIA or a website and wanted it to behave differently or have an additional functionality that I need. Thanks to Greasemonkey this is possible.

We live in a jQueritifed world where most of the web pages use jQuery.

That’s why on of the things that I need to do most of the time when I write a userscript is to reuse the jQuery from the webpage without loading a new jQuery instance from the web. This will make my script much more responsive and who needs to load something that is already there.

Save your time by not reinventing the wheel and just use the boilerplate code I’m using for my Greasemonkey scripts.

Let’s take a close look at the code. First we need to declare the global jQuery and $ variables. We’ll populate the with the jQuery instance.

Next is the addJQuery function. Here we use the unsafeWindow objects. This gives us access to the web page underlying window object. From there we obtain a reference to jQuery by using window.jQuery.noConflict(). The noConflict function is required so that our script can stay undetected from the main page.

This approach will work only in Firefox with the Greasemonkey extension. For Opera we need another less elegant approach. We create a div element on the document and then get the window object through a click handler. This is the only solution I’ve found so far so if you know a better way do this feel free to share it.

All we have to do after that is to write our customization code using the full force of jQuery. The pageModifiers at the bottom of the script is an associative array that I use. It makes it really simple to attach code to different page in the same domain (as you’ll need most of the time). The key is a substring from the URL and if it’s matched then the value – your handler function will be called.

This boilerplate code can be used not only for Greasemonkey or Scriptfish, but for Opera and Google Chrome userscripts.

NOTE (04.23.2014):

This method doesn’t work in Chrome anymore. You’ll have add jQuery in your extension folder or load it.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.