How to Create a GreaseMonkey Script using JQuery and SelectorGadget

Hello Hello,

I am here again, only an hour after I originally posted about this great new tool to give you a tutorial I quickly wrapped up about using the SelectorGadget Bookmarklet Tool and JQuery to create a simple GreaseMonkey userscript.

SelectorGadget Background

SelectorGadget is a great new bookmarklet tool that you can use on any website to select html elements on the page dynamically! The real power of SelectorGadget is that is that it automatically selects similar elements! So as you select what you want and don’t want, it will work towards selecting the exact elements on the page you want, for example the titles of blog posts! (I’ll give a tutorial below)

The Official Description is (lifted from the official homepage)

“SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze. Just drag the bookmarklet to your bookmark bar, then go to any page and press it. A box will open in the bottom right of the website. Click on a page element that you would like your selector to match (it will turn green). SelectorGadget will then generate a minimal CSS selector for that element, and will highlight (yellow) everything that is matched by the selector.”

If you go to the SelectorGadget Homepage you can see a great tutorial video on the basics on using SelectorGadget, I’ll quickly run through the minimal installation process to save you click around until you want to do your additional research

How to Install SelectorGadget

1. Go to the SelectorGadget Homepage
2. Scroll to the bottom of the page and find the  link “Drag this link to your bookmark bar: SelectorGadget“
   note: you can drag the link above into your toolbar, but it is highly recommended you go to the official website to get the latest version.
3. Drag the link “SelectGadget” into your toolbar.
4. You should now see a link that looks like:
5. Your good to go!

Ok, now that you have the bookmarklet installed, lets take a look at a tutorial to get your started.

SelectorGadget + JQuery Tutorial to Create a GreaseMonkey Script

GreaseMonkey is a platform for installing little javascript applications to change the websites you view. GreaseMonkey can all links to download files located on a page, and can even pre-load information or load widget from other sites entirely!

If your curious about GreaseMonkey you can read about what it is here or just install the firefox plugin here

Tutorial Goal

In this tutorial we are going to add google search icons to each post listed on TechCrunch.com

The TechCrunch Improved View GreaseMonkey Tutorial

1. Browse to TechCrunch.com and Click on the SelectorGadget Bookmarklet

   You should see the SelectorGadget widget on your screen like so:

2. Now Click on the title of a news post, and you should see it turn green to indicate it’s been selected.

   You will also see yellow highlights on the screen, these are the elements that SelectorGadget’s engine believes you want to select also:

   

3. We only want the titles for this tutorial so lets hover over one of the highlighten areas and click to remove them.

   You’ll notice that it turns orange to show that it will be taken out of the SelectorGadget selection and the engine should re-adjust its auto-selection to meet your needs:

   

4. Now you should have only the titles selected!

   

5. Now you have a clean CSS Selector you can use.

   The SelectorGadget Widget now gives a very clean CSS Selector you can use in ANY of you applications, ours is:
   .excerpt_header a

   

   In my original post I explained some of the uses I could imagine for SelectorGadget, feel free to check those out now

6. This tutorials goal focused on the Widget itself, so I won’t go into ALOT of depth with the GreaseMonkey widget, but I’ll explain how this selector is used in a userscript

   I promised JQuery for this tutorial, so I am going to use the following simple integration I found here: http://internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/

7. The Template for this Userscript can be found in: jquery-template.js

   The important section (and the only section we really need to change is):

   // All your GM code must be inside this function
   function letsJQuery() {

   // CODE GOES HERE

   }

8. Now lets grab the titles of the page using jquery:

   titles = $(’.excerpt_header a’);

9. Now that we have an array of the titles in JQuery, we can add a link!

   First we pull the text from the title of the news post, and then add a little google icon which links to the google search for that news post:

   $(titles).each(function(i) {
   title_text = $(this).attr(’innerHTML’);
   $(this).after(’<a style=”margin:5px;” target=”_blank” href=”http://google.com/search?q=’+title_text+’”><img src=”http://www.mindzilla.com/grabicon.cgi/google.png?uri=google.com&format=png” alt=”Search on Google.com” /></a>’);
   }

   (you’ll notice I use a webservice to grab google’s icon, I’m lazy and I think for this tutorial its fine, this script is not ment for production use)

10. Now, if you install this user script, you can see that it adds google links to all of the titles at TechCrunch.com!

11. You can install this tutorials userscript by browsing to: webserviceable.com/dev/techcrunch_improved_view.user.js

    You’ll know see little google icons on every post at techcrunch.com!

    

12. Oops! If you were following the tutorial exactly, you’ll have noticed that the script doens’t work on the post view.

    We can fix that in a snap! Simply repeat the steps above but on any of the post pages at TechCrunch.com, and you will be given a css selector for the title on post pages that looks like this:

    

13. Now we add this selector into our script in the exact same way we did before and we have a working script!

Ok, so thats it! Enjoy the tutorial, and leave any comments if you want some clarification. Be sure to checkout the final version of the userscript techcrunch_improved_view.user.js

as a round-up I’ll make a nice list of the technologies mentioned and the links to learn about them.

SelectorGadget

An innovating and intelligent HTML selecting engine for generating dynamic css selectors

• Homepage: http://www.selectorgadget.com
• Basic How to Video: http://www.selectorgadget.com
• Initial Post on Webserviceable.com – Overview, Ideas, Foreseeable Uses

JQuery

Very popular javascript framework

• Homepage: http://jquery.com
• Documentation: http://docs.jquery.com
• Direct Download: http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js&downloadBtn=
• JQuery on Google’s Ajaxlibs – http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery
• GreaseMonkey and JQuery – http://internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/

GreaseMonkey

A very cool javascript plugin engine for your browser that allows you to add functionality/information to any website.

• Homepage: http://diveintogreasemonkey.org/
• Blog: http://www.greasespot.net/
• Wiki: http://wiki.greasespot.net/Main_Page
• Direct Download: https://addons.mozilla.org/en-US/firefox/addon/748
• GreaseMonkey and JQuery: http://internetducttape.com/2008/05/08/greasemonkey-ninja-jquery/

No related posts.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.