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

Please visit http://www.selectorgadget.com to try it out.

• CoffeeScript
• jQuery
• diff-match-patch

SelectorGadget can be extended for use in custom workflows with a remote interface that replaces the standard display and controls.

To define a remote interface, create a JavaScript file with any functionality you need, and append any relevant controls to SelectorGadget's UI container. Here's a simple example:

// sg_interface.jsvarSG=window.selector_gadget// Add field to display current selection (note the use of jQuerySG, // SelectorGadget's jQuery alias).varpath=jQuerySG('<input>',{id: 'sg-status',class: 'selectorgadget_ignore'})SG.sg_div.append(path)SG.path_output_field=path.get(0)// Add button to dismiss SelectorGadgetvarbtnOk=jQuerySG('<button>',{id: 'sg-ok',class: 'selectorgadget_ignore'}).text('OK')SG.sg_div.append(btnOk)jQuerySG(btnOk).bind('click',function(event){jQuerySG(SG).unbind()jQuerySG(SG.sg_div).unbind()SG.unbindAndRemoveInterface()SG=null})// Watch the input field for changesvarval=saved=path.val()vartid=setInterval(function(){val=path.val()if(saved!=val){console.log('New path',val,'matching',(jQuerySG(val).length),'element(s)')saved=val}},50)

Set the path to the remote interface in SelectorGadget's sg_options object prior to instantiation, like this:

window.sg_options={remote_interface: '/path/to/sg_interface.js'}window.selector_gadget=newSelectorGadget()// ...

Start by installing development dependencies with

bundle 

and then run

guard 

to watch and regenerate SelectorGadget's .coffee and .scss files.

SelectorGadget is tested with jasmine. With guard running, open spec/SpecRunner.html in your browser to run the tests. (On a Mac, just do open spec/SpecRunner.html)

To manually test during local development, open spec/test_sites/bookmarklet_local.html and use that local bookmarklet on the contents of spec/test_sites.