Open Inspector

Product Introduction

1. Definition: Open Inspector is a free, open-source (MIT-licensed) browser extension for Chromium browsers (Chrome, Edge, Brave, Arc, Opera, Vivaldi) and Firefox. It is a privacy-first web development and design inspection tool that operates without requesting any host permissions (activeTab only), making zero network requests, and requiring no user account.
2. Core Value Proposition: It exists to provide developers and designers with a powerful, transparent tool for inspecting page layout, CSS styles, color contrast, typography, and assets, while guaranteeing user privacy and data security by design. Its primary value is enabling safe inspection of sensitive pages (staging environments, internal dashboards, logged-in sessions) without the extension having persistent access to read or change site data.

Main Features

1. Privacy-First Architecture: The extension uses only the activeTab and scripting permissions, granted temporarily via user click (Alt+Shift+I or toolbar button) and automatically revoked by the browser upon navigation. It contains no host_permissions in its manifest. A build-time script (scripts/check-zero-egress.mjs) scans all source and bundled code for fetch, XMLHttpRequest, WebSocket, and sendBeacon calls, failing the build if any are found, ensuring zero network egress.
2. Comprehensive Style & Layout Analysis: The Styles panel displays the full computed cascade, including matched rules with overridden declarations struck through. The Layout panel uniquely reveals page construction anatomy, analyzing Grid and Flexbox structures in both directions and inferring the actual spacing scale used on the page, identifying outliers.
3. Advanced Color & Typography Auditing: The Color panel provides live WCAG (AA/AAA) contrast grading for any element, suggests the nearest passing color, and performs a page-wide audit of all failing contrast samples. It clusters the page's palette in the OKLab color space. The Type panel measures the rendered font family on a canvas for accuracy, displays full font metrics (all editable), and detects modular scales with conformance reporting.
4. Design Token & Asset Export: The Export panel extracts a page's design system into multiple practical formats: CSS custom properties, SCSS variables, Tailwind config, JSON, W3C Design Tokens, and Markdown formatted for AI coding assistants (Cursor, Claude). The Assets panel shows actual loaded resources with thumbnails, reveals the selected srcset candidate, and provides URLs for command-line tools like curl, avoiding bulk downloads that would require network requests.
5. Non-Destructive, Session-Isolated Editing: All CSS value edits are recorded with their previous values and !important state. Closing the panel reverts every change precisely and removes the injected style attribute entirely, leaving no trace (style="" is not left behind). This makes it safe for use on production or sensitive pages.

Problems Solved

1. Pain Point: Traditional browser inspector extensions require the "Read and change all your data on all websites" permission, creating a security and privacy risk for developers working on confidential sites, internal tools, or logged-in applications. Users cannot verify what closed-source extensions do with this access.
2. Target Audience: Front-end developers, UI/UX designers, accessibility auditors, and IT security-conscious professionals who need to inspect and debug live websites without compromising the security of proprietary or internal web applications.
3. Use Cases: Safely debugging CSS on a live production admin panel; conducting accessibility (WCAG) contrast audits on a client's staging site; extracting design tokens (colors, spacing, typography) from a competitor's website for a style guide; quickly inspecting responsive breakpoints and layout geometry on a complex internal dashboard.

Unique Advantages

1. Differentiation: Unlike competitors like CSS Peeper or Hoverify, Open Inspector requests no host permissions, is fully open-source (MIT), completely free with no tiered pricing or license checks, and works entirely offline. It uniquely provides layout anatomy analysis and multi-format design token export, features absent in closed-source alternatives.
2. Key Innovation: Its core innovation is coupling a full-featured inspection suite with a verifiable, non-network-active privacy model. The technical approach of using only activeTab, enforcing zero egress via build checks, and implementing fully reversible, session-scoped edits creates a new trust standard for developer tools that operate on arbitrary page content.

Frequently Asked Questions (FAQ)

1. Is Open Inspector safe to use on sensitive websites like admin panels or banking sites? Yes. It is explicitly designed for this scenario. It uses only the temporary activeTab permission, revoked upon navigation, and makes no network requests. Every edit is fully and precisely reverted upon closure, leaving no modified style attributes on the page.
2. How can I verify that Open Inspector doesn't send data anywhere? The project is open-source (MIT) on GitHub. A built-in check script (check-zero-egress.mjs) scans all code for network API calls and fails the build if any are found. You can audit the manifest to confirm no host_permissions are declared, a fact also shown on the Chrome Web Store install page.
3. What are the main limitations compared to Chrome DevTools? Open Inspector does not include a JavaScript console, network request debugger, or performance profiling tools. It focuses purely on visual design inspection (CSS, layout, color, type, assets) and design token extraction. It also cannot read rules from cross-origin stylesheets due to browser security restrictions.
4. Does Open Inspector work for taking screenshots or responsive design testing? No, it does not include screenshot or capture tools. Its responsive preview moves the actual browser window to trigger real media query re-evaluation, but is limited by the OS's minimum window size (~500px on macOS). Tools like Hoverify offer multi-device previews.
5. Can my company's IT or security team approve Open Inspector for enterprise use? It is the most approvable tool in its category for enterprise environments. The lack of host permissions, verifiable open-source code, zero network activity, and non-persistent editing model significantly reduce the risk profile compared to closed-source alternatives requiring broad data access.