CSS Class Highlighter

CSS Class Highlighter helps developers, designers, and QA quickly understand and debug page structure by revealing the CSS behind any element—without opening DevTools. - **What it does** - Turn on Inspect Mode, hover any element, and instantly see its tag, id, classes, and key computed styles with color swatches. - Open the Class List panel to view a searchable inventory of all classes on the page with usage counts. Highlight matching elements on hover, copy selectors, or export the list to JSON. - Customize highlights (outline or overlay), color, thickness, and duration to suit your workflow. - **Why install it** - **Faster debugging**: Identify the right class in seconds and copy a ready-to-use selector. - **Design audits**: See class usage patterns, spot utility class overuse, and export data for reviews. - **QA efficiency**: Highlight all elements with a class to verify styling and state across the page. - **Works everywhere**: Runs on most websites (excludes Chrome internal pages for security). - **Key features** - **Inspect Mode**: Hover to see tag/id/classes, computed styles, color swatches, copy selector, and scroll-to-element. - **Class List panel**: Counts, search, highlight-on-hover, copy `.class`, export JSON. - **Noise reduction**: Optionally hide likely “hashed”/generated classes; tune filter level. - **Per‑site settings**: Positions, auto-open, ignored classes, minimum occurrence threshold; synced via Chrome Sync. - **Quick access**: Toolbar popup, context menu, and keyboard shortcuts. - **Accessible UI**: Keyboard-friendly with ARIA labels and high-contrast styling. - **Keyboard shortcuts** - Toggle Inspect Mode: Ctrl+Shift+I - Toggle last highlight: Ctrl+Shift+H - Open popup: Ctrl+Shift+U - **Privacy and permissions** - No tracking or analytics. Settings are stored locally or in Chrome Sync for your account. - Minimal permissions: `activeTab`, `storage`, and `contextMenus`. Content scripts run on the sites you visit to enable highlighting. - **Who is it for** - Frontend engineers, UX/designers, QA, and anyone inspecting CSS on real pages. Tip: Highlighting is unavailable on Chrome internal pages (e.g., chrome://) and the Chrome Web Store.