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 • Keyboard shortcuts - toggle highlighting with Ctrl+Shift+H (Cmd+Shift+H on Mac) • 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 with a click or keyboard shortcut • 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. Press Ctrl+Shift+H (or Cmd+Shift+H) to toggle highlighting on/off 3. Hover over elements to see purple highlights and tooltips 4. Optionally enable ⌘/Alt+Click to copy attribute values 5. Attribute values are instantly copied to your clipboard with a confirmation notification The extension enhances your workflow without interfering with normal page interactions.