内容
# 飞行浏览 MCP
[中文](README.zh-CN.md)
**向您的代理展示如何使用网站，或者让它自主探索。飞行浏览 MCP 将网站交互转化为可重用的手册，使未来的任务更快、更便宜。**
---
## 示范 (Pi Demo)
### 代理自主性
安装技能，让代理探索网站。完成后，它会生成操作手册。您可以与他人分享手册。
探索后，手册保存在 `website-manuals/` 中：
```
website-manuals/<site>/
├── README.md # 手册概述（先读这个！）
├── meta.json # 网站信息 + 页面地图
├── pages/ # 页面交互模型（JSON）
├── navigation/ # 导航路径
├── workflows/ # 操作工作流（带有回退）
└── capabilities.json # 浏览器能力模型
```
### 有指导的教学
探索遇到困难？手动记录或标记元素，帮助代理完成。
#### 标记元素
<img src="assets/Image/MarkElement.gif" alt="标记元素" />
#### 记录工作流
<img src="assets/Image/RecordWorkflow.gif" alt="记录工作流" />
### 手册重用
给定任务，代理会检查现有的手册。如果找到，它会根据手册操作 —— 更少的令牌，更快的执行。
### 示范
构建各种工作流，简单的示范。
#### YouTube 点赞和评论
搜索关键词，找到视频，点赞和评论。
<video src="https://github.com/user-attachments/assets/129c69f7-21a7-4fbe-93ae-6b0205450933" controls width="100%" style="max-width:720px;"></video>
#### 奇点小说保存器
搜索小说，保存前 5 章。
<video src="https://github.com/user-attachments/assets/b244db3b-fb98-433c-b6ed-d8a74c75e802" controls width="100%" style="max-width:720px;"></video>
---
## 安装
```bash
# 构建
cd server && npm install && npm run build
cd extension && npm install && npm run build
# 加载扩展
# chrome://extensions/ -> 开发者模式 -> 加载解压 -> extension/dist/
# 启动服务器
cd server && node dist/index.js
```
### MCP 配置
示例 - 用 `server/dist/index.js` 的实际路径填充 `args`：
```json
{
"mcpServers": {
"browser-mcp": {
"command": "node",
"args": ["/path/to/server/dist/index.js"]
}
}
}
```
### 技能
查看 `scripts/Skill` 以获取可用的技能。
### 快速入门示例
参考 `agent-examples/` 以获取现成的代理工作区示例。在其中一个目录中运行您的代理，它将自动加载 MCP 配置、技能和项目提示。（记得将 MCP 路径更新为您的实际设置。）
---
## 架构
```
AI 代理（Claude Code / Pi / Codex）
|
| 1) MCP 标准输入/输出协议（JSON-RPC）
| 标准输入/标准输出
v
MCP 服务器（Node.js） 协议转换器
|
| 2) WebSocket :9456
v
Chrome 扩展
|
| 3) Chrome API
|
v
浏览器
```
## 功能
- **40+ MCP 工具** -- 标签管理、内容提取、DOM 操作、网络拦截、文件保存、工作流记录
- **元素选择器** -- 点击页面上的任意元素，并告诉代理它是什么
- **工作流记录** -- 向代理演示操作，它学习并重用
- **网络 API 发现** -- 拦截 XHR/Fetch 以查找 SPA 背后的 JSON API
- **令牌高效保存** -- 直接将页面内容保存到磁盘，绕过 LLM
- **Shadow DOM + contenteditable**
## 工具
| 类别 | 工具 | 功能 |
|----------|------|--------------|
| **页面** | `browser.get_markdown` | 通过 Readability + Turndown 将页面转换为干净的 Markdown |
| | `browser.find` | 通过可见文本、aria-label 或角色查找元素 |
| | `browser.current_page` | 获取当前标签页的 URL 和标题 |
| | `browser.inspect_page` | 查看页面结构（标题、章节、按钮） |
| | `browser.query` | 通过 CSS 选择器查询元素（穿透 Shadow DOM） |
| | `browser.evaluate` | 在页面上下文中执行 JS |
| **操作** | `browser.click` | 点击元素（composed:true 表示 Shadow DOM） |
| | `browser.type` | 在输入框或 contenteditable 中输入文本 |
| | `browser.scroll` | 滚动页面 |
| | `browser.wait_for_element` | 等待元素出现 |
| **保存** | `browser.save_content` | 自动检测主要内容并保存到文件（零 LLM 令牌） |
| | `browser.save_xpath` | 通过 XPath 提取并保存到文件 |
| **网络** | `browser.start_network_monitor` | 开始拦截请求 |
| | `browser.network.search` | 通过关键词、方法、状态搜索缓存的请求 |
| | `browser.network.replay` | 重放缓存的请求 |
| **标签页** | `browser.list_tabs` | 列出所有打开的标签页 |
| | `browser.open / close / activate` | 标签页管理 |
| **记录** | `workflow.list_recordings` | 从弹出窗口查看记录 |
| | `workflow.get_recording` | 获取记录详情 |
| | `workflow.list_elements` | 查看标记的元素 |
| | `workflow.generate` | 将处理过的工作流保存到 website-manuals |
| **数据** | `browser.cookies` | 读取 cookie（需要权限） |
| | `browser.screenshot` | 截取屏幕截图（需要权限） |
| | `browser.permissions.list / grant / revoke` | 权限管理 |
---
## 许可证
MIT
