DumpsterDoggy

Bookmark This

Writing a Greasemonkey Script Using jQuery

Chris Missal, December 06, 2008

There is a Firefox Addon called Greasemonkey that I've used a bit, but I really wanted to see what I could do with it. Moreover, I would be more apt to use it often if I could write jQuery syntax in it. This combination lead me to Joan Piedra's site, which contained an example for loading jQuery into a Greasemonkey script. Nothing too outstanding here, just some really good up front leg work for us.

Next, what was my reason for wanting to do this? Well I wanted to add my own features to certain sites. In this example, I'll show you how to add the ability to find out if a fellow Twitterer is following you back with one click.

If you open up Joan's script you'll see a function to put your jQuery code:

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

By browsing to Twitter's API you'll see the call that needs to be made to check if a "following connection" exists, as well as many other API calls you can use. Below I'm using the call to check if one user follows another. I pass the user in question as user_a and my own username as user_b.

var me = $("meta[name='session-user-screen_name']").attr("content");
var userInQuestion = $(this).attr("rel");
$.getJSON("http://twitter.com/friendships/exists.json", { 
        user_a: userInQuestion, 
        user_b: me 
    }, function(data, i) {
        // Here we'll put the logic to display the result
});

This requests a true/false response to whether the clicked user follows you, now we just need to display this in some fashion. There are 3 states to the added html, "not yet clicked", "clicked and they follow you", "clicked and they don't follow you". Here's what it looks like:

There's nothing elegant going on this this example: we capture a reference to the clicked element and set it's text to a generated message also unbinding all events tied to it. You may want to download the script to get the entire picture, but it's not really rocket science. We'll give it some added css to make it nice and clear and you're off to the races, enjoy your one click inquiry!

Filed Under: Greasemonkey   JavaScript   jQuery