# agent-browser-plugin：为AI Agent赋予真实浏览器能力的protoAgent插件

> 这是一个protoAgent插件，集成vercel-labs/agent-browser，为AI Agent提供真实的浏览器自动化能力，包括页面操作、截图、工作流和实时浏览器面板。

- 板块: [Openclaw Llm](https://www.zingnex.cn/forum/board/openclaw-llm)
- 发布时间: 2026-06-13T01:15:57.000Z
- 最近活动: 2026-06-13T01:21:11.331Z
- 热度: 116.9
- 关键词: AI Agent, browser automation, protoAgent, plugin, CDP, Chrome, vercel-labs, accessibility tree, web scraping
- 页面链接: https://www.zingnex.cn/forum/thread/agent-browser-plugin-ai-agentprotoagent
- Canonical: https://www.zingnex.cn/forum/thread/agent-browser-plugin-ai-agentprotoagent
- Markdown 来源: ingested_event

---

## 原作者与来源

- 原作者/维护者：protoLabsAI
- 来源平台：github
- 原始标题：agent-browser-plugin
- 原始链接：https://github.com/protoLabsAI/agent-browser-plugin
- 来源发布时间/更新时间：2026-06-13T01:15:57Z

## 原作者与来源\n\n- **原作者/维护者：** protoLabsAI\n- **来源平台：** GitHub\n- **原始标题：** agent-browser-plugin\n- **原始链接：** https://github.com/protoLabsAI/agent-browser-plugin\n- **发布时间：** 2026年6月13日\n\n---\n\n## 背景：AI Agent为什么需要浏览器\n\n大型语言模型（LLM）驱动的AI Agent正在从"聊天机器人"向"能执行任务的助手"演进。但许多实际任务——填写表单、抓取网页数据、操作后台管理系统——都需要与真实的Web界面交互。\n\n传统的方案是让Agent调用API，但现实中大量服务只有Web界面没有API。因此，给Agent配备一个"能看能点"的真实浏览器成为刚需。\n\n## 项目概述：agent-browser-plugin是什么\n\nagent-browser-plugin是一个protoAgent插件，它为AI Agent提供了真实的浏览器自动化能力。它基于vercel-labs的agent-browser（一个用Rust编写的原生CLI/守护进程），通过Chrome DevTools Protocol（CDP）驱动Chrome，并使用可访问性树快照和紧凑的`@eN`元素引用来实现高效交互。\n\n核心循环是：**打开 → 快照 → 在@ref上执行操作 → 验证**：\n\n```\nbrowser_open(\"example.com\")\nbrowser_snapshot()           # 获取带@e1, @e2...引用的可访问性树\nbrowser_click(\"@e2\")         # 在引用上执行操作（或用CSS选择器）\nbrowser_fill(\"@e3\", \"...\")\nbrowser_get_text(\"body\")     # 读取/提取内容\nbrowser_screenshot()\nbrowser_close()\n```\n\n## 核心功能组件\n\n### 1. 浏览器工具集（Browser Tools）\n\n插件提供了一系列子进程包装器，覆盖常见的浏览器操作：\n\n- `browser_open` / `browser_close`：打开和关闭浏览器会话\n- `browser_snapshot`：获取当前页面的可访问性树快照\n- `browser_click` / `browser_fill` / `browser_type`：点击、填充、输入\n- `browser_get_text` / `browser_get_html` / `browser_get_value`：内容提取\n- `browser_press` / `browser_hover`：按键和悬停\n- `browser_eval`：执行JavaScript\n- `browser_screenshot`：截图\n- `browser_back` / `browser_forward` / `browser_reload`：导航操作\n- `browser_dashboard`：启动浏览器仪表板\n\n### 2. 技能系统（Skill）\n\n插件包含一个发现技能（discovery skill），它会代理到CLI的`agent-browser skills get core`命令。这意味着技能说明总是与CLI保持同步，不会过时。\n\n### 3. 工作流（Workflows）\n\n提供声明式的浏览器操作配方，例如：\n- 浏览并提取（browse-and-extract）\n- 填写表单（fill-a-form）\n\n这些工作流可以被Agent直接调用，简化常见任务的执行。\n\n### 4. 浏览器面板（Browser Panel）\n\n这是一个控制台视图（遵循ADR 0026），它**嵌入了agent-browser自身的实时仪表板**：\n\n- **实时视口**：通过CDP screencast显示浏览器画面\n- **命令活动/控制台/网络流**：显示浏览器操作日志\n- **反向代理路由**：通过`/plugins/agent_browser/panel/dash`路径代理，支持HTTP和WebSocket\n\n关键设计：仪表板通过插件自己的反向代理路由服务， riding the fleet proxy（遵循ADR 0042），这意味着它不会将操作员的浏览器直接指向`localhost:PORT`，解决了安全和网络隔离问题。\n\n**最小模式（minimal mode）**：`panel_mode: minimal`提供一个仅包含视口（实时截图+导航工具栏）的页面，无WebSocket依赖，适合简单场景。\n\n## 完整示例：roxy项目\n\n如果你想看这个插件在实际Agent中的使用方式，可以参考**roxy**项目（https://github.com/protoLabsAI/roxy）。\n\nroxy是一个protoLabs的操作/编排Agent，它：\n- 安装此插件（`plugin install` + 固定的`plugins.lock`）\n- 启用插件\n- 围绕插件构建自己的工作流和逻辑\n\n你可以fork roxy作为自己项目的起点。\n\n## 安装要求与步骤\n\n### 系统要求\n\n- **protoAgent ≥ 0.27.0**（需要控制台视图和插件工具支持）\n- **agent-browser**二进制文件在PATH中：\n\n```bash\nnpm i -g agent-browser && agent-browser install   # 下载Chrome for Testing\n```\n\n也支持Homebrew和Cargo安装，详见上游README。\n\n### 安装插件\n\n```bash\npython -m server plugin install https://github.com/protoLabsAI/agent-browser-plugin --ref main\npython -m server plugin enable agent_browser\n# 然后重启服务\n```\n\n### 配置\n\n```yaml\nplugins:\n  enabled: [agent_browser]\n\nagent_browser:\n  binary: agent-browser\n  dashboard_port: 4848\n```\n\n## 项目结构\n\n| 文件 | 功能 |\n|------|------|\n| `tools.py` | 浏览器工具——agent-browser CLI的子进程包装器 |\n| `browser_panel.py` | 嵌入agent-browser仪表板的控制台视图 |\n| `skills/` | 发现技能（代理到`agent-browser skills get core`） |\n| `workflows/` | 声明式浏览器操作配方 |\n| `__init__.py` | `register()`——注册工具+面板；技能/工作流自动发现 |\n\n插件默认**禁用**，直到你显式启用它并安装agent-browser二进制文件。\n\n## 技术亮点\n\n### 可访问性树而非DOM\n\nagent-browser使用Chrome的可访问性树（accessibility tree）而非原始DOM。这意味着：\n\n- 更紧凑的表示（去除不可见/冗余元素）\n- 对LLM更友好的结构（语义化的按钮、输入框标签）\n- 更稳定的元素引用（`@eN`引用在页面变化时更可靠）\n\n### CDP驱动而非Selenium\n\n使用Chrome DevTools Protocol直接控制浏览器，相比Selenium：\n\n- 更低的延迟\n- 更丰富的底层能力（网络拦截、性能分析、screencast）\n- 无需额外的WebDriver层\n\n### 反向代理架构\n\n浏览器面板不直接暴露本地端口，而是通过插件的反向代理路由访问。这解决了：\n\n- 多主机/集群部署时的网络可达性问题\n- 安全隔离（不直接暴露浏览器控制端口）\n- 与现有fleet代理基础设施的集成\n\n## 使用场景\n\n这个插件适合以下场景：\n\n1. **Web数据抓取**：从只有Web界面没有API的网站提取结构化数据\n2. **表单自动化**：自动填写复杂的Web表单（如保险申请、预订系统）\n3. **后台管理操作**：在Web管理后台执行批量操作\n4. **Web应用测试**：自动化端到端测试，结合LLM的推理能力\n5. **人机协作**：Agent操作浏览器的同时，人类可以通过面板观察和干预\n\n## 局限与注意事项\n\n- 需要Chrome for Testing，首次安装会下载Chrome\n- 浏览器操作是异步的，Agent需要正确处理等待和重试\n- 某些复杂的Web应用（重度使用Canvas、WebGL）可能无法完全通过可访问性树操作\n- 插件依赖于agent-browser上游项目的更新\n\n## 结语\n\nagent-browser-plugin为protoAgent生态系统填补了"真实浏览器自动化"的空白。它不是重新发明轮子，而是将vercel-labs的agent-browser能力封装成Agent友好的接口。\n\n对于需要与Web界面交互的AI Agent应用，这个插件提供了一个生产就绪的解决方案——有工具、有技能、有工作流、有可视化面板。结合roxy示例项目，开发者可以快速上手构建自己的浏览器驱动Agent。