CSS Class HighlighterCSS ClassHighlighter

I once spent twenty minutes in DevTools hunting for the class that was overriding a style in a client’s codebase. Twenty minutes for a thirty-second fix. In DevTools, the class list is buried among everything else. A class name is only part of the story, though. You also need to see where it appears, which styles reach the element, and what changed between two states. Version 4 brings those checks together on the page itself.

Hard partA full CSS workbench that can open on any page, keep a live index of every class, and still leave that page responsive.

1. 01

   An inspector with context

   Box model, computed styles, readable matching rules, attributes and basic accessibility details, together.

2. 02

   Live class discovery

   Search and sort every class, filter generated names, and jump from a class to its elements.

3. 03

   Highlights you can keep

   Preview a class or pin several, styled for every site or just one.

4. 04

   CSS changes, side by side

   Save a computed-CSS baseline, compare a later state, and copy the diff as JSON.

5. 05

   Design tokens in context

   Resolved custom properties, inherited values and colour previews, ready to copy.

6. 06

   Made for daily use

   Material Design 3 Expressive, Google Sans, light and dark themes, shortcuts and per-site settings.

1. 01LoaderA small script on permitted pages
2. 02Service workerLazy activation, serialised storage
3. 03EngineTraversal, a live class index, CSS inspection
4. 04WorkbenchReact, inside its own Shadow DOM

• Bounded by design

  Regex search accepts up to 200 characters with one repetition, the index stops at 100,000 elements, and rule inspection scans at most 6,000 rules for up to 200 matches, so a heavy page stays responsive.

• Highlights that keep up

  Pinned highlights follow scrolling and layout changes, skip matches that are off screen, and respect a visible limit you set.

• Preferences that never collide

  A site override stores only the fields you changed, so later global changes still apply. Writes are serialised and briefly batched to avoid conflicts and excess Chrome Sync calls.

• A careful upgrade

  Version 3 site settings migrate to the version 4 schema, and an old record is removed only after its replacement has been saved.

1. 01

   Load the workbench only when it’s asked for

   A lightweight loader is all that runs on the pages you browse, so everyday browsing pays almost nothing for the extension.

   Trade-offThe first open on a page waits a moment for the workbench to load.

2. 02

   Give the workbench its own Shadow DOM

   Whatever site it opens on, page styles can’t restyle its controls. Version 3 had tried a shadow root and dropped it; version 4 is built around one from the start.

3. 03

   Hard limits instead of scanning everything

   A huge page or a costly pattern should never freeze the page being inspected.

   Trade-offMatching rules are a source view. Chrome DevTools is still the place for full cascade order, pseudo-elements and complex nested selectors.

• A DevTools panel

  The first version was one. It worked, but needed DevTools open, which defeated the point.

• A shadow root for the panel

  In version 3 it kept the page’s CSS out, but also blocked events that click-to-copy needed, so a normal element with tightly scoped class names won. Version 4 went back to one, built for it from the start.

• If the panel receives its own hover events, it flickers in a loop. Pointer events have to be intercepted selectively.
• Shadow DOM and iframes are hard boundaries, and SVGs don’t always have a usable classList.

1. Mar to May 2025

   First version

   Inspect Mode, the class list, and copying a selector.

2. Aug 2025

   3.2.8

   Settings for each site, with options to hide hashed class names.

3. 12 Oct 2026

   4.1.0 goes to review

   A rebuilt developer workbench is submitted to the Chrome Web Store.

4. 13 Oct 2026

   4.1.0 is live

   CSS comparison, design tokens, a live class inventory and exports, with Material Design 3 Expressive and Google Sans.

TypeScriptReactViteManifest V3Shadow DOMChrome Sync

Your dataPage inspection runs in your browser, and nothing is sent to CodeHorizon. Preferences, and the sites you customise, are kept in Chrome Sync. No accounts, ads, analytics or remote code.