Have Your jQuery Fun on Any Site with Greasemonkey

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

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:

[js]// All your GM code must be inside this function function letsJQuery() { //make sure there is no conflict between jQuery and other libraries $.noConflict() //notify that jQuery is running... $('

jQuery is running!

') .css({padding: '10px', background: '#ffc', position: 'absolute',top: '0', width: '100%'}) .prependTo('body') .fadeIn('fast') .animate({opacity: 1.0}, 300) .fadeOut('fast', function() { $(this).remove(); }); //start custom jQuery scripting. }[/js]

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:

[js]GM_JQ.src = 'http://code.jquery.com/jquery-latest.pack.js';[/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: