前言¶

在别人的站点里写嵌入型扩展，常见做法是打开 DevTools，手工复制 DOM、猜选择器、对照 Network 里某次 xhr/fetch 的请求体。下一轮部署改 class 名或接口路径，又要重来一遍。DeepSeek Harness（DSH）可以把这类页面上下文交给模型读文件、写脚本，但若缺少「当前登录态下真实页面长什么样、按钮实际调了哪个 BFF」的可复现快照，智能体仍容易在假设上迭代。

下面介绍社区插件 dsh-site-bridge（维护者 kesha4，分类：客户端）。它由 DSH 插件与 Chrome/Edge MV3 扩展两半组成，把页面 markup、样式线索、网络流量写入工作区文件，并用 CDP 可信输入在当前标签页里验证你刚写的注入脚本。两半单独都不完整：插件侧持有模型可见的 eleven 个 site_* 工具与会话工作区里的快照；扩展侧持有浏览器 profile、cookies 与 CDP 会话保真度。

这是什么¶

dsh-site-bridge 的定位是：在你自己的浏览器里，做 DeepSeek Harness 的「手与眼」——抓页面 markup 与 BFF 流量到文件、可信输入驱动页面、虚拟光标、以及在当前标签页 live 验证扩展代码。许可证 MIT；发布包版本在仓库 package.json 中为 0.11.2（以你安装时拉到的包为准）。

与「把 navigate/click/type 当主产品的 browser 自动化类插件」不同：这里的自动化是验证手段；产品是 capture——带 box 与 computed style 的 DOM、主题 CSS 变量、经 uniqueness 检查的选择器候选，以及带 header/body 的 xhr/fetch，都落盘供 agent 当源码读。典型目标是为某一个具体站点写嵌入扩展，输入类工具用来对照 live 页确认「选择器可用」「带 cookie 的 BFF 能通」，而不是泛化浏览网页。

核心功能¶

资料中明确列出的能力如下。

Markup 与选择器

• 元素树含 box 与可见性；交互节点 computed style；主题 CSS custom properties。
• 选择器候选按稳定性排序：data-testid > id > name > aria-label > class path > positional path，并在 live DOM 上检查唯一性。
• Deep selector：host >>> inner 可穿透 open shadow root 与同源 iframe；点击坐标会按 frame offset 修正。

BFF 流量

• 记录被检查站点范围内的 xhr/fetch：method、status、请求/响应 header 与 body。

可信输入与虚拟光标

• 通过 CDP Input.* / DOM.setFileInputFiles 做点击、输入、select、按键、滚动、上传；事件与真人难以区分。
• 虚拟光标：DOM overlay 移到目标坐标，并发送真实 mouse event，应对忽略 synthetic click() 的控件。

其它

• 后台标签页仍可读、点、输入、截图（Chrome 主要节流 timer/动画）。
• 授权不离开浏览器、不写入磁盘（README Security 节有说明；安装前仍应自行审阅源码与许可证）。

capture bundle 目录结构（site_capture 写入工作区，路径形如 captures/<host>/<timestamp>/）：

site_capture → captures/<host>/<timestamp>/
  dom.html          serialized markup of the captured scope
  dom.json          element tree: boxes, attributes, selector candidates
  styles.json       computed styles of key nodes + CSS custom properties
  selectors.md      shortlist of stable selectors, with why each is stable
  network.jsonl     every captured xhr/fetch, one JSON object per line
  api.md            endpoints grouped by method+path, with request/response contracts
  screenshot.png    optional full-page render

暴露给模型的工具（README Usage 节）：

