// Internet Duct Tape

Become a Greasemonkey Ninja with jQuery

Posted in Firefox and Greasemonkey by engtech on May 08, 2008

Programming Tips

This is for all the Greasemonkeyers in the house who want to learn how to be much more productive when it comes to hacking together Greasemonkey script by using my favorite Javascript library: jQuery. jQuery will turn a 700 line Greasemonkey script into a 12 line Greasemonkey script. I learned about jQuery through all of the Greasemonkey scripts I created to work with Friend Feed.

This is advanced stuff that is of interest to people writing Javascript. If you’re just a Greasemonkey user then you can safely skip this one.

What is jQuery?

jQuery lets you very concisely access any element on the page through the use of normal CSS selectors and custom selectors specific to jQuery. If you can access it with CSS or XPath then you can access it with jQuery. It gives you more options for selecting elements than CSS or XPath.

It also support method chaining which makes for some stupidly concise javascript code compared to the normal pain of walking the DOM or calling XPath that you see in most Greasemonkey scripts.


    function ff_show_domains() {
        $("a.main").each(function() {
            var uri = $(this).attr('href').replace('www.','').split('/');
            var domain = uri[2];
            ...

        });
    }

The other thing I love about jQuery is that it has plugins you can grab and import into your Greasemonkey scripts. Check out this concise plugin that lets you call Firebug’s console.log from within a jQuery method chain. That’s a perfect example of how powerful jQuery is.

jQuery Makes Me Happy

The hardest part of using jQuery with Greasemonkey is importing it. There are several ways to include jQuery into a Greasemonkey script. I’m going to walk through three of them. I would love it if jQuery became an official component of Greasemonkey, and I think that would greatly increase the number of useful Greasemonkey scripts being created.

Technique #1: Site already uses jQuery

If the site already uses jQuery (friendfeed.com, wordpress admin) then you’re in luck: you don’t have to import it.


$ = unsafeWindow.jQuery;
console.log( $('p') );

You can find out if the site uses jQuery by running ‘alert($)‘ in the Firebug console or by looking at the imported scripts.

Technique #2: Import from Remote Host

If the site doesn’t already use jQuery (boo, hiss) then you can import jQuery from jquery.com.

Joen Piedra has example code and a script showing how to do this.


// Example from http://www.joanpiedra.com/jquery/greasemonkey/

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works
    }

It’s a similar technique to the jQuerify bookmarklet that lets you add jQuery to any site in one click so that you can play around in the Firebug console.

Technique #3: Embed in Your Script

This is my preferred method because it reduces the number of external dependencies of your script. You can put all of the code for jQuery directly into your script so the user only has to download it once. This will reduce the load time of the page you’re Greasemonkeying since it is always faster to load local files than to load a Javascript library over the internet.

  1. Copy the packed version of jQuery into your script

  2. Use jQuery :)

Here’s an example of one of my scripts where I use the embedded packed jQuery as well as an embedded image file. That script runs on Soundamus (a very cool site if you’re a Last.FM listener, check it out) and adds links to search for the artist/album on an different site.

Here is the active javascript code that uses jQuery to do all the magic.

$('.post').each(function(i) {
		  var artist = $(this).find('a:eq(0)').text();
		  var album = $(this).find('a:eq(1)').text();
		  var search_link = SEARCH_URL+encodeURI(artist+" "+album);
		  $(this).prepend('<div style="clear:both; float:right;"><a title="Search for '+artist+' - '+album+'" href="'+search_link+'"><img src="'+data+'" /></a></div>');
		  $(this).css('clear','both');

});

Actually Related Posts

17 Responses

