Component Highlighter

About

Component Highlighter

Instantly see every component on any page — without touching DevTools.

Component Highlighter is a developer tool for front-end engineers, QA teams, and designers who work with component-driven codebases. If your team uses data attributes to mark up components (like data-component, data-testid, or any custom attribute), this extension makes them visible at a glance with a single click.

What it does

When activated, Component Highlighter scans the page for elements matching your configured data attribute and draws a colored outline around each one. An optional info label floats above every highlighted element, showing its component name — so you can immediately identify what you're looking at without inspecting the DOM.

Three targeting modes

- All Components — highlight every element on the page that carries the configured data attribute. Useful for a full inventory of what’s rendered.
- Selected Component — pick a specific component name from a dropdown populated with every unique value found on the page. Instantly isolates a single component type.
- Custom Search — type a partial name to highlight all components whose attribute value contains your search string. Great for finding families of related components (e.g., all components whose names start with "Button").

Fully configurable

All settings persist across tabs and browser sessions:

- Highlight color — choose from five built-in presets or pick any custom color with a hex input and native color picker. The outline, the info label accent dot, and the badge border all update simultaneously.
- Outline style — switch between solid, dashed, and dotted outlines to match your visual preference or avoid confusion with existing page styles.
- Outline width — adjust thickness from 1 to 4 px.
- Data attribute name — works with any data attribute your project uses, not just data-component. Set it once, and it applies everywhere.
- Custom CSS — override the default highlight styles entirely using .highlighted-component and .info-layer as targets. Write your own rules when the built-in options aren't enough.

Live Preview

The Options page includes a live preview card that reflects your current color,
outline style, and width settings in real time — including the info label and accent
dot — so you can tune the appearance before activating it on a real page.

Import / Export

Save your configuration as a JSON file and share it with your team, or import a shared config to keep everyone's settings consistent. No account required, no cloud sync — your settings stay local.

Component counter

The extension badge and popup header display a live count of matched components on the current page. Useful for spotting pages that are missing expected components or for quick audits.

Who is it for?

- Front-end developers verifying that component boundaries match the design spec
- QA engineers checking which components are present on a page before writing selectors
- Designers reviewing implementation fidelity without needing to open DevTools
- Tech leads auditing component coverage across a large application

Privacy

Component Highlighter reads no personal data, makes no network requests, and stores all configuration exclusively in local browser storage. It does not track usage or communicate with any external service.