Syndicate

Feed
Home

Using Greasemonkey to load and use jQuery while being considerate to John's bandwidth

Tuesday, 27 Oct 2009 — Caroline Schnapp

When I googled how to use jQuery in a Greasemonkey script — a script to run on a web page that already loads some other, conflicting, JavaScript framework, like Prototype — I found no script that worked. Not a fucking one. They all contained very wrong bits, and I wander why they're still published. They're still indexed so that people like me can experience more pain. Here's what I came up with after much labor. I believe it is fail-proof.

[]


// ==UserScript==
// @name name
// @namespace namespace
// @description Does jQuery stuff while playing nice with other JavaScript frameworks
// @author Caroline Schnapp
// @homepage http://11heavens.com/using-greasemonkey-to-load-and-use-jQuery
// @include *
// ==/UserScript==
 
// Add jQuery
var script = document.createElement('script');
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script);
// When jQuery is loaded
script.addEventListener('load', function(){ 
  jQuery = unsafeWindow['jQuery'];
  jQuery.noConflict();
  /* You put your jQuery code here, which must use the jQuery namespace. See Note. */
}, false);
Note: Use the “jQuery” namespace, not the dollar sign “$”, in your code.

How it all works — me thinks

My code makes the following assumptions:

  • The greasemonkey script is run when the DOM is ready. Greasemonkey just does stuff to a document when it is ready.
  • My script adds a script tag to the head and waits till the jQuery library has loaded to do its thing to the body.
  • You can use addEventListener with the event 'load' on a script element, and your callback function will be executed when the .js file has finished loading.
  • The DOM is already ready at the time you're loading jQuery (see 1st point), so no need to use the jQuery(function {}); construct in your code later on.

jQuery is hosted on Google — I always forget that

You can find a link to google-hosted latest and best jQuery minified right here.
Last edited by Caroline Schnapp about 12 years ago.
| | |

Printer-friendly version | Login to post comments | 82684 reads

Comments

Sat, 2012-02-11 04:01 — BugFreeTech (not verified)

your solution stands out

your solution stands out where no other worked sir.
i am using the $ variable just fine too :)

script.addEventListener('load', function(){ 
  $ = unsafeWindow['jQuery'];
  $.noConflict();

Tue, 2012-06-19 14:27 — Nephs (not verified)

script.addEventListener('load

script.addEventListener('load', function(){
jQuery = unsafeWindow['jQuery'];
jQuery.noConflict();
(function($){
/* You put your jQuery code here, which must use the jQuery namespace. See Note. */
console.log($);

})(jQuery);
}, false);

So you can use your $ inside the anonymous function. :)

Tue, 2012-06-19 14:27 — Nephs (not verified)

script.addEventListener('load

script.addEventListener('load', function(){
jQuery = unsafeWindow['jQuery'];
jQuery.noConflict();
(function($){
/* You put your jQuery code here, which must use the jQuery namespace. See Note. */
console.log($);

})(jQuery);
}, false);

So you can use your $ inside the anonymous function. :)

Wed, 2015-06-10 04:47 — Acefloormats (not verified)

Nice tip

I've been stuck with these scripts for quite some time now and thanks to you, I am now on the next step of my task. Works like magic.