cesaryuan/selectorgadget: Go go CSS / DOM inspection.

[kunpeng9]

SelectorGadget 1. SelectorGadget

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

是一个开源的书签工具，使得 CSS 选择器在复杂的网站上的生成和发现变得轻而易举。

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

请访问 http://www.selectorgadget.com 来尝试一下。

Technologies 技术

• CoffeeScript 2. CoffeeScript
• jQuery 1. jQuery
• diff-match-patch 差异匹配补丁

Features 功能

Remote interface 远程接口

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

SelectorGadget 可以通过远程接口进行扩展，以用于自定义工作流，该接口可替代标准显示和控件。

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:

要定义一个远程接口，创建一个具有任何所需功能的 JavaScript 文件，并将任何相关控件附加到 SelectorGadget 的 UI 容器中。这里有一个简单的例子:

// 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.sg_div.append(path)
SG.path_output_field = path.get(0)

// Add button to dismiss SelectorGadget
var btnOk = 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 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:

在实例化之前，在 SelectorGadget 的 sg _ options 对象中设置远程接口的路径，如下所示:

window.sg_options = {
  remote_interface: '/path/to/sg_interface.js'
}

window.selector_gadget = new SelectorGadget()
// ...

Local Development 本地发展

Compiling 编译

Start by installing development dependencies with

从安装开发依赖项开始

bundle

and then run

然后逃跑

guard

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

来监视和重新生成 SelectorGadget.coffee 和. scss 文件。

Testing 测试

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)

SelectorGadget 用茉莉花进行测试。在保护运行时，在浏览器中打开 spec/specrunner. html 来运行测试。(在 Mac 上，只需要打开 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.

要在本地开发期间进行手动测试，请打开 spec/test _ sites/bookmarklet _ local. html，并在 spec/test _ sites 的内容上使用该本地书签。

https://github.com/cesaryuan/selectorgadget