ABBAdata CSS Selector Finder

ABBAdata CSS Selector Finder is a Chrome Extension used to easily find a unique CSS Selector for any element on a web page.

Demo:

Installation

Download and install the extension from the Chrome App Store:
ABBAdata CSS Selector Finder in the Chrome Web Store

Quickstart

Simply navigate to the target web page and click on the CSS Selector Finder icon on the browser toolbar. The CSS Selector Finder control panel will open on top of the current page, and normal navigation behavior will be suspended.
Click "Normal Start" on the small popup window.
Page elements can then be selected and a unique CSS selector for the element will be generated and displayed.
This extension is meant to be more user-friendly and customizable than using the built-in Chrome developer "Copy Selector" feature. There are other Chrome extensions for generating CSS selectors, but CSS Selector Finder focuses on making the process interactive and customizable, and generally more usable.

Customizing Selector Generation

CSS Selectors are generated using Anton Medvedev's CSS Selector Generator. For specifics of the selector finder algorithm, please consult that project. Normally, selectors are generated using element IDs, class names and tag names. Specifics of Selector generation can be customized by enabling/disabling the use of IDs, class names, and/or tag names. Specific ID values, class name values, and/or tag names values can also be filtered out. Custom attributes can also be used when finding selectors. "Seed Min Length", "Optimized Min Length", "Threshhold", and "Max Number of Tries" are also tunable settings that control the selector finding algorithm.

Usage

To use the ABBAdata Selector Finder, follow these steps:

Screenshots

Screen 1:




Screen 2:




Screen 3 (Test Selector feature):




Screen 4:



Limitations

  • Does not work with IFRAMEs. IFRAMEs will still be highlighted when mouse hovers over it, but it can not be clicked on.
  • May not work properly with some websites where event handling/CSS styles conflict with the tool's behavior.
  • Development

    Github: https://github.com/abbadata/css_selector_finder

    ABBAdata CSS Selector Finder was developed in React / Redux. It was developed as I was learning React development. It uses the nice CSS Selector Generation library by Anton Medvedev.

    What's Next?

    Donations

    If you find this tool useful, donations are appreciated!