site_status                     → bridge state, pairing path, tabs
site_tabs {action:"list"}       → tabs; claim/use/release/open/close/focus
site_network {action:"start"}   → begin recording, then act on the page
site_capture {screenshot:true}  → write the bundle into the workspace
site_snapshot {limit:40}        → interactive elements with stable selectors
site_text {selector:"#cart"}    → visible text, capped, for verification
site_act {steps:"[...]"}        → click/fill/type/press/scroll/upload/wait/back/eval
site_pick {action:"wait"}       → the human clicks an element and adds a note
site_cursor {x,y,click:true}    → virtual cursor, real mouse event
site_shot {fullPage:true}       → screenshot to captures/shots/*.png
site_inject {js:"..."}          → run your script in the page to verify it

Popup 与工具是同一控制面：人在 popup 里 attach tab、录网、点选元素；agent 可通过 site_tabs {action:"claim"} 等完成同样操作。bridge token 决定谁可以驱动浏览器；popup 里的 pause 会从浏览器侧切断链路，仅该按钮可恢复。

环境与依赖¶

• 已安装 DeepSeek Harness 的 dsh CLI 与 profile（Desktop 或 Web）。
• Chrome 或 Edge 125+（扩展使用 chrome.debugger 与 MV3 service worker）。
• Node.js 22+（仓库 tools/ 与测试；与 host 插件运行环境以你本机 DSH 为准）。

安装与启用¶

插件以当前 DSH 进程权限运行；安装前请阅读仓库源码与 MIT 许可证，并理解扩展会 attach CDP（Chrome 会显示 “started debugging this browser” 横幅）。

1. Host 半（DSH 插件）¶

官方 README 给出的发布包安装命令：

dsh plugin --profile desktop add dsh-site-bridge

若从本地 checkout 安装，可在仓库根目录执行（Windows）：

powershell -NoProfile -ExecutionPolicy Bypass -File scripts\install.ps1

脚本会把插件链入 profile、写入 dsh.profile.bundles，并把扩展 stage 到 %USERPROFILE%\.dsh\site-bridge\extension。手动等价方式：

dsh plugin --profile desktop add <path-to-this-repo>

若 CLI 未自动写入，需在 %USERPROFILE%\.dsh\profiles\desktop\package.json 的 dsh.profile.bundles 中加入 "dsh-site-bridge"，然后重启 DSH。

2. Browser 半（MV3 扩展）¶

1. 打开 chrome://extensions，开启 Developer mode，Load unpacked，选择 %USERPROFILE%\.dsh\site-bridge\extension。
2. 打开扩展 popup，查看端口与 bridge.json 路径（与 site_status 输出一致）。
3. 点击 Import bridge.json（俄文/中文界面文案见 _locales），选择该文件，或粘贴 token（会自动保存）。
4. 打开要操作的页面，点击 Connect this tab。

断开时按 Disconnect；CDP 横幅会消失。

典型用法¶

为某一页面写嵌入扩展时，README 给出的循环如下：

1. site_tabs → 绑定页面 tab。
2. site_capture → 在工作区阅读 selectors.md、styles.json、api.md 等。
3. 在你自己的仓库里写 userscript / content script。
4. site_inject 注入脚本体 → 确认锚点找到、带浏览器 cookie 的 BFF 调用通过。
5. 根据 capture 里标记为 fragile 的选择器继续迭代。

录 BFF 时：先 site_network {action:"start"}，再在页面上操作，最后 site_capture 把 network 写入 bundle。

适用场景与注意¶

适合谁

• 需要在已登录、真实 cookie 的 Chrome/Edge 标签里，把 DOM + 接口契约沉淀成文件，再让 DSH agent 写站点专用嵌入脚本，并在同一 tab live 验证的人。

不适合当作什么

• 通用「agent 上网浏览」插件；导航与点击在这里服务于 capture 与验证，而非产品目标。

安全与权限

• 插件 host 半随 DSH profile 加载；扩展半能调试你 attach 的标签页。bridge token 是访问控制关键；popup pause 可立即拒绝一切远端命令。
• 社区目录页与 GitHub 由维护者发布；与 DeepSeek / 幻方无官方从属关系，安装来源以你信任的 registry 或自审源码为准。

结尾¶

dsh-site-bridge 把「考古式」DevTools 工作变成可版本化的 capture bundle，并用可信输入与 site_inject 把「应该能用」收成「在这个 tab、这份 cookie 下确实能用」。若要查看简介与分类，可打开 SkillHub 目录页；实现细节、架构图与 Security 说明见 GitHub 仓库。

• 目录页：https://www.skillhub.cn/plugins/kesha4/dsh-site-bridge
• GitHub：https://github.com/kesha4/dsh-site-bridge