dsh-visual-annotator：让 DeepSeek Harness 看懂你眼前的网页元素

它是做什么的？

它是 DeepSeek Harness（DSH）的浏览器元素标注插件，让你在真实的 Chrome / Edge 页面上拾取、标注、评论并截图元素，再把元素定位信息连同评论和截图一并交给 agent。它解决的是「agent 看不到你眼前页面」的麻烦：你只需在页面上点选目标元素并写下修改意见，agent 就能对照你实际看到的页面做前端可视化修改。插件由 ZhongqiXiao 维护，采用 MIT 协议，以 JavaScript 编写，最近更新于 2026-11-05。

核心功能

• 元素拾取层：hover 高亮、点击拾取，拾取层以 Shadow DOM 注入页面，不污染页面原有样式。
• 元素级捕获：为每个元素生成唯一 CSS selector，并记录页面 URL、视口坐标与尺寸、文本摘录和元素截图。
• 评论标注与引用芯片：每个拾取元素可附评论，向 DSH GUI 输入框插入「标注 #pN」引用芯片，提交时自动展开为包含 selector、URL、坐标、评论与截图路径的完整定位块，chip 管线不可用时回退为纯文本插入。
• 浏览器接管：以专用 profile 启动 Chrome/Edge，同 profile 已有实例则直接接管而不重复开窗，面板内可实时切换同一窗口的多个标签页。
• 截图管线：元素截图保存在本地，并作为真实图片附件插入输入框。
• Agent 侧读取工具：向 agent 注册读取工具，可按标注 id 精确取回单个标注，或一次返回当前全部标注详情。

怎么使用这个插件？

在 DSH Desktop 中启用后，打开 GUI 右侧边栏的「元素标注」面板，输入地址并点击在 Chrome 中调试，插件会打开真实 Chrome 窗口或接管已有实例。开启拾取模式后 hover 高亮元素、点击完成拾取，为该元素填写评论并插入引用，输入框里就会出现引用芯片和元素截图附件。正常提交对话即可，agent 收到「标注 #pN」引用后会调用读取工具获取完整定位上下文，再对照页面修改前端代码。运行需要 Node.js 22 及以上、DSH Desktop 的 web 客户端平台，以及本机装有 Chrome 或 Edge。

报错怎么排查？

启用后右侧边栏没有出现「元素标注」面板，说明插件未生效，按官方说明确认已加入 profile 的启用列表后重启 DSH Desktop。若引用芯片没有出现，通常是 chip 管线不可用，插件会自动回退为纯文本插入，此时仍可正常提交标注信息。