Data Attribute Highlighter

Highlight and display data attributes on hover

A powerful Chrome extension for developers and QA testers that highlights HTML elements with data attributes on hover. ✨ KEY FEATURES: • Smart hover detection - automatically highlights elements with your specified data attribute • Beautiful tooltips - displays attribute names and values in an elegant gradient design • Configurable attributes - works with data-testid, data-cy, data-qa, or any custom data attribute • Copy on demand - hold ⌘ (Mac) or Alt (Windows/Linux) and click to copy attribute values to clipboard • DOM tree search - intelligently searches parent elements to find data attributes • Zero interference - regular clicks work normally, only modified clicks trigger copy • Toggle on/off - easily enable or disable the highlighter • Modern UI - sleek popup with gradient design and smooth animations 🎯 PERFECT FOR: • Testing with Cypress, Playwright, or Jest • QA automation and test development • Frontend development and debugging • Inspecting data attributes on any webpage • Quick access to test IDs without opening DevTools 🚀 HOW IT WORKS: 1. Click the extension icon and configure your data attribute (default: data-testid) 2. Hover over elements to see purple highlights and tooltips 3. Optionally enable ⌘/Alt+Click to copy attribute values 4. Attribute values are instantly copied to your clipboard with a confirmation notification The extension enhances your workflow without interfering with normal page interactions.