We built a browser extension (Chrome + Firefox) that captures the runtime DOM and exports it as JSON.
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.
We use this daily in our own debugging. Not a screenshot, not source — it’s the runtime state the browser is actually rendering. Domain experts’ feedback would be valuable.
was looking for something like that for last few weeks, nice that someone finally thought about it
That was exactly the gap we felt in our own workflow. Curious what use case you were hoping to solve when you looked for it?
Niice! It is pretty helpful!