Data Attribute Highlighter

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.