展示HN：Element to LLM – 将运行时DOM转换为LLM所需JSON的扩展工具
我们开发了一款浏览器扩展（适用于Chrome和Firefox），可以捕获运行时的DOM并将其导出为JSON格式。
这不是预渲染的源代码（HTML/CSS/JS、模板、打包文件），也不是截图——而是浏览器实际显示的实时渲染状态：
- 可见性/隐藏、禁用/必填
- 当前输入值和验证/验证消息
- 数据集属性
- 修剪后的文本
- 稳定的选择器路径
**为什么：** 大型语言模型（LLMs）通常会遗漏或猜测用户界面的状态。截图过于模糊，预渲染的源代码噪声太大。结构化的快照为调试表单和流程提供了可重复的上下文。
**安全性：**
- 在浏览器中以只读内容脚本的形式本地运行。
- 无遥测，无外部请求。
- 不会修改页面；它仅读取DOM。
- 数据只有在您自己复制时才会离开浏览器。
- 对源级的提示注入免疫——它从不执行或重写页面代码，仅序列化可见状态。
**使用案例：**
- 调试客户端表单：捕获真实的渲染状态，而不仅仅是HTML。
- 可重复的错误报告：与其分享模糊的截图，不如分享确切状态的JSON快照。
- 测试自动化：在操作前后快照以比较行为。
- 提示工程：直接提供结构化的用户界面状态，而不是原始标记或截图。
**链接：**
• Chrome 网上应用店: [https://chromewebstore.google.com/detail/element-to-llm/oofdfeinchhgnhlikkfdfcldbpcjcgnj?utm_source=item-share-cb](https://chromewebstore.google.com/detail/element-to-llm/oofdfeinchhgnhlikkfdfcldbpcjcgnj?utm_source=item-share-cb)
• Firefox 附加组件: [https://addons.mozilla.org/en-US/firefox/addon/element-to-llm/](https://addons.mozilla.org/en-US/firefox/addon/element-to-llm/)
想知道大家对这种方法的看法。
查看原文
We built a browser extension (Chrome + Firefox) that captures the <i>runtime</i> DOM and exports it as JSON.<p>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<p>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.<p>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.<p>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.<p>Links:
• Chrome Web Store: <a href="https://chromewebstore.google.com/detail/element-to-llm/oofdfeinchhgnhlikkfdfcldbpcjcgnj?utm_source=item-share-cb" rel="nofollow">https://chromewebstore.google.com/detail/element-to-llm/oofd...</a>
• Firefox Add-ons: <a href="https://addons.mozilla.org/en-US/firefox/addon/element-to-llm/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/element-to-ll...</a><p>Curious what people here think about this approach.