ogulcancelik/herdr-browser
GitHub: ogulcancelik/herdr-browser
一款 Herdr 终端插件,将真实 Chromium 视图嵌入终端窗格并通过 CDP 暴露给自动化客户端,实现可视化、可实时人工接管的浏览器自动化。
Stars: 201 | Forks: 9
# Herdr Browser
Herdr Browser 会在 Herdr 窗格中渲染真实的 Chromium 视图,并将其暴露给 Chrome DevTools Protocol 客户端。Agent 可以驱动浏览器,你可以在窗格中观看它,并且随时可以通过鼠标和键盘接管控制,而不会断开自动化客户端的连接。
浏览器自动化通常是不可见的。Agent 在后台无头运行,你只能在事后通过截图来还原发生了什么,或者你需要时刻盯着一个与你当前会话毫无关联的独立 Chrome 窗口。Herdr Browser 将自动化的浏览器直接放入你正在使用的布局中,实时显示,并使其可以直接交互。
## 这不是什么
这不是一个通用型浏览器。桌面浏览器在 devtools、扩展、视频、下载、右键菜单和 IME 方面更具优势,此插件并不试图在这些方面与之竞争。请使用它来观察和引导自动化操作,以及在不离开终端的情况下预览本地开发服务器。
## 系统要求
- Herdr 0.7.4 或更新版本
- Linux 或 macOS
- Bun
- Google Chrome 或 Chromium
- 兼容 Kitty 图形显示的终端,例如 Ghostty、kitty 或 WezTerm
在你的 Herdr 配置中启用实验性的图形支持:
```
[experimental]
kitty_graphics = true
```
重启 Herdr 或运行以下命令以应用更改:
```
herdr server reload-config
```
## 安装
从 GitHub 安装已发布的插件:
```
herdr plugin install ogulcancelik/herdr-browser --yes
```
对于本地开发,请改为链接此检出版本:
```
herdr plugin link ~/Projects/herdr-browser
```
## Agent 浏览器自动化
Herdr Browser 在插件目录中包含一个 CLI;它不会安装全局可执行文件。使用以下命令查找当前活动的检出路径:
```
herdr plugin list --plugin official.browser --json
```
读取 `result.plugins[0].plugin_root`,然后使用 Bun 运行 CLI:
```
bun run "/src/cli.ts" views
bun run "/src/cli.ts" connect --view
```
`views` 会列出当前由可见插件窗格支撑的浏览器视图。`connect` 会启动一个限定于所选视图的环回 CDP 网关,并返回其 HTTP 和 WebSocket endpoint。该网关代表完整的浏览器视图,而不仅仅是其活动标签页。Browser Use、PinchTab、Playwright 和其他 CDP 客户端可以通过它们常规的 API 导航和管理标签页,同时 Herdr 的标签栏和渲染页面会遵循标准的 CDP target 激活机制。
将客户端指向返回的 endpoint:
- Browser Use:将 `BU_CDP_URL` 设置为 `cdp_http_url`,或将 `BU_CDP_WS` 设置为 `browser_ws_url`。
- Playwright:调用 `chromium.connectOverCDP(cdp_http_url)`。
- Playwright MCP:传入 `--cdp-endpoint=`。
- Chrome DevTools MCP:传入 `--browser-url=`。
当客户端连接时,该窗格将保持完全可交互的状态。点击、滚动、悬停、输入和工具栏操作都会作用于自动化客户端所看到的相同 target,因此你可以在运行中途进行干预,并在无需重新连接的情况下交还控制权。
该 endpoint 授予对该浏览器视图的完全控制权。请将其保留在本地,不要通过网络暴露。Herdr Browser 保留对 Chromium 的所有权;关闭已挂载的自动化客户端只会断开其连接,而不会终止插件浏览器。
面向 Agent 的工作流程记录在 [`skills/herdr-browser/SKILL.md`](skills/herdr-browser/SKILL.md) 中。
## 打开浏览器窗格
在右侧分屏中打开一个空白浏览器:
```
herdr plugin pane open \
--plugin official.browser \
--entrypoint browser \
--placement split \
--direction right \
--focus
```
使用 `--placement tab`、`--placement zoomed` 或 `--placement overlay` 来选择其他支持的布局。第一行工具栏提供标签页选择、关闭和新建标签页控制。第二行提供后退、前进、重新加载、停止、缩放和 URL 输入功能。页面点击、滚动、悬停和键盘输入都会被转发给 Chromium。
当其他插件打开窗格时,可以传入一个初始 URL:
```
herdr plugin pane open \
--plugin official.browser \
--entrypoint browser \
--placement zoomed \
--env HERDR_BROWSER_INITIAL_URL=http://127.0.0.1:3000 \
--focus
```
## 打开本地开发链接
该插件会为使用 `localhost`、`127.0.0.1` 或 `[::1]` 的 HTTP URL 注册一个链接处理器。在任意 Herdr 终端窗格中按住 Control 并点击匹配的 URL:
```
http://localhost:5173
http://127.0.0.1:3000/dashboard
http://[::1]:8080
```
在 macOS 和 Linux 上均使用 Control-click。普通点击仍作为终端输入,且与本地链接处理器不匹配的 URL 会继续通过 Herdr 的常规外部浏览器行为进行处理。
默认情况下,本地链接会在获得焦点的右侧分屏中打开浏览器。你可以在插件配置目录下的 `browser.json` 中配置该行为:
```
herdr plugin config-dir official.browser
```
配置示例:
```
{
"linkOpenPlacement": "split",
"splitDirection": "right",
"focusOnOpen": true,
"browserZoom": 1.25,
"showDiagnostics": false,
"captureScale": 1,
"captureBackend": "screenshot",
"screencastEveryNthFrame": 1,
"screencastPollMs": 250,
"profileRoot": "/absolute/path/to/herdr-browser-profiles"
}
```
`browserZoom` 设置初始页面缩放比例,范围从 `0.5` 到 `2.5`,默认值为 `1`。浏览器工具栏的 `[-]` 和 `[+]` 控件会以 10% 的步长更改当前窗格的缩放比例,并将新的默认值持久化到此文件中。调整窗格大小不会更改浏览器缩放比例。
`showDiagnostics` 会保留底部的状态行,用于显示流和视口指标。它默认为 `false`,主要用于性能调试。
`captureScale` 用于减小捕获帧的尺寸,范围从 `0.1` 到 `1`,默认值为 `1`。帧是以完整的设备像素捕获的,因此 HiDPI 显示器会为每一个像素付出双重代价:一次在 Chromium 的编码器中,另一次在终端的解码和纹理上传过程中。设置为 `0.75` 可以减少大约 44% 的像素数量,而清晰度只有轻微下降;如果浏览器窗格消耗的 CPU 超出了你的预期,这是目前最有效的调节参数。由于窗格本身已经被缩小以适应字符网格,因此即便比例远低于 `1`,文本依然清晰可读。
`captureBackend`、`screencastEveryNthFrame` 和 `screencastPollMs` 用于微调帧 pipeline 本身,很少需要更改。`captureBackend` 为按需获取帧选择 `screenshot` 或 `screencast`,默认为 `screenshot`;而实时窗格流无论何种情况都使用 screencast。`screencastEveryNthFrame` 接受 `1` 或 `2`,当为 `2` 时会将生产者的速率减半。`screencastPollMs` 接受 `50` 到 `5000` 的值,默认为 `250`。
Chrome 配置文件默认持久化存储在插件状态目录下,并按 Herdr 会话进行隔离。`profileRoot` 可以选择性地更改其父目录;为了防止并发会话之间出现 Chrome 配置文件锁定冲突,处理过的 Herdr 会话名称仍会被追加到路径中。请勿将其指向当前已被其他 Chrome 进程使用的配置文件。
`linkOpenPlacement` 接受 `split`、`tab`、`zoomed` 或 `overlay`。overlay 是推荐的瞬时、类弹窗式浏览器界面。不支持真正的 Herdr `popup` 放置方式,因为弹出窗口没有图形流所需的窗格标识。
## 快捷键
将自定义命令添加到你的 Herdr 配置中,以便在没有链接的情况下打开浏览器。此示例绑定了右侧分屏和一个瞬态 overlay:
```
[[keys.command]]
key = "prefix+b"
type = "shell"
command = '"${HERDR_BIN_PATH}" plugin pane open --plugin official.browser --entrypoint browser --placement split --direction right --focus'
description = "open browser in right split"
[[keys.command]]
key = "prefix+shift+b"
type = "shell"
command = '"${HERDR_BIN_PATH}" plugin pane open --plugin official.browser --entrypoint browser --placement overlay --focus'
description = "open browser overlay"
```
编辑后请重新加载配置:
```
herdr server reload-config
```
## Chromium 发现
该插件会为每个 Herdr 会话启动一个独立的 headless Chromium 进程,并附带专属的持久化配置文件。在该会话中,Cookie、origin 存储、同意状态和登录信息在浏览器窗格和 daemon 重启后依然会保留。它不会挂载到你常规的浏览器进程,也不会复用你常规的浏览器配置文件。
在 Linux 上,它会在 `PATH` 中搜索常见的 Chrome 和 Chromium 可执行文件名。在 macOS 上,它还会搜索标准的 Google Chrome 和 Chromium 应用程序位置。当自动发现无法满足需求时,请在用于启动 Herdr 服务器的环境中设置显式的可执行文件,然后重启 Herdr:
```
export HERDR_BROWSER_CHROME="/path/to/chrome"
```
当前版本不会自动下载 Chromium。如果未安装兼容的浏览器,启动时会失败并报出发现错误。
## 渲染
帧来自于 CDP screencast,并通过 Herdr 的窗格图形流到达终端。捕获是由绘制事件驱动的,并通过延迟 `Page.screencastFrameAck` 来进行节奏控制,这会在 Chromium 编码下一帧之前施加背压,而不是在已经付出代价之后再丢弃帧。被动上限为 15 FPS;直接输入会将其提升至 30 FPS 并持续 750 毫秒,随后恢复至被动速率。而已稳定的页面几乎不会产生任何帧。
## 本地冒烟测试
在 Herdr 窗格中通过未使用的端口启动包含的测试页面:
```
HERDR_BROWSER_TEST_PORT=43127 bun run test-page
```
按住 Control 并点击打印出的本地 URL。确认页面能够打开、随窗格调整大小、接受点击和输入,并且在窗格关闭时能够关闭其浏览器视图。
运行自动化检查:
```
bun test
bun run typecheck
```
## 当前限制
不支持 Windows、真正的 popup 放置方式、下载、右键菜单、DevTools 和 IME。目前还没有页面文本选择、剪贴板复制或页面查找功能。渲染需要启用 Herdr 的实验性 Kitty 图形设置,并且是针对本地会话进行调优的;其单帧带宽过高,无法用于远程 SSH 使用。
标签:CDP, Chromium, RPA, SOC Prime, 开发工具, 浏览器自动化, 终端工具, 自动化攻击