使用说明
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中加载扩展程序：
- 首选
chrome://extensions - 启用“开发人员模式”
- 点击“加载解包”
- 选择
extension/build/chrome-mv3-dev
3.配置您的AI助手
添加到MCP配置中：
{
"mcpServers": {
"browser": {
"command": "node",
"args": ["/path/to/OpenBrowserMCP/mcp/dist/index.js"]
}
}
}
4.连接和自动化
- 在Chrome中单击OpenBrowserMCP扩展程序图标
- 单击要控制的选项卡上的“连接”
- 让你的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
元素选择
寻找要素的三种策略：
| 策略 | 示例 | 最适合 |
|---|---|---|
| 参考 | { ref: "e1" } |
从快照快速查找 |
| 角色+姓名 | { role: "button", name: "Submit" } |
语义，稳定 |
| 层叠样式表 | { css: "#login-form .btn" } |
精准瞄准 |
项目结构
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？
| 功能 | OpenBrowserMCP | 剧作家MCP | 其他解决方案 |
|---|---|---|---|
| 使用浏览器 | ✅ | ❌ | 变化多样 |
| 已登录会话 | ✅ | ❌ | ❌ |
| 令牌有效 | ✅ （嘟嘟声） | ❌ | ❌ |
| 最少的工具 | ✅ （4个工具） | ❌ （12+工具） | 各不相同 |
| 未检测到机器人 | ✅ | ❌ | ❌ |
贡献
看 贡献.md 作为指导方针。
许可证
MIT许可证-请参阅 许可证 了解详情。
