How selectorgadget works?

Question

How selectorgadget.com works? Is there any link/page that explain the algorithm behind selectorgadget?

thanks

Answer 1

You could examine the source for yourself to get a detailed answer. All the "drag this link to your bookmark bar" does is set up a javascript bookmark, which creates a script element in the page that has it's source set to http://www.selectorgadget.com/stable/lib/selectorgadget.js?raw=true

If you look at that script, you'll see it then imports others to do the work. The short version is that it appears to use tokenizing and recursive analysis of DOM elements to figure out CSS selector paths. The bulk of the work is done here: http://www.selectorgadget.com/stable/lib/dom.js.

Answer 2

The tokenization is mostly done so that the CSS selectors for the set of elements clicked can be diffed together to find commonalities. Then the algorithm tries to find the 'best' selector that contains everything in the selected set and nothing in the rejected set.

It goes something like:

1. For every selected dom node, generate a long, inclusive css selector that is as specific as possible.
2. Diff all of the selected dom node's selectors together to find a common css selector that will select all of them.
3. Iteratively reduce that common selector while ensuring that it selects everything in the 'selected' set and nothing in the 'rejected' set. This happens in 'simplifyCss' and is a heuristic approach that greedily removes elements with a pre-defined preference order.

Answer 3

Anyone knows if this is a implementation of an existing algorithm? Thanks.