Element Brief

About

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