Have Your jQuery Fun on Any Site with Greasemonkey

read 13 comments

Hot on the heels of my jQuerify Bookmarklet entry [note: update bookmarklet here] and John Resig's Hacking Digg with Firebug and jQuery entry, Joan Piedra has put together a Greasemonkey user script (Firefox only) that lets jQuery load automatically on any site that you've set for it in the Greasemonkey preferences dialog.

Not only that, but this user script even gives you a placeholder to add your own jQuery code, so you can create specialized user scripts that take advantage of jQuery.

Update

There has been a lot of improvement in this area over the past couple years. For more information see jQuery in Greasemonkey scripts using the metadata key @require

Continue Reading Below

The Script

The default code, once jQuery has been loaded, is an alert, so you may want to comment out that line right away (unless, of course, you like alert messages popping up for every web page). For the time being, I've replaced it in mine with an inline message that is removed after making a cameo appearance. Here is what that looks like, with a little of Joan's context:

JavaScript:
  1. // All your GM code must be inside this function
  2. function letsJQuery() {
  3. //make sure there is no conflict between jQuery and other libraries
  4. //notify that jQuery is running...
  5.   $('<div>jQuery is running!</div>')
  6.     .css({padding: '10px', background: '#ffc', position: 'absolute',top: '0', width: '100%'})
  7.     .prependTo('body')
  8.     .fadeIn('fast')
  9.     .animate({opacity: 1.0}, 300)
  10.     .fadeOut('fast', function() {
  11.       $(this).remove();
  12.     });
  13. //start custom jQuery scripting.
  14. }

Note: This is not the full user script. It is just a snippet that runs once jQuery has been loaded via Greasemonkey.

To be considerate of John Resig's bandwidth, we should all change the following line to point to our own copy of jquery.js:

JavaScript:
  1. GM_JQ.src = 'http://code.jquery.com/jquery-latest.pack.js';

Oh, the Possibilities!

I am very excited about the possibilities that Joan's Greasemonkey script will open up for jQuery scripters. For example, John Resig's Digg hacks would work great in a user script. In fact, I just whipped one up this evening. Try it out: Hacking Digg with jQuery and Greasemonkey! It attaches a "sticky" menu of options (using position:fixed) to the top-right corner of any Digg page with buried comments:

hacking digg options - open

And, you can tuck it to the side to keep it from getting in your way:

hacking digg options - closed

Also, keep an eye out for a jQuery extension for Mozilla/Firefox, currently being worked on by Dan Atkinson.

Get Joan Piedra's jQuery for Greasemonkey user script.


comment feed

13 comments

  1. Dan Atkinson

    Hey there!

    Thanks for the link. I've been waiting for weeks for my jQuery Firefox extension to be granted. I think I'm going to put up a test version tonight and blow off Mozilla for their slowness.

    I think it'd be great. Attaching something like tablesorter to the plugin so that any table on any webpage is sortable, regardless of the sites own JS (not my idea, but I'm championing it as a good example of the extension).

  2. Dan Atkinson

    I just realised, I also wrote a similar jQuery script for Greasemonkey a while back. I can't remember if it worked though. I think I scrapped development of it, because I didn't want jquery.com getting battered by billions and squillions of Firefox users downloading my script! :)

    http://userscripts.org/scripts/show/7010

  3. Hey Karl, I'm glad you liked my simple userscript. Thanks for posting!

  4. @Dan, not a problem, man. Happy to link to you. Yeah, it's a bummer that Mozilla is so slow with that. Looking forward to seeing what you cook up.

    I know what you mean about the fear of everybody pinging the heck out of jquery.com with the user script. The Hacking Digg script that I linked to above actually uses a copy of jquery.js on this site. I don't think I'll be submitting it to userscripts.org, though, for the reason that you mention. I'm considering this one more a "proof of concept" than an all-out hey-everybody-use-my-script script.

    @Joan, "simple" maybe, but definitely elegant. It works, and that's what counts for me. You might want to consider putting the $.noconflict() method at the top of the letsJQuery() function as a default, just in case the site you're visiting uses another JavaScript library. Cheers to you for a great blending of jQuery and Greasemonkey!

  5. In order to not slam jQuery.com I have created a altered jQuery to work with greasemonkey. Enjoy!
       jQuery 1.1.1 -- http://userscripts.org/scripts/show/7373

    A fun jQuery example can be found here:
       Google Icon -- http://userscripts.org/scripts/show/6061

  6. Well done, Sean! Thanks for the links.

  7. Rocco

    hi
    this does not work now: GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    this is correct: GM_JQ.src = 'http://code.jquery.com/jquery-latest.pack.js';

  8. Thanks for that, Rocco. I've updated the entry. Still, that's the line that I said should be changed to point to your own version of jQuery anyway. ;)

  9. Chandan Kudige

    Folks,

    I have been playing with various options of using jquery with greasemonkey and I just couldn't
    convince myself that loading jquery from http: url is the best way to do this.

    I tried loading jquery.js from chrome: URL but it just doesn't work.

    Anyway, finally I have come to the conclusion that greasemonkey should support 'runtime scripts'
    just like user scripts, but runtime scripts should be loaded in the context of user scripts that need the runtime.

    So the user script could have an include such as:
    // @runtime jquery.js|http://code.jquery.com/jquery-latest.pack.js

    which tells greasemonkey to load jquery.js in the context of this user script, and if jquery.js is not available
    to download it from the URL. This would load the http: url only once and after that, it will be loaded locally.

    But, before I implement that, I have created a special build of greasemonkey which has been built with jquery.js and allows any user script to use jquery seamlessly.

    You can download the extension from here: http://monkey.coolspacer.com/

    Comments and feedback welcome. If someone has a better idea to support different runtimes, I would love to hear it.

  10. vB-Hacker.com daki seo yarışması

    thank you!

  11. Thai Property

    Hahaha ;) Greasemonkey !
    Can you show me some exsemple , i Think Digg.com it's very high technology

  12. Damian W

    Greasemonkey should allow you to define 'global includes' for stuff like jQuery and any other common code.

  13. Neva

    I've been waiting for weeks for my jQuery Firefox extension to be granted. I think I'm going to put up a test version tonight and blow off Mozilla for their slowness.

One Ping

  1. Greasmonkey und jQuery gemeinsam auf fremden und eigenen Webseiten nutzen...

    Mit Greasemonkey lassen sich innerhalb von Firefox beliebige Webseiten verändern und mit zusätzlichen Funktionen an die eigenen Wünsche anpassen. Oftmals möchte man dabei auch ein Javascript-Framework, wie jQuery, mit einbinden, um ...

Sorry, but comments for this entry are now closed.