dsh-annotate

by BrambleXu

5 开发与运行时github 检测到 manifest package.json#dsh 社区精选 收录于 08-14

面向 Vibe Coding 的浏览器元素标注插件:直接选取页面元素,并将结构化视觉反馈发送给 DeepSeek Harness Agent。

Select browser elements directly during Vibe Coding and send structured visual feedback to the DeepSeek Harness Agent.

安装

dsh plugin --profile web add github:BrambleXu/dsh-annotate

GitHub 源码安装:首次需按提示配置 allowBuilds 构建授权后重试

安装与环境配置指引、插件开发教程见 DSH 中文社区文档 ↗

安装即在你的机器上以你的权限运行第三方代码——它可读写文件、使用凭据、访问网络,DSH 的工具审批不会为插件代码加沙箱。「检测到 manifest」仅代表发现 dsh.bundle / dsh.plugin 清单,不构成兼容性或安全审查;安装前请审阅源码,不熟悉的插件先在不含密钥的环境试用。

README

目录

dsh-annotate hero

为 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

然后安装配套扩展:

  1. 在 Chrome 或 Chromium 中打开 chrome://extensions。
  2. 启用开发者模式。
  3. 选择加载已解压的扩展程序,并选中本项目的 browser-extension 目录。
  4. 打开扩展弹窗,并保留默认的 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。

原始 README: https://github.com/BrambleXu/dsh-annotate/blob/main/README.zh.md ↗