面向 Vibe Coding 的浏览器元素标注插件:直接选取页面元素,并将结构化视觉反馈发送给 DeepSeek Harness Agent。
安装
# GitHub 源码(首次需按提示配置 allowBuilds 构建授权后重试)
dsh plugin --profile web add github:BrambleXu/dsh-annotate
GitHub 来源的插件在安装时会在你的机器上执行构建脚本。请只安装可信来源,并尽量锁定 commit(github:owner/repo#sha)。
README

为 DeepSeek Harness 提供浏览器视觉反馈。/annotate 会让配套的 Chrome 扩展进入选择模式;每个被选中的元素都会为 Agent 的下一轮对话提供选择器、DOM 信息、计算样式高亮、可访问性数据、评论,以及可选的视口截图。
为什么存在 💡
浏览器界面问题很难通过纯文本准确描述。dsh-annotate 让你直接指向相关元素,并将周围的浏览器信息发送给 Agent,使视觉反馈与页面元素保持关联,而不是变成模糊的描述或一张脱离上下文的截图。
功能 ✨
- 通过
/annotate在 Chrome 或 Chromium 中直接选择元素。 - 捕获选择器、DOM 信息、计算样式高亮、可访问性数据、评论和可选的视口截图。
- 通过本地 loopback WebSocket bridge 将结构化批注发送给 Agent。
- 支持按 loopback 主机、扩展来源和可选扩展 ID 限制浏览器连接。
安装 📦
将插件项目添加到 Harness profile:
dsh plugin --profile demo add ./dsh-annotate
然后安装配套扩展:
- 在 Chrome 或 Chromium 中打开
chrome://extensions。 - 启用开发者模式。
- 选择加载已解压的扩展程序,并选中本项目的
browser-extension目录。 - 打开扩展弹窗,并保留默认的 bridge endpoint。
如需更严格的本地授权,可以将弹窗中显示的扩展 ID 复制到后续 Harness patch layer 的 allowedExtensionId 配置中。
使用 🚀
/annotate
/annotate http://localhost:3000
点击元素,输入评论,按需重复操作。点击提交会将所有已捕获的信息和当前可见标签页的截图发送给 Agent。按 Escape 取消。
配置 ⚙️
- id: dsh-annotate
name: dsh-annotate
config:
host: 127.0.0.1
port: 43119
allowedExtensionId: abcdefghijklmnopqrstuvwxyzabcdef
requestTimeoutMs: 300000
maxPayloadBytes: 16777216
includeScreenshot: true
服务器会拒绝非 loopback 主机,以及来源不是 chrome-extension:// 的浏览器连接。allowedExtensionId 为空时,接受任意本地安装的 Chrome 扩展;如需更严格的隔离,请设置准确的扩展 ID。
开发 🧑💻
pnpm install
pnpm run check
修改扩展文件后,请重新加载已解压的浏览器扩展。
范围 🎯
0.1 版本面向一台本地 Chrome/Chromium 浏览器、一个活动标签页和可见视口截图。远程浏览器、整页截图、编辑记录和可拖拽的行内批注卡片暂不支持。
许可证 📄
MIT
致谢 🙏
交互方式受到 pi-annotate 的启发。本实现围绕 Harness 的 human-command、attachment 和 Agent API 构建,并使用小型 loopback WebSocket bridge 代替 native-messaging host。
链接
同类插件
hust-open-atom-club/oh-dsh★ 161
社区发行版:TUI、桌面端与 Web UI 统一体验,分层安装、一步到位。
Jayden-X-L/forkprobe★ 65
同一任务并行试跑多个技能,对比结果选出最优。
vlln/plugin-registry★ 33
插件生态基建:浏览器面板管理官方 repository 插件(0 patch)+ make-dsh-plugin 插件开发引导技能。
forrestchang/dsh-multica-runtime★ 28
让 dsh 运行时跑在 Multica 上。
DietCokewithSugar/dsh-user-experience★ 18
帮你发现项目中可能存在的用户体验问题:自动走查 React/TypeScript 源码,定位问题并给出具体优化建议。
omdsh-dev/dsh-plugin-check★ 17
插件健康检查:扫描清单协议/patch 格式/构建陷阱,零依赖只读。