Subscribe to comments with RSS.

  1. Issac Kelly said, on May 08, 2008 at 4:02 pm

    I find it much easier to check if a site is using jquery by running alert($); in the firebug console, you don’t have to sort through all of their included files that way.

    I also use firebug console as my quick and dirty greasemonkey replacement.

  2. engtech said, on May 08, 2008 at 5:03 pm

    Here’s a plugin I should have included, makes it easy to use Firebug profile with jQuery:
    http://osteele.com/archives/2008/05/jquery-profile-plugin

    http://devkick.com/blog/useful-jquery-a-compilation-of-jquery-utilities/

    http://noteslog.com/chili/

  3. Ryan said, on May 09, 2008 at 6:27 am

    You can find a bunch of nice jquery tuts and examples here: http://www.noupe.com/tutorial/51-best-of-jquery-tutorials-and-examples.html

  4. [...] // Internet Duct Tape blogging / programming / technology / lifehacks Skip to content Subscription OptionsMost Popular PostsIDT Labs – Free Software ToolsWordPress.com Resources – Tips, Tricks and ToolsWordPress.com Theme ReviewsWordPress.com Theme Review HelpGreasemonkey script: WordPress Category ResizerWordPress.com 7 Day Referrer ParserPerl Script – WordPress.com 7 Day Referrer ParserGreasemonkey Script: Akismet Auntie Spam for WordPressGreasemonkey Script: Find images that are too wideTag Cloud Generator for WordPress.comTag Cloud Generator AdvancedTag Cloud Generator – Release NotesWordPress Themes by InternetDuctTape.comBlack and Blue and Read All Over Theme for WordPress SandboxMoon Under Uranus Theme for WordPress SandboxMiscellanious WordPress Scripts and ToolsGreaseMonkey Script: WordPress Comment NinjaTechnorati Favorite Your FansTechnorati Favorite Your Fans – Release NotesGreasemonkey script: Flickr always search for Creative Commons licensed photosGreasemonkey Script: Yahoo Pipe CleanerTag CloudAll Posts by Category and TitleSeriesGift Guide for GeeksWelcome to Internet Duct Tapegoogle1ec000b3808eedbf.htmlAbout MeDisclosureImage Credits « Become a Greasemonkey Ninja with jQuery [...]

  5. [...] Become a Greasemonkey Ninja with jQuery [...]

  6. become a ninja said, on June 02, 2008 at 4:37 pm

    [...] – Free Software Tools. WordPress.com Resources – Tips, Tricks and Tools. WordPress.com Theme Reviewshttp://internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/How does one become a ninja?It would be nice if anyone who wanted to be a ninja could simply fill [...]

  7. Luke said, on July 01, 2008 at 2:29 am

    A quick check for jQuery already existing would be to check the typeof $

    So:
    var jQueryExists = ( ( typeof $ )==”function” );

  8. Nik said, on July 07, 2008 at 8:20 am

    Just thought I’d mention – there’s nothing special about $ being bound jQuery, it could be bound to anything.

    Try this to check : typeof(jQuery) === ‘function’

  9. [...] Become a Greasemonkey Ninja with jQuery [...]

  10. [...] How to be a Greasemonkey Ninja [...]

  11. Stephan Sokolow said, on September 23, 2008 at 11:25 pm

    For the record, the newest Greasemonkey versions should now provide a much better alternative to this.

    See http://wiki.greasespot.net/Metadata_block#.40require for an example of how to efficiently load jQuery from the Google AJAX API (a free content distribution network they run in the hopes that people will write more Google widgets) at userscript install time via the @require metadata key.

  12. Aral Balkan - Links for 2008-12-28 said, on December 28, 2008 at 6:04 pm

    [...] Become a Greasemonkey Ninja with jQuery « // Internet Duct Tape This is for all the Greasemonkeyers in the house who want to learn how to be much more productive when it comes to hacking together Greasemonkey script by using my favorite Javascript library: jQuery. (tags: jquery greasemonkey) The Links for 2008-12-28 article by Aral Balkan, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial 2.0 UK: England License. [...]

  13. Jeroen said, on January 20, 2009 at 5:30 pm

    Thank you for this post. Exactly the info I was looking for.
    It’s time to short-cut the unwilling and add me some in-house website functionality.

    Cheers!

  14. links for 2009-01-21 said, on January 21, 2009 at 5:03 pm

    [...] Become a Greasemonkey Ninja with jQuery « // Internet Duct Tape This is for all the Greasemonkeyers in the house who want to learn how to be much more productive when it comes to hacking together Greasemonkey script by using my favorite Javascript library: jQuery. jQuery will turn a 700 line Greasemonkey script into a 12 line Greasemonkey script. (tags: programming tutorial javascript firefox greasemonkey jquery) Bookmark It Hide Sites [...]

  15. izle said, on March 09, 2009 at 6:23 am

    thank u…;)

  16. anon said, on February 28, 2010 at 9:21 pm

    Hi tried the first approach. On the page where I want to use my greasemonkey script jquery is loaded via

    google.load(“jquery”, “1.4.2″);

    the problem is I cant access jquery within my skript, but it works fine with in the firebug console.

    any ideas?


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 281 other followers

%d bloggers like this: