前言¶
用 DeepSeek Harness（DSH）改前端或审页面时，常见问题很难用文字说清：间距不对、某个按钮太挤、某段文案要换说法。截图加箭头可以指位置，但 agent 仍要猜 DOM 结构；若页面子路由很多，来回描述更费事。另一类做法是在每个项目里注入标注脚本（例如 Agentation 一类方案），需要加依赖、改 HTML，且不一定覆盖本地 dev 和线上同一套流程。
dsh-webannotate 走另一条路：只在 DSH 桌面版内置浏览器里工作，不改被标注站点的代码。维护者是 FleatherYu，在 DSH 社区目录中归类为「联网工具」。下面介绍它做什么、怎么装、怎么用，以及使用时要注意的限制。
这是什么¶
dsh-webannotate 是 DSH 插件（npm 包名 dsh-webannotate，当前资料中版本为 0.1.1，MIT 许可证）。它在内置浏览器里提供「点元素 → 写一句要怎么改 → 发送全部」的流程；批注作为一条消息进入当前对话，每条批注附带该元素的一张截图。
DSH 桌面版用 Electron 的 <webview> 加载页面，页面与插件 GUI 不在同一 origin，GUI 无法直接读 webview 里的 DOM。插件的 client 半与 <webview> 同处 host 文档，通过 executeJavaScript 注入批注层、轮询批注数据，并用 capturePage 为每条批注截图，因此不需要反向代理、CDP，也不必改目标站点，任意 URL 均可标注。
核心功能¶
- 标注模式：在内置浏览器打开页面后，右下角出现「批注」按钮；进入模式后悬停高亮、点击元素弹出评论框，保存后元素右上角显示编号。
- 列表与管理：数字按钮显示本页批注数量，可打开列表做定位、编辑、删除或清空。
- 批量发送：「发送全部」将本页批注合并为一条对话消息；消息中含页面 URL、条数、每条可见文本与你的说明，并在资料允许时附带
源码：（开发模式 React_debugSource）或组件：链；有id/data-testid/aria-label/name时会附带选择器信息。 - 按页持久化：批注存在
sessionStorage，键为 origin + pathname；同页刷新或切换标签仍保留，不同路径各存各的。 - Host 能力（结构说明来自 README）：
index.js提供 overlay 静态服务、POST /report与/batch、GET /status及webannotate_status工具；web/overlay.js为注入页内的 IIFE + Shadow DOM 批注层。
已知限制（以 README 为准）：无法标注跨域 iframe 内元素；关闭内置浏览器面板后 webview 不在 DOM，批注层暂停；SPA 路由切换后旧编号可能无法定位；每条最多一张截图，单批最多 6 张图，超出不发图；元素已不可见时该条静默跳过截图，文字仍会发送。
安装与启用¶
插件以当前 DSH 进程权限运行，安装前建议在 GitHub 查看源码与 MIT 许可证，确认符合你的环境策略。
从 npm 安装：
dsh plugin --profile desktop add dsh-webannotate
或从 GitHub 安装：
dsh plugin --profile desktop add github:FleatherYu/dsh-webannotate
安装后完整退出并重启一次 DSH（client 半在 host 启动时组装）。随后在右侧栏打开内置浏览器并访问任意页面即可使用。
本地开发插件目录时，可用 link: 挂载（路径替换为你的实际目录）：
dsh plugin --profile desktop add "link:/路径/dsh-webannotate"
典型用法¶
- 在内置浏览器打开要审的页面（本地 dev 或已部署站点均可）。
- 点右下角「批注」，进入标注模式；移到目标元素上点击，在评论框里写修改意图，
Ctrl+Enter或点「保存」。 - 继续标注其他元素；需要时在列表中编辑或删除。
- 点「发送全部」，在当前会话里收到类似下面的合并消息（示例格式来自 README）：
【网页批注】2 处 · 预算
页面：http://localhost:5173/budget
截图：2 张（编号对应）
1. 「保存」 字号大一点
源码：src/pages/Budget.tsx:42
2. 「年 · 月」 排到上面去
组件：BudgetPage > MonthSwitch
agent 可结合截图、可见文本与你的说明定位修改点；你无需在被标注项目中引入任何脚本。
适用场景与注意¶
适合：在 DSH 桌面版内置浏览器里做 UI 走查、把「指哪改哪」的反馈一次性交给对话里的 agent；不想为每个前端仓库加标注依赖的场景。
注意：仅覆盖内置浏览器顶层文档；iframe、面板关闭、SPA 路由与截图条数限制见上文「已知限制」。DSH 生态理念是「一切皆插件」；社区目录站点与 DeepSeek / 幻方无官方从属关系，本文安装命令与行为均以插件仓库 README 为准。
结尾¶
dsh-webannotate 把网页上的问题从长段描述收成「点选 + 短句 + 截图批次」，且不动被标站点代码。目录页：https://www.skillhub.cn/plugins/FleatherYu/dsh-webannotate；源码与详细排障：https://github.com/FleatherYu/dsh-webannotate。
