面向 Vibe Coding 的浏览器元素标注插件:直接选取页面元素,并将结构化视觉反馈发送给 DeepSeek Harness Agent。
安装
# GitHub 源码(首次需按提示配置 allowBuilds 构建授权后重试)
dsh plugin --profile web add github:BrambleXu/dsh-annotate
装任何插件都等于在你的机器上跑第三方代码,权限和你本人一样大——能读你的文件、用你的凭据、访问网络,工具审批管不到它。GitHub 来源的插件还会在安装时执行构建脚本——pnpm 默认拦截,所以安装可能停在 ERR_PNPM_GIT_DEP_PREPARE_NOT_ALLOWED 或 ERR_PNPM_IGNORED_BUILDS;dsh 会打印出需要添加的确切键名,把它加进该 profile 的 pnpm-workspace.yaml 的 allowBuilds 下,重跑一次即可装上。放行构建本身就是一次信任判断:请只安装可信来源,并尽量锁定 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。
链接
同类插件
Tencent/BrowserSkill#dsh-plugin-browserskill★ 7561
BrowserSkill 的 DeepSeek Harness 浏览器自动化桥接插件,通过原生浏览器工具控制可见的 Chrome 和 Edge Agent Window,支持可访问性与 VOM 页面观察、截图、隔离的多会话控制和 Web UI 实时观察浮层。
omdsh-dev/dsh-browser#packages/browser/bridge-browser★ 734
Chrome 侧边栏扩展,让 DSH 直接操控你的浏览器,无需视觉能力。
liustack/modsearch★ 559
纯文本 agent 的联网搜索桥:搜索网页与 X,返回结构化 JSON 证据(search/fetch/引用)。
DDDMUC/dsh-free-search★ 265
DSH 免费搜索插件:7 个引擎(DuckDuckGo/Bing/SearXNG 免费 + Exa/Perplexity/DeepSeek 付费)、自动回退、设置页 UI(API key 输入 + 官网链接)、web_fetch、引擎测试工具。
Tabbit-Browser/dsh-tabbit★ 101
让 DeepSeek Harness 能够控制 Tabbit 浏览器:安装即自动加载 tabbit-browser skill,检测国际版 Tabbit 与国内版 Tabbit Browser 正式版(>= 1.9.0),检查 tabbit-cli 常驻运行时,按平台诊断调用 CLI 所需的 DSH sandbox 模式,并在没有合格版本时通过后台任务下载与系统地区匹配的正式版安装包。
wqty123/dsh-browser★ 83
共享真实浏览器:用户可观看并随时接管的原生 Electron 窗口,agent 通过 CDP 驱动,内置 20 个 browser_* 工具(打开/快照/执行/填表/截图/下载/登录态);任务级会话隔离、登录态持久化、人机验证识别,纯 `dsh web` 无需桌面外壳即可自托管。
社区评论
评论公开保存在 GitHub Discussions。加载评论会连接 GitHub 和 Giscus;发表内容需要 GitHub 账号。