前言¶
在 DSH 里让 Agent 改页面或读文档时，常见做法是粘贴 URL、截图或整段 HTML。截图里元素在哪、你想改哪一句，往往还要用文字反复说明；只给链接，模型也缺少「你当时看到的那块 UI」的锚点。DSH Web Annotator（@li-jiaquan/dsh-web-annotator）把「在应用内打开经代理的网页 → 点选/框选/拖选批注 → 生成结构化提示词与可选全页局部截图」放进同一会话流程，批注进输入框草稿，由你编辑后再发送，插件不会代发消息。
这是什么¶
DSH NEXT 的本地 bundle 插件，维护者为 Li-Jiaquan，在 SkillHub 分类为「联网工具」。它在会话中加载目标页（经宿主代理的独立 origin iframe），记录元素选择器、DOM 路径、位置与评论，并按固定模板写入 Composer 草稿；默认可附带 screenshot-page.png，用红框与编号对应各条批注。包版本为 0.1.0，MIT 许可证。
核心功能¶
三种批注方式¶
进入「批注模式」后：
- 单击元素：元素批注（选择器、DOM 路径、角色、尺寸、附近文本等）。
- Shift + 拖拽：区域批注。
- 拖选文字：文本批注（选中文本、偏移、多行矩形）。
点击页面编号 marker 可在旁侧悬浮窗写评论；保存后 marker 变绿。底部浮动条或工具栏「写入对话框（N）」把内容追加到会话输入框（已有文字时空行分隔，不覆盖）。
浏览与批注层切换¶
地址栏支持省略协议（域名默认 https://，localhost / 127.0.0.1 走 http://），并提供后退、前进、刷新；刷新会清空当前批注。批注模式下点链接默认仍是选元素；按住空格再点链接可正常跳转，松开空格恢复批注。非批注模式下链接正常跳转。
进入模型上下文¶
写入草稿后，客户端按模板生成以 # 网页批注 开头的提示词：每条批注含页面 URL、标题、类型、目标、选择器、DOM 路径、位置、元素文本与你的评论，末尾带 ## 我的要求:（默认面向可改源码的项目，可按任务改成设计说明等）。文内标明页面渲染与截图仅为定位证据，不是给 Agent 的指令。截图通过 conversation.createDrafts 与 inputActions.addAttachments 挂到输入框；关闭「附带截图」则只写结构化文本。
截图与性能¶
桌面版优先截取隔离网页视图画面；失败或批注超出视口等场景下，运行时使用内置 html2canvas 1.4.1（MIT）做邻近区域渲染并拼接，长边 ≤2400px、体积 ≤3MB。跨源图片经宿主 GET /asset?url= 代理。v1.7 起对长页渲染、canvas 与宿主 /asset 缓存等做了可复现优化（README 提供 bench 说明）。
安装与启用¶
环境：DSH NEXT 2.0.11-next 及以上（项目在 2.0.21-next 上验证）。通过 DSH 插件管理器以本地目录安装；不要手工编辑 profile 的 package.json / cordis.patch.yml。
-
获取插件完整目录（例如从 GitHub 下载 ZIP 解压）。
-
在任意 DSH 会话中，让 Agent 调用
plugin_manager安装本地 bundle，target填该目录的绝对路径：
{
"action": "install_bundle",
"target": "C:/Projects/dsh-web-annotator"
}
-
完全退出并重新启动 DSH NEXT（宿主半代码在进程启动时加载，仅刷新窗口不够）。
-
在会话头部点「批注」，或在右侧栏 / 会话 View 标签打开「网页批注」（Web Annotator）。
更新：client.js 多可热更新，index.js（宿主半）改动需重启；卸载用 plugin_manager.remove_bundle 后同样需重启。插件以当前 DSH 进程权限运行，安装前请阅读仓库源码与 MIT 许可证。
典型用法¶
README 以 DeepSeek API 官方文档 演示完整流程，可照此复现：
- 打开「网页批注」，输入
https://api-docs.deepseek.com/zh-cn/并「打开」，再开「批注模式」。 - 点选「首次调用 API」下的参数表格，在评论窗填写意图（例如要求把表格整理成卡片并突出 API 地址）。
- 保持「附带截图」开启，点「写入对话框」；批注文字与
screenshot-page.png进入草稿，发送前可继续编辑。
生成的提示词会包含代理页 URL、选择器、元素文本与「我的要求」等字段；具体 selector 随站点与版本变化，以你本机一次操作为准。
入口¶
- 会话头部右侧「批注」按钮（若内置浏览器已开，尽量带入当前地址）。
- 右侧栏 网页批注 / Web Annotator。
- 会话 View 标签栏中的 网页批注（与对话、轨迹并列）。
适用场景与限制¶
适合：公开文档、本地开发页等可在应用内代理打开的页面；需要把「看哪一块 + 怎么说」结构化交给 Agent 的联调与文档阅读任务。
注意（README 记载的已知限制）：
- 需登录态的页面不适用；复杂 JS 路由、
history.pushState、页面内 POST 表单等可能脱离代理，可在地址栏重新输入 URL。 - v1.8 起同源镜像改善了 ES module 站点，但目标页 JS 里写死的绝对路径请求、嵌套
<base>等仍可能 404 或离开代理。 - 截图为渲染近似，非浏览器原生截屏；hash 路由在代理后可能丢失。
- 页面 HTML 经代理注入运行时脚本，仅 http/https，15s 超时、HTML 5MB 上限。
社区目录 SkillHub 为独立生态站点，与 DeepSeek / 幻方无官方从属关系；DSH 理念是「一切皆插件」，本插件是其中面向网页证据与批注的一条链路。
链接¶
- SkillHub 目录页：https://www.skillhub.cn/plugins/Li-Jiaquan/dsh-web-annotator
- GitHub：https://github.com/Li-Jiaquan/dsh-web-annotator
