CSS Selector Capture Pro Chrome Extension

Generate a copiable css selector with a mouseover without devtool.
Generate a copiable CSS Selector with a mouseover without Devtool!

Clean, simple and intuitive to use, accompanied with these exclusive features.

✓ copiable and tweak-able selector ready to use in CSS/JavaScript

✓ Highlights of elements which match the Selector

✓ Total matches based on the Selector within Viewport context

✓ The choice of Concise or Verbose selector

✓ Minimal interference with the page

≡ How to Use

* User Guide: https://github.com/CharltonC/chrome-css-selector-capture/blob/master/README.md

* Enable the App, Use "CTRL" Key to lock／unlock the selector highlight in position and click the Copy button to copy the selector.

* If needed, click on the selector path to tweak the selector before copying.

* Use "ESC" key to exit the App

≡ Where would this extension be useful

* The extension would typically suit the use of front end development, End to End testing such as Selenium as well as Data Scraping where visually identifying a target, matches and getting the CSS selector are needed.

* lite version also available: https://chrome.google.com/webstore/detail/css-selector-capture-lite/cfjcaifmdcgnnbbnhgmgikdbonflhmaa

≡ Privacy

* The extension does NOT collect any data or send data to third party.

≡ Release

* 2.3.1 (2021.09.01)

- Fixed algorithm in v2.3.0

* 2.3.0 (2021.07.15)

- Optimization for concise selector

* 2.2.0 (2019.03.23)

- Added a user guide link in extension icon popup

* 2.1.0 (2019.03.21)

- Added a shortcut hotkey (CTRL) for locking toggle of the overlays

* 2.0.0 (2019.02.25)

- Optimization for concise selector (i.e. shorter)

- Adjustment of selector background opacity when trigger button for Settings Dialog is on top and user hovers it

* 1.0.3 (2018.10.15)

- Optimization for selector retrieval

* 1.0.0 (2018.09.29)

- Initial Release

How to install CSS Selector Capture Pro chrome extension in chrome Browser

You can Follow the below Step By Step procedure to install the CSS Selector Capture Pro Chrome Extension to your Chrome Web browser.

• Step 1: Go to the Chrome webstore https://chrome.google.com/webstore or download the extension CSS Selector Capture Pro Chrome Extension Download from https://pluginsaddonsextensions.com
• Step 2: Now search for the CSS Selector Capture Pro in Chrome Webstore Search and click on the search button.
• Step 3: click on the CSS Selector Capture Pro Chrome Extension Link
• Step 4: in the next page click on the Add to Chrome button to Download and Install the CSS Selector Capture Pro extension for your Chrome Web browser .