前言¶
在 DSH 中使用内置浏览器时，如果想让模型直接修改页面上的某个元素，传统做法是截图、口头描述，或者复制 DOM 树片段，但这些都容易出错。DSH 网页批注插件接管了出厂的 browser 标签，在页面中点选元素就能写评论，整批一次性发送给当前会话，让模型在项目源码里找到对应位置并修改。
插件信息¶
- 名称：uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
- 维护者：uugvkbvkdjbsdbvwxxl
- 分类：联网工具
- 标星：1
- 许可：MIT
- 简介：在 DSH 内置浏览器里打开网页，点选页面元素写评论，再一次性把「页面地址 + 元素定位 + 批注」发给当前会话。
核心功能¶
- 批注模式：点击工具栏的批注按钮进入批注模式，鼠标划过元素出现蓝色高亮，点击即选中。
- 胶囊评论框：选中后评论框浮现在元素旁边，左侧六点手柄可拖动，右侧圆形按钮确认。
- 连续批注：一条加完直接点下一个元素，无需再点工具栏按钮，不会中途发送。
- 悬浮功能栏：网页视口底部一条深色胶囊，控制暂停/继续、标记显隐、明细查看、清空、发送与退出。
- 明细抽屉：在功能栏旁打开抽屉，逐条查看 / 编辑 / 删除，默认与功能栏居中对齐，拖动后跟随其左缘并夹在视口内。
- 发送整批：唯一的整批发送入口，未保存的输入会先加入本次批次，只提交一次。
- 会话卡片：发送后在会话里出现可折叠的批注卡片，展开后能看到每一条的定位信息（选择器、可见文本、DOM 路径、标签名、HTML 片段）。
- 窄视口适配：≤520px 下状态文案缩短为「批注 · 2」，320px 不横向溢出。
入口说明¶
插件以 extension 优先级接管了出厂的 browser 标签类型，没有单独的入口：
- 右侧栏引导页里的 浏览器 卡片（
Ctrl + T）打开的就是带批注的浏览器。 - 聊天里的链接选「在内置浏览器打开」，以及
sidebarRight.openTab('browser')打开的标签，都落到同一个实现。 - 卡片图标是「地球 + 评论气泡」。
- 移除本插件后，出厂浏览器原样恢复。
典型用法¶
- 在 DSH 右侧栏点
+→ 浏览器（或按Ctrl + T）。 - 在地址栏输入页面地址。不带协议时，本机/内网默认
http，其余默认https。 - 点击工具栏的批注按钮（气泡+笔图标）进入批注模式：鼠标划过元素出现蓝色高亮，点击即选中。
- 评论框浮现在元素旁边，是一个胶囊形输入条：左侧六点拖动手柄 + 中部输入框 + 右侧圆形确认按钮。
按住手柄可以拖到任意位置；换一个元素重新点选时，评论框回到新元素旁边。 - 写完点 ✓（或
Ctrl/Cmd + Enter）：只添加这一条，并立刻回到拾取状态。 - 连续批注：一条加完直接点下一个元素，不用再点工具栏按钮，也不会中途发出去。
- 攒够之后，点悬浮功能栏的蓝色「发送」一次性发整批。
悬浮功能栏控制¶
功能栏宽度随内容收紧，按钮与行为如下：
| 按钮 | 行为 |
|---|---|
| 拖动柄 | 移动整条功能栏，始终夹在视口内；Home 恢复默认位置。拖动不会触发页面拾取。 |
| 状态文案 | 显示已收集条数；暂停时为「批注已暂停 · 2」。 |
| 暂停/继续 | 暂停后可以正常操作网页，已收集批注保留；继续恢复悬停与点选。 |
| 标记显隐 | 只切换网页上的编号与批注边框，条目和发送都不受影响；导航与重新注入后仍保持该状态。 |
| 明细 | 在功能栏旁打开抽屉，逐条查看 / 编辑 / 删除。默认与功能栏居中对齐；拖动功能栏后跟随其左缘并夹在视口内；拖到视口上半部时抽屉翻到下方。 |
| 清空 | 清掉全部已收集批注与未保存输入。 |
| 发送 | 唯一的整批发送入口。未保存的输入会先加入本次批次，只提交一次。 |
| × | 退出模式并隐藏功能栏，保留已收集批注与未保存输入。 |
编辑一条批注时就地展开输入框，只有一个蓝色「保存」按钮，取消用 Esc。Esc 按由内到外逐层退出：行内编辑 → 明细抽屉 → 退出批注模式。焦点在输入框里时 Esc 交给输入框自己处理，不会丢正在写的字。
发送后效果¶
发送后会在会话里出现一张可折叠的批注卡片：
┌ 网页批注 3 条 ─────────────────┐
│ 1 把主按钮文案改成「开始试用」 │
│ 2 这里的圆角再小一点 │
│ 3 表格列宽不对 │
└──────────────────────────────────┘
模型收到的是完整文本，卡片只是它的折叠视图。展开后能看到每一条的定位信息。卡片由消息文本本身解析出来，没有旁表：重开历史时会从同一段文字重新解析，不会出现「卡片和内容对不上」。发送成功后只移除本次提交的那几条，之后新收集的批注保留并重新编号。发送期间会暂停拾取，避免新条目混进正在提交的批次。
安装与启用¶
插件通过 dsh.bundle 清单安装：
dsh plugin add github:uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
或从本地目录安装：
dsh plugin add /path/to/dsh-plugin-web-annotate
安装后刷新桌面窗口（Ctrl + R）加载客户端包。
能力边界¶
以下是有意为之，不是遗漏：
- 不读取跨源 iframe 内部。浏览器安全模型不允许，页内脚本只在顶层文档与同源 frame 上工作。
- 不写会话输入框。批注以一次消息提交的形式进入会话，而不是塞进 composer 当草稿。宿主没有提供向 composer 写入草稿的服务，插件不绕过这个边界。
- 不修改被访问的页面。页内只有一个 Shadow DOM 覆盖层用于高亮与编号，样式通过 CSSOM 注入（严格的
style-srcCSP 下<style>会被拒绝）。 - 不持久化批注列表。刷新页面后已收集的批注不保留；发送后的卡片仍在会话历史里。
文件结构¶
| 文件 | 作用 |
|---|---|
package.json |
bundle 清单：dsh.bundle.patch + dsh.client（platform: web） |
cordis.patch.yml |
插入 Host 行；所有行为在 Client 半 |
index.js |
Host 半，空实现（本功能不需要 Host 工具） |
client.js |
浏览器类型接管、webview guest、页内拾取脚本、功能栏、发送 |
locale/en.json / locale/zh.json |
插件元数据与全部界面文案 |
icon.svg |
图标（地球 + 评论气泡） |
适用场景与注意¶
适合需要在 DSH 内置浏览器中直接定位页面元素并让模型修改的开发者与智能体开发者。插件以当前 dsh 进程权限运行，安装前应检查源码与许可证。
总结¶
DSH 网页批注插件把「可视化批注 → 一次发送 → 改代码」的流程落在了 DSH 自己的右侧栏里。你只需要在页面上点一下，写一句话，整批一次性发给会话，让模型直接在项目源码里找到对应位置并修改。安装命令如下：
dsh plugin add github:uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
- 插件目录页：https://www.skillhub.cn/plugins/uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
- GitHub 仓库：https://github.com/uugvkbvkdjbsdbvwxxl/dsh-plugin-web-annotate
