Not the pre-render source (HTML/CSS/JS, templates, bundles) and not a screenshot — but the live, post-render state the browser is actually displaying: - visibility/hidden, disabled/required - current input values and validation/validationMessage - dataset attributes - trimmed text - stable selector paths

Why: LLMs often miss or guess UI state. Screenshots are too opaque, pre-render source is too noisy. A structured snapshot gives reproducible context for debugging forms and flows.

Security: - Runs locally in the browser as a read-only content script. - No telemetry, no external requests. - No page mutation; it only reads the DOM. - Data leaves the browser only if you copy it yourself. - Immune to prompt injection at source level — it never executes or rewrites page code, only serializes visible state.

Use cases: - Debugging client-side forms: capture the real rendered state, not just HTML. - Reproducible bug reports: instead of vague screenshots, share a JSON snapshot of the exact state. - Test automation: snapshot before/after an action to compare behavior. - Prompt engineering: feed structured UI state directly, instead of raw markup or screenshots.

Links: • Chrome Web Store: https://chromewebstore.google.com/detail/element-to-llm/oofd... • Firefox Add-ons: https://addons.mozilla.org/en-US/firefox/addon/element-to-ll...

Curious what people here think about this approach.