Open Browser MCP

Openbrowsermcp

使用模型上下文协议（MCP）的AI助手的开源浏览器自动化系统。

OpenBrowserMCP使Claude、Cursor和VS Code等AI应用程序能够通过简化的、令牌高效的协议来控制您的浏览器。

特性

• 4聚焦工具 -最小API表面： snapshot, navigate, interact, console
• 代币高效 -用途 TOON格式 （令牌比JSON少约40%）
• 基于ARIA -基于可访问性树的语义元素选择
• 单个选项卡 -可预测自动化的显式连接模型
• 本地和私人 -完全在您的计算机上运行，没有数据发送到远程服务器
• 登入 -在所有会话中使用您现有的浏览器配置文件

建筑

┌─────────────────────────────────────────────────────┐
│  AI Assistant (Claude, Cursor, VS Code)             │
└──────────────────────┬──────────────────────────────┘
                       │ MCP Protocol (stdio)
                       ▼
┌─────────────────────────────────────────────────────┐
│  MCP Server (Node.js)                               │
│  - Exposes 4 tools to AI                            │
│  - WebSocket server on :9222                        │
└──────────────────────┬──────────────────────────────┘
                       │ WebSocket
                       ▼
┌─────────────────────────────────────────────────────┐
│  Chrome Extension                                    │
│  - Connects to MCP server                           │
│  - Executes browser automation                      │
│  - Returns ARIA snapshots                           │
└─────────────────────────────────────────────────────┘

快速开始

1.安装MCP服务器

cd mcp
npm install
npm run build

2.安装Chrome扩展程序

cd extension
npm install
npm run dev

在Chrome中加载扩展程序：

1. 首选 chrome://extensions
2. 启用“开发人员模式”
3. 点击“加载解包”
4. 选择 extension/build/chrome-mv3-dev

3.配置您的AI助手

添加到MCP配置中：

{
  "mcpServers": {
    "browser": {
      "command": "node",
      "args": ["/path/to/OpenBrowserMCP/mcp/dist/index.js"]
    }
  }
}

4.连接和自动化

1. 在Chrome中单击OpenBrowserMCP扩展程序图标
2. 单击要控制的选项卡上的“连接”
3. 让你的AI助手与页面交互！

工具

snapshot

将当前页面捕获为ARIA可访问性树。

url: https://example.com/login
title: Login Page
elements[5]{ref,role,name,states}:
  e1,heading,Welcome,
  e2,textbox,Email,focused
  e3,textbox,Password,
  e4,button,Sign in,
  e5,link,Forgot password?,

navigate

导航到URL。

navigate({ url: "https://example.com" })

interact

在页面上执行交互。

// Click by ARIA ref
interact({ action: "click", element: { ref: "e4" } })

// Type into element
interact({ action: "type", element: { ref: "e2" }, text: "user@example.com" })

// Click by role and name
interact({ action: "click", element: { role: "button", name: "Submit" } })

// Click by CSS selector
interact({ action: "click", element: { css: ".submit-btn" } })

console

获取浏览器控制台日志以进行调试。

console() // Returns captured log entries

元素选择

寻找要素的三种策略：

项目结构

OpenBrowserMCP/
├── mcp/                    # MCP Server
│   ├── src/
│   │   ├── index.ts       # CLI entry point
│   │   ├── server.ts      # MCP server setup
│   │   ├── context.ts     # WebSocket management
│   │   └── tools/         # Tool implementations
│   └── package.json
│
├── extension/              # Chrome Extension (Plasmo)
│   ├── background.ts      # WebSocket client
│   ├── content.ts         # DOM automation
│   ├── popup.tsx          # React UI
│   └── lib/
│       ├── protocol.ts    # Message types
│       ├── aria-snapshot.ts
│       ├── interactions.ts
│       └── console-capture.ts
│
└── docs/
    └── plans/             # Design documents

发展

MCP服务器

cd mcp
npm run dev     # Watch mode
npm run build   # Production build

Chrome 扩展

cd extension
npm run dev     # Development with hot reload
npm run build   # Production build

协议

基于WebSocket的简单JSON-RPC：

// Request
{ id: "uuid", method: "snapshot", params: {} }

// Success
{ id: "uuid", result: { url: "...", title: "...", elements: [...] } }

// Error
{ id: "uuid", error: { code: "ELEMENT_NOT_FOUND", message: "..." } }

为什么选择OpenBrowserMCP？

贡献

看 贡献.md 作为指导方针。

许可证

MIT许可证-请参阅 许可证 了解详情。

致谢

• 浏览器MCP -灵感与MCP服务器基础
• 剧作家 -ARIA快照实现参考
• TOON格式 -令牌高效编码
• 疟原虫 -Chrome扩展框架