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

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

Mon, 2012-06-04 06:19 — gtaaromi (not verified)

Special Content!

This is compared to anything else is extra. The other way is not a lot of people have a choice. But this one is special, as well as abnormal.
Honeymoon Destinations in india | Best Honeymoon Destinations in India

Tue, 2013-03-05 10:28 — e-papierosy (not verified)

When I googled how to use

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 http://e-papierossy.com.pl/en/e-papierosy/99-e-papierosy-gambit-1221.html wrong bits, and I wander why they're still published. They're still http://e-papierossy.com.pl/en/e-papierosy/80-e-papierosy-gambit-123445.html indexed http://e-papierossy.com.pl/en/e-papierosy/76-e-papierosy-gombit-423456.htmlso that people like me can experience more pain. Here's what I came up with after much labor. I believe it is fail-proof.

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

Sat, 2012-09-01 02:42 — kumar1 (not verified)

Hello every one

Nicely written information in this post, I prefer to read this kind of stuff. The quality of content is fine and the conclusion is fine. kings casino | my bet.com

Thu, 2013-03-21 09:14 — Merle Budapest journey (not verified)

my favorites programming language

Jquery is one of my favorites programming language. it is extremely fast and easy to learn:) Greasemonkey is an another great thing I use this a lot of.

Sun, 2013-05-12 20:56 — topiary (not verified)

http://topiarysg.com

what an awesome blog. Hedges Park Condo, Topiary EC, Twin Fountains Woodlands

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <css> <html> <javascript> <mysql> <php> <span> <a> <b> <i> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <sup> <sub> <dd> <del> <blockquote> <img> <q> <p> <div>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <css>, <html>, <javascript>, <mysql>, <php>, <rails>, <ruby>.

More information about formatting options

CAPTCHA
I have to wonder if you're a human spammer or a machine, or less likely someone who cares to leave his or her thoughts behind.