前言¶

在 DSH Web 配置（dsh web）里右侧栏可以打开 Browser 标签，但官方随 DSH 自带的 @deepseek-ai/dsh-client-ui-sidebar-browser 在 Web 场景下默认关闭：它是沙箱 iframe（桌面端为 Electron <webview>），没有 CDP，没有拾取元素进对话，也没有面向智能体的浏览器工具。不少站点还因 X-Frame-Options / frame-ancestors 无法在 iframe 里正常打开，登录、2FA、验证码也受限。

维护者 Arunat-25 在 SkillHub「联网工具」分类下发布了插件 dsh-browser-sidepanel（GitHub：Arunat-25/dsh-browser-sidepanel）。下面介绍它如何给 Web GUI 右侧栏接上主机上的真实 Chrome，以及安装与使用要点。

这是什么¶

dsh-browser-sidepanel 是一个可安装的 DSH 插件包：Host 端持有 Chrome 与传输，Client 端在侧栏渲染 Browser 标签。页面通过 CDP 驱动本机 Chrome，以 SSE 推送 JPEG 画面；用户输入经 Host 转发到 Chrome。与内置 iframe 浏览器相比，这是「Web UI 自己用的真浏览器」，并支持把点击的 DOM 元素写入 Session 上下文，以及 7 个 browser_* 智能体工具。

当前 npm 包版本为 0.1.0，许可证 MIT，仓库星标在目录页显示为 0（以你查看时点为准）。

与 DSH 自带 Browser 的差异¶

核心功能¶

侧栏 Browser 标签¶

标签与 Workspace files、New terminal 等并列；切换标签、折叠侧栏或切换 Session 时，页面与画布尽量保持挂载。

真实 Chrome，非 iframe¶

每个 Session 按需懒启动一个带临时配置档案的 Chrome；画面以 JPEG 经 SSE 推送，CDP 不暴露给浏览器端。默认 --headless=new；配置里 headless: false 可看到真实窗口。

完整交互¶

指针、滚轮、键盘（可打印字符经 Input.insertText，控制键经 Input.dispatchKeyEvent）、地址栏导航、前进后退刷新、多标签、视口缩放。冷启动时地址栏提交的 URL 会在首帧就绪后导航。

指针与悬停反馈¶

侧栏内移动鼠标会显示指针圆点、当前元素的选择器描边动画，并镜像页面 CSS 光标（pointer、text 等）。

元素拾取与写入上下文¶

开启拾取开关，悬停高亮，点击后采集：唯一 CSS 选择器、tag/id/class、role 与可访问名称、文本、包围盒、选定属性、最多四级祖先、裁剪后的 outerHTML。拾取结果以 chip 展示，可单独删除或清空；发送前 composer 的 @ 可在草稿中插入可见 token（如 @browser #save-btn "Save changes"）。每条拾取会作为 user 角色上下文消息注入当前 Session（source: { kind: 'browser-panel', form: 'notice' }），在下一次 step / 消息时进入模型。

七个 Agent 工具¶

与 UI 共用同一实现，驱动用户所见的页面：

• browser_navigate
• browser_click
• browser_type
• browser_scroll
• browser_screenshot
• browser_tabs
• browser_pick_last

环境与依赖¶

• DeepSeek Harness Web 配置：dsh web，DSH ≥ 0.2.0
• Node ≥ 22（依赖全局 WebSocket / fetch）
• 本机 Chrome / Chromium；默认路径 /usr/bin/google-chrome，可在行配置里用 chromeExecutable 覆盖

安装与启用¶

官方 README 给出的安装方式如下（Web 配置亦可通过 CLI：dsh plugin --profile web add <spec>）：

# from npm
plugin_manager install_bundle dsh-browser-sidepanel

# straight from GitHub
plugin_manager install_bundle github:<owner>/dsh-browser-sidepanel

# from a local checkout (development)
plugin_manager install_bundle <abs path to this directory>

若 spec 需要额外说明，智能体侧的 plugin_manager 工具会返回安装提示。本地 checkout 安装会在 profile 中建符号链接，改代码后重装即可生效，但删除该目录会导致插件失效；npm / GitHub 形式会安装实体拷贝。

安装后 Host 行由 cordis.patch.yml 插入，示例：

- insert:
    - id: browser-panel
      name: 'dsh-browser-sidepanel'
      config:
        chromeExecutable: /usr/bin/google-chrome
        headless: true

常用配置项¶

典型用法流程¶

1. 在 Web profile 安装并启用插件后，打开 dsh web，在右侧栏进入 Browser 标签。
2. 在地址栏输入 URL；若 Chrome 仍在启动，URL 会排队并在首页面创建后导航。
3. 需要把页面结构交给模型时：打开拾取开关 → 悬停确认元素 → 点击采集 → 在 composer 用 @ 编辑可见 token（可选）→ 发送消息；拾取列表在发送前可在面板中管理。
4. 让智能体操作同一浏览器时，使用上述 browser_* 工具（导航、点击、输入、滚动、截图、标签、读取最近一次拾取）。

Host 侧注册同域 HTTP 路由（/browser-panel/stream、/action、/state），由 GUI 的 dsh-auth-* cookie 鉴权；画面为 SSE，text/event-stream 不走 gzip，静态间隔用低 fps JPEG keepalive 保活。

适用场景与注意¶

适合谁：主要在 DSH Web 里做联网调研、需要登录或反 iframe 站点、希望「所见即所控」地让 Agent 操作浏览器，并把 DOM 拾取注入上下文的开发者。

权限与安全：Host 在本机以 dsh 进程权限 启动 Chrome，可访问你配置的 Chrome 与用户能打开的任意站点。安装前建议阅读源码与 MIT 许可证，确认 chromeExecutable 与网络暴露范围符合你的环境策略。插件无 npm 运行时依赖、无构建步骤；Host 仅使用 Node 内置模块。

生态说明：DSH 奉行「一切皆插件」；SkillHub 等社区目录为独立站点，与 DeepSeek / 幻方无官方从属关系，本文描述的是社区维护的 dsh-browser-sidepanel，不是 DSH 内置组件。

链接¶

• 社区目录页：https://www.skillhub.cn/plugins/Arunat-25/dsh-browser-sidepanel
• 源码与完整说明：https://github.com/Arunat-25/dsh-browser-sidepanel

在 Web 配置下若默认 iframe 浏览器无法满足登录、拾取与 Agent 驱动，dsh-browser-sidepanel 提供的是侧栏内 CDP 真 Chrome 的一条路径；按 README 安装 bundle、按需调整 headless 与投屏参数即可开始试用。