Open Inspector: CSS Inspector, Font Finder & Color Picker

Description

Inspect any element's CSS, fonts, colors and spacing, and export design tokens. Free, open source, and asks for no site access. Open Inspector shows you how any web page is built. Hover an element to see the CSS that styles it, the font that actually rendered, its colours and contrast, and the spacing around it, then take the page's design system with you. It does all of this without asking for permission to read your browsing. Most extensions in this category request "read and change all your data on all websites". That covers your staging environments, your internal dashboards, and anything you are logged into. This one requests no site access at all. Chrome's install screen will tell you the same thing. WHAT IT DOES • Styles — box model, spacing, and the CSS rules that matched, with overridden declarations struck through • Color — element colours, WCAG AA/AAA contrast grading with a suggested passing colour, a screen eyedropper, a page-wide contrast audit, and a palette clustered so near-identical greys collapse into one entry • Type — the font that actually rendered, measured rather than read off the stack, with full metrics and modular scale detection • Layout — how the element lays out its children, the spacing scale the page really follows, and the breakpoints affecting it • Assets — the images on the page, including which responsive size the browser actually chose, and the fonts it loaded • Markup — the element as HTML or JSX, with framework attributes and inline styles stripped • Export — the page's colours, type and spacing as code you can paste into your own project, such as a Tailwind config, or as a short brief for a coding assistant You can also edit values live and revert them exactly, force :hover and :focus states so their styles can be read at all, hide elements, filter the whole panel, and resize the window to real breakpoints. Arrow keys walk the DOM tree, the panel can be resized and docked to either side, and closing with edits pending asks before it puts the page back. WHY IT ASKS FOR NOTHING The manifest requests activeTab and scripting, and declares no host permissions. activeTab is granted by your click, for one tab, and revoked when you navigate. It makes no network requests of any kind: nothing is tracked, there is no account, and nothing phones home. That is enforced by a script that fails the build if any network call appears, not by a promise in a description. It is free, and it will stay free. A paid tier would need a licence check, a licence check is a network request, and that would break the only promise this extension makes. HONEST LIMITS Cross-origin stylesheets cannot be read by any extension — the restriction follows the stylesheet, not the reader — and the panel says so rather than reporting "no rules matched". Canvas and closed shadow roots have nothing to inspect. There are no screenshots, no console or network debugging, and no bulk asset download: zipping every asset would mean fetching every asset. MIT licensed. The whole thing is readable.

Details & SEO