Component Highlighter

Chrome extension to highlight any HTML elements matching a configurable data-attribute.

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 marks up components with data attributes — 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 that match your configured data attributes and draws colored outlines around each. 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. Multiple configuration sets can run simultaneously. Each set targets its own data attribute and renders in its own color so that you can highlight components and widgets and test IDs all at once, each visually distinct. Configuration sets Create as many independent sets as you need. Each set has its own data attribute, highlight color, outline style, targeting mode, and enabled state. All active sets render at the same time — elements from different sets appear side by side on the page in their respective colors. Add, rename, reorder, and delete sets from the Options page. Switch between sets in the popup with a tab bar. Three targeting modes (per set) - 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 (per set) - Data attribute name — works with any data attribute your project uses, not just data-component. Each set targets its own attribute independently. - 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. - Outline width — adjust thickness from 1 to 4 px. - Custom CSS — override the default highlight styles using .highlighted-component and .info-layer as targets. Applies globally across all sets. 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 full configuration — all sets and custom CSS — as a JSON file and share it with your team, or import a shared config to keep everyone's settings consistent. Importing a legacy single-set config file is also supported; it migrates automatically. 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, summed across all enabled sets. 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 the browser's local storage. It does not track usage or communicate with any external service.