前言¶
在 DeepSeek Harness（DSH）里让智能体访问网页时，常见做法是把整页 DOM 或大块 HTML 塞进上下文。页面一复杂，token 消耗快，且 Agent 并不总能从树结构里还原「点哪里、滚多少」。若只靠事后截图，操作延迟高，你也很难在侧边栏里同步看到 Agent 正在做什么。
dsh-visual-browser 走另一条路：Agent 通过编号列表理解当前页面上可见的可交互元素（附带短文本摘要），底层驱动本机真实的 Chrome（或 Edge / Chromium）；右侧边栏在内置「浏览器 / Browser」卡片下方多出一个 Visual Browser 标签，用 CDP 屏幕投射流实时显示画面，并在 Agent 操作时叠加可回放式的动作示意。下面介绍它是什么、能做什么，以及如何安装与使用。
这是什么¶
dsh-visual-browser 是 DSH 社区插件，维护者为 RestRegular，在插件目录中归类为「联网工具」。它不把原始 DOM 交给 Agent，而是用 token 更省的数字编号视图描述可交互元素；同时给你一块可点击、可滚动、可输入的 live 画面，以及页面自身的控制台输出。
核心功能¶
Agent 侧：编号视图而非 DOM¶
Agent 不读 DOM，只读当前可见交互元素的编号列表和少量文本摘录。README 说明单页大约几百 token，而不是整页 DOM 快照。刷新视图、打开 URL 等通过插件暴露的工具完成（例如 browser_open 打开 URL 并返回编号视图，browser_see 获取当前页的 fresh numbered view；完整工具表见仓库 README）。
画面：CDP 屏幕投射，非轮询截图¶
标签页通过 Chrome DevTools Protocol 的 Page.startScreencast 推送长度前缀的 JPEG 流，在主线程外解码到 canvas。没有按帧轮询截图、没有每帧单独请求、也没有每帧重绘整个面板。
用户输入：直连 DevTools Input¶
你的指针、滚轮和键盘在 animation frame 批次里直接进入 DevTools input domain，点击、拖拽、滚动和输入的延迟接近正常浏览器，而不是「先截图再事后操作」的模式。Agent 正在驱动时，面板会用 tinted veil 锁住画面，避免你的手势与 Agent 竞态；操作结束后 veil 自行抬起。
侧边栏 UI¶
Visual Browser 出现在右侧边栏，位于内置 浏览器 / Browser 卡片下方。工具栏提供后退、前进、刷新、新页面、停止和地址栏；下方始终有标签条（即使只有一个页面）：＋ 新建、chip 切换、× 关闭（最后一页保留）。每个页面是真实 Chrome 标签，各自有历史；只有活动页被串流并接收输入。面板隐藏系统指针，在画面上绘制光标，拖拽可选中文本、拖动滑块、拖动真实滚动条。
右键标签可刷新、复制链接、在系统默认浏览器中打开、引用到对话框、关闭、关闭全部等。引用到聊天时，页面以原子 browser chip 插入输入框，文本形式为 [browser-page>p1]，便于 Agent 识别所指标签。
页面控制台¶
底部 page console 显示活动页的 console.* 与未捕获异常；下方输入行按 Enter 可在该页执行脚本（promise 会 await），返回值或错误会打印。高度可拖拽、可折叠、可清空；折叠状态与高度会被记住。
Agent 操作的可视化¶
工具开始动作前，面板通过 NDJSON 流收到提示，再发送真实输入。画面上会显示指针移动、点击水波纹、滚动方向大箭头、拖拽握拳手势、按键 keycap 等；open / back / forward / reload 会显示 veil 与操作标签直到页面就绪。支持 prefers-reduced-motion 缩短动画。
持久化与原生控件¶
Cookie 使用独立 Chrome profile，重启后仍保留，Agent 登录一次可延续会话。文件选择器填入真实路径；date / time / month / week / colour / range 等原生输入写入真实值，避免 OS 对话框在 headless 场景下阻塞。
页面自行打开的标签¶
target="_blank" 或 window.open 打开的新目标会被宿主监听并挂载；若在输入手势期间打开，面板会切换到 Chrome 分配的新标签。同页导航也会跟随。
安装与启用¶
环境要求：本机已安装 Google Chrome、Microsoft Edge 或 Chromium（自动检测），以及 Node.js 22 或更新版本。插件不自带运行时依赖，通过内置 WebSocket 与 CDP 通信。
安装命令（来自官方 README）：
dsh plugin add @restregular/dsh-visual-browser
或在 Harness UI：Plugins → Add → @restregular/dsh-visual-browser。
插件以当前 DSH 进程的权限运行。安装前建议阅读 GitHub 仓库 源码与 LICENSE，确认符合你的安全与合规要求。
典型用法¶
- 打开右侧边栏，点击 Visual Browser 行，或先点 浏览器 卡片再点其下方的额外行；标签会打开并替换该 pane 中的引导内容。
- 向 Agent 提出需要访问网站的任务，例如：打开 example.com 看看首页写了什么。Agent 会调用
browser_open。 - 在画面中直接点击、拖拽、滚轮和输入；需要时用地址栏打开任意 URL，用标签条管理多页。Agent 操作时观察 veil 与绘制出的指针、点击与滚动示意；需要调试时在底部控制台查看页面日志或执行表达式。
将某标签「引用到对话框 / Reference in the chat」后，后续消息可明确指向该 tab id。
适用场景与注意¶
适合需要在 DSH 里做真实网页交互、又希望控制上下文体积、并要在侧边栏同步观察 Agent 与用户操作的开发者。多标签、复制链接、在默认浏览器中打开（经 POST /visual-browser/api/external，由系统 open / xdg-open / rundll32 处理，不 reuse 插件内 Chrome）等能力已在 README 中说明。
再次强调：插件与 DSH 同进程权限；联网与浏览器自动化涉及敏感数据，务必自行审阅源码与许可证后再安装。DSH 生态强调「一切皆插件」；SkillHub 目录页 为社区站点，与 DeepSeek / 幻方无官方从属关系。
结尾¶
dsh-visual-browser 把真实 Chrome、省 token 的编号元素视图、JPEG 屏幕流与用户可接管的输入面绑在同一个右侧标签里，并记录 Agent 操作的可视反馈与页面控制台。当前 package 版本为 0.7.1（见仓库 package.json）。更多细节与完整 Agent 工具列表见 GitHub：RestRegular/dsh-visual-browser，安装与发现插件可参考 SkillHub 目录。
