浏览器自动化扩展

Browser Agent Bridge 是一个为AI代理设计的浏览器扩展,通过简单的SDK集成和安全的RPA浏览器扩展,解决AI代理在网页认证和导航中的自动化问题。

  • by ypresto
  • TypeScript
  • 本地部署
  • 8 星标
  • 更新于
在 GitHub 查看 ypresto/browser-automator

使用说明

浏览器代理桥

AI代理网络应用程序的剧作家mcp,只需要安装一个chrome扩展程序。

为什么?

由于身份验证障碍(登录、2FA、验证码)和基于点击的导航,人工智能代理在很大程度上仍然无法访问网络,这些障碍无法通过服务器端无头浏览器安全地自动化。

对于代理开发人员来说,许多web应用程序也缺乏足够的API或MCP支持。而且,由每个代理开发人员为每个web应用程序构建专用的浏览器自动化解决方案并不划算。

终端用户也不应该自己解决这个问题——非开发人员发现很难安装和运行Playwright MCP或Puppeteer等通用自动化工具。

浏览器代理桥通过以下方式解决了这些挑战:

  • 为用户提供直接与最终用户浏览器集成的安全RPA浏览器扩展
  • 为开发人员提供简单的SDK,以将AI代理与扩展集成
  • 无需复杂的本地安装或每个应用程序的浏览器扩展

演示

看 软件包/示例/README.md

架构摘要

该架构使用反向消息流,通过浏览器验证的来源提供强大的安全性:

Node Server ←WebSocket→ Web Page (Tab) ←postMessage→ Browser Extension

流动

  1. AI代理进行工具调用 通过 @browser-agent-bridge/ai-sdk

    • SDK通过标准HTTP/WebSocket向Node服务器发送命令
  2. 开发人员的服务器通过WebSocket向网页发送命令

    • 网页连接到其自己的服务器(例如。, wss://app.example.com/ws)
    • 服务器将自动化命令推送到网页
  3. 网页通过postMessage将命令转发到浏览器扩展

    • 用途 window.postMessage() 具有浏览器验证的来源
    • 扩展通过内容脚本接收命令
    • event.origin 由浏览器加密验证(不能伪造)
  4. 浏览器扩展验证并执行

    • 从浏览器验证来源 event.origin
    • 检查请求源的权限
    • 在需要时显示弹出式UI供用户审批
    • 强制标签隔离(仅会话访问他们创建的标签)
    • 使用以下命令执行DOM操作 @browser-agent-bridge/dom-core
  5. 结果通过同一链返回

    • 扩展→ 发送消息→ 网页→ 网络套接字→ 服务器→ AI 代理
graph TB
  subgraph "Server"
    AI[Vercel AI SDK]
    BAAISDK[browser-agent-bridge/ai-sdk]
  end

  subgraph "Agent Web Page Tab"
    Bridge[Bridge Script]
    ChatUI[Chat UI]
    CS[Extension Content Script]
  end

  subgraph "Browser Extension"
    SW[Service Worker]
    Popup[Popup for Permission Requests]
  end

  subgraph "Target Web Page Tab"
    CST[Extension Content Script]
    Target[Target UI]
  end


  AI -->|tools|BAAISDK
  BAAISDK <-->|WebSocket| Bridge

  AI <--> ChatUI
  Bridge <-->|postMessage| CS
  CS -->|chrome.runtime.sendMessage| SW

  SW -->|show| Popup
  Popup -->|user decision| SW

  SW -->|chrome.tabs.sendMessage| CS
  SW -->|tool call| CST
  CST -->|browser-agent-bridge/dom-core| Target

安全模型

  • 用户按来源授予权限
  • Origin使用postMessage()事件进行验证。Origin
  • 会话只能访问它创建的选项卡
  • 这些可以防止CSRF指向用户允许的选项卡以外的其他选项卡

看 docs/security-model.md 获取详细的安全文档。