Generate CSS Selectors from the Chrome Devtools Elements Panel
CSS Selector Finder for Chrome Devtools Extension
Easy to use Devtools sidebar that aids in finding unique CSS selectors.
- Unique CSS selectors are continuously generated as the selection is changed in the Devtools Elements panel
- Highly configurable. Settings can easily be changed interactively and results can be seen immediately.
- Enable/Disable usage of IDs, Class names, and Tag names for selector generation
- Filter out specific values of IDs, Class names, and Tag names
- Use custom attribute names and attribute name/value pairs
- Various settings to control robustness and optimization of selectors
Read more
- Unique CSS selectors are continuously generated as the selection is changed in the Devtools Elements panel
- Highly configurable. Settings can easily be changed interactively and results can be seen immediately.
- Enable/Disable usage of IDs, Class names, and Tag names for selector generation
- Filter out specific values of IDs, Class names, and Tag names
- Use custom attribute names and attribute name/value pairs
- Various settings to control robustness and optimization of selectors
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "short_name": "CSS Selector Finder for Chrome Devtools", "name": "CSS Selector Finder for Chrome Devtools", "version": "0.1", "description": "Generate CSS Selectors from the Chrome Devtools Elements Panel", "manifest_version": 2, "devtools_page": "devtools.html", "background": { "scripts": ["/static/js/background/background.js"], "persistent": false }, "icons": { "16": "abba16.png", "48": "abba48.png", "128": "abba128.png" }, "content_scripts": [ { "matches": [""], "js": ["/static/js/content_script.js"], "run_at": "document_idle", "all_frames": true } ]}
Read more