CSS Class Highlighter

Name: CSS Class Highlighter
Author: CodeHorizon

Inspect and highlight CSS classes. Hover to inspect, list classes, and highlight elements.

As of June 2026, CSS Class Highlighter has 14 users in the Developer Tools category.

CodeHorizon Developer Tools

Chrome Web Store ↗.crx

Users−6.7%

Rating0%

—

— reviews

Reviews0%

—

Version

3.2.8

Manifest V3

History

7 snapshots

Tracking since Apr 1, 2026.

View as table

Date	Users	Rating	Reviews	Version
Apr 1, 2026	15	—	—	3.2.8
Apr 19, 2026	12	—	—	3.2.8
May 9, 2026	14	—	—	3.2.8
May 14, 2026	16	—	—	3.2.8
May 20, 2026	15	—	—	3.2.8
Jun 3, 2026	12	—	—	3.2.8
Jun 9, 2026	13	—	—	3.2.8
Now	14	—	—	3.2.8

Permissions & access

Permissions: activeTabstoragecontextMenus
Host access: <all_urls>

Screenshots

About

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.