A simple way to inspect and copy element styles
StyleSnipe Extension
StyleSnipe makes it easy to inspect and understand the styles of any webpage element. It provides a quick and clear view of an element's layout and style details.
Features:
• Hover to see grid lines showing element position.
• View margin, padding, font size, weight, line height, family, and Actual Rendered font.
• Press spacebar to lock the hover card for detailed inspection.
• See both HTML and CSS styles of the element.
• Copy styles easily for your own use.
StyleSnipe is lightweight and focused on what matters: giving you instant visual feedback about any element's styles and position. No complex configuration needed – just hover and inspect.
Read more
Features:
• Hover to see grid lines showing element position.
• View margin, padding, font size, weight, line height, family, and Actual Rendered font.
• Press spacebar to lock the hover card for detailed inspection.
• See both HTML and CSS styles of the element.
• Copy styles easily for your own use.
StyleSnipe is lightweight and focused on what matters: giving you instant visual feedback about any element's styles and position. No complex configuration needed – just hover and inspect.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "StyleSnipe", "version": "1.0.3", "description": "A simple way to inspect and copy element styles", "action": {}, "permissions": ["activeTab", "scripting"], "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": [""], "js": ["content.js"] } ], "web_accessible_resources": [ { "resources": ["tailwind.css"], "matches": [""] } ], "icons": { "16": "icon16.png", "32": "icon32.png", "48": "icon48.png", "128": "icon128.png" }}
Read more