[SelectorGadget](http://www.selectorgadget.com) is an open source bookmarklet that makes CSS selector generation and discovery on complicated sites a breeze.
Last updated 4 years ago by eng1neer .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @eng1neer/selectorgadget 
SYNC missed versions from official npm registry.


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.



Remote interface

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.js

var SG = window.selector_gadget

// Add field to display current selection (note the use of jQuerySG, 
// SelectorGadget's jQuery alias).
var path = jQuerySG('<input>', { id: 'sg-status', class: 'selectorgadget_ignore' })
SG.path_output_field = path.get(0)

// Add button to dismiss SelectorGadget
var btnOk = jQuerySG('<button>', { id: 'sg-ok', class: 'selectorgadget_ignore' }).text('OK')
jQuerySG(btnOk).bind('click', function(event) {
  SG = null

// Watch the input field for changes
var val = saved = path.val()
var tid = 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 = new SelectorGadget()
// ...

Local Development


Start by installing development dependencies with


and then run


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


SelectorGadget is tested with http://pivotal.github.com/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.

Bitdeli Badge

Current Tags

  • 1.1.2                                ...           latest (4 years ago)

1 Versions

  • 1.1.2                                ...           4 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (3)
Dev Dependencies (15)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |