English
See more
Generate a copiable CSS Selector with a mouseover without Devtool
Latest Version
Version
2.4.1
Update
July 29, 2024
Size
116KiB
Developer
Category
Users
10,000+ 
Rating
5 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
Storage
ClipboardWrite
See more
ClipboardWrite
CSS Selector Capture Pro Extension
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
* Short version:
- 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
* Detailed User Guide: https://github.com/CharltonC/chrome-css-selector-capture/blob/master/README.md
* Beware the extension does not support the following contexts:
- shadow DOM (suggestion: use chrome devtool since you will be traversing down the shadow root anyway)
- iframe (suggestion: to open the iframe URL in new tab and use the extension)
≡ 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.
* If you do find this extension useful, please support it by simply giving it a good review and that will help others find it.
≡ Privacy
* The extension does NOT collect any data or send data to third party.
≡ Release
* 2.4.1 (2024.07.29)
- Adjusted text alignment
* 2.4.0 (2024.06.06)
- Optimization for highlights, scroll and resize
* 2.3.2 (2023.08.24)
- Upgraded to manifest v3
* 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
Read more
✓ 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
* Short version:
- 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
* Detailed User Guide: https://github.com/CharltonC/chrome-css-selector-capture/blob/master/README.md
* Beware the extension does not support the following contexts:
- shadow DOM (suggestion: use chrome devtool since you will be traversing down the shadow root anyway)
- iframe (suggestion: to open the iframe URL in new tab and use the extension)
≡ 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.
* If you do find this extension useful, please support it by simply giving it a good review and that will help others find it.
≡ Privacy
* The extension does NOT collect any data or send data to third party.
≡ Release
* 2.4.1 (2024.07.29)
- Adjusted text alignment
* 2.4.0 (2024.06.06)
- Optimization for highlights, scroll and resize
* 2.3.2 (2023.08.24)
- Upgraded to manifest v3
* 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
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "CSS Selector Capture Pro", "version": "2.4.1", "minimum_chrome_version": "88", "description": "Generate a copiable CSS Selector with a mouseover without Devtool", "author": "Charlton Cheng", "offline_enabled": true, "permissions": [ "storage", "clipboardWrite" ], "host_permissions": [ "" ], "icons": { "16": "common/icon_16.png", "32": "common/icon_32.png", "48": "common/icon_48.png", "128": "common/icon_128.png" }, "content_scripts": [ { "all_frames": false, "run_at": "document_end", "matches": [ "*://*/*" ], "js": [ "common/app.min.js", "content-script/main.min.js" ] } ], "action": { "default_icon": { "16": "common/icon_16.png", "24": "common/icon_24.png", "32": "common/icon_32.png" }, "default_title": "CSS Selector Capture Pro", "default_popup": "popup/index.html" }, "web_accessible_resources": [ { "resources": [ "common/app.min.css", "common/shl-app-icomoon.woff" ], "matches": [ "" ] } ]}
Read more
