DeepSeek Harness 右侧栏浏览器插件：Loopback 代理与元素拾取

前言¶

DeepSeek Harness（DSH）通过插件系统扩展功能。智能体开发中常需检查网页 DOM 结构或调试特定页面。该插件在 DSH 右侧栏提供一个浏览器，通过 loopback 代理运行，并支持元素拾取，以便将上下文注入对话。

插件简介¶

• 名称：gnatnaituy/dsh-sidebar-browser
• 维护者：Gnatnaituy
• 定位：在 DSH 右侧栏运行的浏览器，支持多标签、设备预览、账号记忆及元素拾取。
• 核心价值：利用同源代理解决跨域限制，将页面 DOM 引用（[标签][DOMn]）插入输入框，供模型通过 read_picked_element 工具读取。

安装与启用¶

插件安装为 DSH 的一个 bundle。使用官方脚本进行幂等安装。

node tools/install-into-profile.mjs

卸载或重装时使用：

node tools/uninstall-from-profile.mjs

核心功能¶

插件在 DSH 右侧栏注册了名为「浏览器 · 拾取」的原生页签。主要功能包括：

• 浏览与标签管理：支持多标签页，页面状态（地址、标题）由 host 持有，切换标签不重载页面。标签状态（地址、缩放、视口）会保存到 localStorage，重启后自动还原。
• 调试辅助：
  • 缩放与视口：支持 25%–300% 缩放。提供手机/平板设备预览（如 iPhone 15 Pro、iPad Pro），支持横竖屏切换及手动输入分辨率（宽×高）。
  • 地址容错：支持不带协议的地址（如 localhost:3000/admin）。
• 认证与会话：
  • 记住账号密码：支持保存并自动填充表单。密码在元素记录中被显式抹除。
  • 端口记忆：每个目标源记住上次使用的端口，避免因重启导致的登录态失效。
• 元素拾取：
  • 不注入 DOM：高亮框绘制在外壳页面，被测页面 DOM 保持纯净。
  • 引用插入：点击「拾取」或按 ` 键，高亮元素并插入引用（如 [提交订单][DOM1]）。
  • 工具调用：模型需要元素详情时调用 read_picked_element 工具。

典型用法¶

1. 打开面板：点击输入框工具栏的十字图标，右侧栏打开「浏览器 · 拾取」页签。
2. 导航与标签：在地址栏输入地址回车换页；按 + 新建标签，× 或中键关闭，点击标签切换。
3. 调整视图：使用 − / + 缩放，或通过设备下拉菜单切换手机/平板视口。点击尺寸读数可直接输入宽×高。
4. 拾取元素：点击工具栏「拾取」或按 `，划过元素出现高亮，点击后插入引用。模型随后可读取元素内容。

注意事项与限制¶

• 信任边界：同源既是拾取的前提，也是信任边界。被测页面理论上能访问外壳页面，可能伪造拾取结果。请仅浏览信任的页面。
• 安全策略：代理会摘除被测页面的 CSP 与 X-Frame-Options，页面的安全策略在侧栏里不生效。
• 数据存储：保存的账号密码以明文形式存储在 DSH GUI 的 localStorage 中（无系统钥匙串），仅按目标源对应。
• 代理机制：代理仅绑定 127.0.0.1，必须在本地运行。/dsh-sidebar-browser/invoke 走 webServer 路由，不在 GUI 登录围栏内。
• 设备预览：仅为视口预览，devicePixelRatio、User-Agent 等仍为桌面浏览器行为。
• 重启行为：DSH 重启后页面会重新加载，重启前未提交的表单内容不保留。

适用场景¶

适合智能体开发者调试 Web 应用、检查页面布局、测试响应式设计或需要将页面元素作为上下文传递给模型进行操作的场景。

链接¶

• GitHub：https://github.com/Gnatnaituy/dsh-sidebar-browser
• 目录页：https://www.skillhub.cn/plugins/Gnatnaituy/dsh-sidebar-browser