在 DeepSeek Harness (DSH) 的使用场景中,调试智能体驱动的浏览器行为或远程监控 headless 进程是常见需求。直接在 Web 界面嵌入外部浏览器通常涉及权限与渲染复杂性。dsh-sidebar-cdp-browser 作为一个 DSH 侧边栏插件,通过 CDP 实时展示外部 Chromium,并提供受控的交互能力。
该插件由 chendefine 开发,核心作用是在 DSH Web GUI 的侧边栏中渲染外部 Chromium 的 JPEG 像素流,并将键盘和鼠标操作通过严格白名单协议回传给主机进程。
功能特性¶
CDP 实时视图¶
插件在侧边栏注册了一个名为 dsh-sidebar-cdp-browser:live 的标签页。它使用 Page.startScreencast 获取外部 Chromium 的 JPEG 帧并绘制到 Canvas 上,支持按设备像素比缩放和 contain-fit 渲染。
目标管理¶
顶部工具栏列出当前所有页面目标。你可以切换页面、创建新页面或关闭页面。目标列表通过 Target.getTargets 快照每秒刷新一次。
交互控制¶
插件支持鼠标点击、拖拽、滚轮以及键盘输入(IME)。为了安全,所有交互指令通过严格的白名单协议发送,不支持任意的 CDP 穿透。交互模式需要同时开启“交互输入”主开关和“键盘鼠标控制”复选框。
安全性¶
交互控制采用了两级门控(交互输入主开关 + 头部复选框)和 30 秒 TTL 票据系统。外部浏览器端只持有 CDP 连接,无法知道 CDP 地址,也无法执行任意 CDP 命令。
设置面板¶
在 DSH Web 设置页面的“侧边栏内容 -> CDP实时视图”卡片中,可以配置 CDP 地址、交互输入开关,以及帧捕获参数(质量、间隔、分辨率)。
安装¶
该插件依赖 dsh-better-sidebar >= 0.17.1 才能显示侧边栏标签页。
dsh plugin --profile web add dsh-better-sidebar dsh-sidebar-cdp-browser
安装后需要重启 dsh web 以加载插件。
使用流程¶
1. 启动外部 Chromium¶
在主机上启动一个带有调试端口的 Chromium 实例。
chromium --remote-debugging-address=127.0.0.1 --remote-debugging-port=9222
2. 配置 CDP 地址¶
打开 DSH Web GUI 的设置页面,进入“侧边栏内容 -> CDP实时视图”卡片,点击齿轮图标。在「CDP 地址」栏填写地址(默认为 127.0.0.1:9222)。保存后,插件会自动连接。
3. 开始交互¶
在侧边栏的 CDP 实时视图标签页中,先点击画布以获取焦点。确保在设置中开启了“交互输入”主开关,并在视图顶部的复选框中勾选“键盘鼠标控制”。此时即可使用鼠标点击、滚轮或键盘输入。
注意事项¶
- 依赖要求:必须安装
dsh-better-sidebar>= 0.17.1,否则侧边栏标签页不会出现。 - 安全性:交互模式必须同时开启设置中的“交互输入”主开关和顶部的“键盘鼠标控制”复选框。
- 功能限制:目前不支持复制粘贴(Ctrl+C),IME 输入仅在组合完成后提交。
- 持久化:CDP 地址保存在
dsh-better-sidebar的首选项文档中。