Syndicate

Feed

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

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 11 years ago.

Comments

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();

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. :)

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. :)

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.