Element Brief
AndreCamm
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
