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

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

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

原作者与来源

• 原作者/维护者：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\n1. 浏览器工具集（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\n2. 技能系统（Skill）\n\n插件包含一个发现技能（discovery skill），它会代理到CLI的agent-browser skills get core命令。这意味着技能说明总是与CLI保持同步，不会过时。\n\n3. 工作流（Workflows）\n\n提供声明式的浏览器操作配方，例如：\n- 浏览并提取（browse-and-extract）\n- 填写表单（fill-a-form）\n\n这些工作流可以被Agent直接调用，简化常见任务的执行。\n\n4. 浏览器面板（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\nbash\nnpm i -g agent-browser && agent-browser install 下载Chrome for Testing\n\n\n也支持Homebrew和Cargo安装，详见上游README。\n\n安装插件\n\nbash\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\nyaml\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\nCDP驱动而非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。