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.

I caught a jquery tweet today that linked me to an interesting little helper bookmarklet called “SelectorGadget”.

“SelectorGadget is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze.”

SelectorGadget, is a very easy to use bookmarklet that can be used on any website of your choosing (Although someone in the comments DID have a problem with scraping a site that is NTFW )

To get started with SelectorGadget, head over to their humble website, and install the bookmarklet and watch the video. Anyone with experience in Data Extraction (Hpricot or Beautiful Soup – as the website suggests), will immedately see the benefits of this little application.

With apparent support from JQuery, and its open-source repository over at github, I think SelectorGadget will be able to spawn alot of interest within the various Javascript and DOM Selection/Extraction camp’s around the internet.

Some ideas for you guys to dig your teeth into after the fold.

My Forseeable Uses for SelectorGadget and its Algorythms:

1. Speed up creation of GreaseMonkey userscripts(.org) for those of us who rely on JQuery for our javascript prowess.
2. Make DOM Selection in your own Javascript Applications (jquery included), MUCH MUCH easier
3. Dynamic JQuery plugins for data extraction – Make more versitile plugins to manage dynamic datasets.
   • For Example:
     • Creation a plugin that adds dom to specific element types of a page (mp3 player to mp3 links)
     • Generalize the selection of the mp3 links
     • Drop in mp3 player plugin to any page w/out any need to initilize
4. Creation of your own Dapper Engine????????
   • For instance if you could (hypothetically) get jaxer running this javascript selection engine. Then maybe… you could be running a serverside DOM Selector engine with native ajax-scraping abilities…Hrrmm…
5. Quick Ruby Data Extraction & Screen Scraping
   • Hpricot, or better yet scrubyt, OR even better still skimr (the re-factored scrubyt for those of you who have been paying attention)
6. SelectorGadget to phpQuery ? – phpQuery is a dom selector engine for php designed to be a port of JQuery to php. Its pretty good but a little slow for my liking.

The Death of PHP in Data Extraction

Yes, I am calling it. This is not breaking news as Ruby’s scrubyt (and its driving forces WWW:Mechanize and Hpricot), have been dominating the “custom api creation” process for awhile now. Still, php is so common and easy to get up and running its hard for me drop it all together.

Software like SelectorGadget gives me even more reason to move away from php and work on my Ruby development more. As an interim solution (in the interest of time) I imagine myself using Ruby for my data and php for my presentation.

OR, if I can finally get a solid native jaxer server running I could simply use my javascript skills to properly deploy my data extraction javascript applications. (If your a jaxer master, please message me, I’ve tried numerous times with limited success)

Until I am a ruby master (which might take time as I’m learning far too many languages atm), I am going to see what I can hack out of the SelectorGadget engine. Its algorithms might unlock a very cool selector engine for php (aka an improved or refactored phpQuery )

Anyway, I think SelectorGadget has ALOT of promise and I see this accomplishment echoing through a lot of different technologies and software. I know I am going to dig into it and see what I can do. I’ll be sure to report all of my findings to you good people.

Happy api’ing.

No related posts.