Element Brief

Click any element to copy an AI-friendly element brief to clipboard

# Element Brief - Chrome Web Store Listing ## Short Description (132 chars max) Click any element to copy an AI-friendly brief with locators, accessibility info, and WCAG contrast ratios. 100% local, no tracking. ## Detailed Description **Element Brief** is a developer productivity tool that lets you click any element on any webpage and instantly copies a structured, AI-friendly summary to your clipboard. ### 🎯 Perfect for: - **Test automation** — Get stable locators (data-testid, CSS selectors, accessibility queries) - **AI-assisted coding** — Paste element context directly into ChatGPT, Claude, or Copilot - **Accessibility audits** — See WCAG AA contrast ratios and accessible names at a glance - **Design QA** — Check computed styles, colors, and font properties instantly ### ✨ Features: - **Smart locator generation** — Prioritizes test IDs, stable IDs, accessibility selectors, then fallback CSS - **Tailwind-aware class filtering** — Won't dump 50 utility classes; keeps only meaningful ones - **WCAG contrast calculation** — Computes real contrast ratio with parent background traversal - **Bounding box & children summary** — Know exactly where elements are and what they contain - **Shadow DOM support** — Works with open shadow roots (notes when elements are inside) - **Clipboard fallback** — Shows modal for manual copy if clipboard is blocked ### 🔒 Privacy First: - **100% local** — No analytics, no tracking, no remote calls - **Minimal permissions** — Only `activeTab` and `scripting` - **No background activity** — Only runs when you click the icon ### 📋 Output Format: ``` Element Brief url: https://example.com timestamp: 2024-12-21T15:00:00Z Locator best: [data-testid="submit-btn"] Element Info tag: button role: button accessible_name: Submit Form meaningful_classes: btn, primary children: text only bounding_box: x=100, y=200, w=120, h=40 Computed Styles contrast_ratio: 4.52 wcag_aa_normal_text: pass ``` ### 🚀 How to Use: 1. Click the Element Brief icon in your toolbar 2. Hover over any element (blue highlight follows) 3. Click to copy the brief 4. Press Esc to cancel --- ## Category Developer Tools ## Language English ## Permission Justifications **activeTab**: Required to inject the picker UI into the current tab when the user clicks the extension icon. No access to other tabs or browsing history. **scripting**: Required to programmatically inject the picker script into the active tab. The script creates the highlight overlay and generates the element brief.