电子操控者-MCP(或:电子木偶师-MCP,根据上下文,“electro-puppeteer”可灵活翻译为“电子操控者”或“电子木偶师”,这里选择“电子操控者”以保持专业性)
一个功能强大的Electron应用程序,它同时提供了HTTP REST API和模型上下文协议(MCP)接口,用于通过Puppeteer管理浏览器自动化会话。它支持以编程方式控制浏览器窗口,并提供完整的Chrome DevTools协议访问权限。
概述
这个项目融合了:
- 电子 - 提供原生浏览器窗口管理功能
- Puppeteer(操控木偶者,或特指用于浏览器自动化控制的工具) - 启用Chrome DevTools协议自动化
- 快递 RESTful HTTP API服务器
- MCP(Minimum Cost Path)——最小成本路径 - 人工智能代理集成的模型上下文协议
特点/功能
- 🌐(表示互联网或全球网络的符号,可译为“全球网络”或“互联网”等,具体根据上下文确定) 多会话管理 - 创建并管理多个具有唯一ID的独立浏览器会话
- 🔌(电源插头/插座) 双接口 - 通过HTTP REST API或MCP协议访问
- 🚀 表情符号“🚀”通常表示火箭、快速前进或加速的意思,在中文中可以翻译为“🚀(火箭/快速前进)”。不过,由于表情符号的直观性,直接使用“🚀”在很多情况下也能被理解为表示快速或进步的含义。 真实的浏览器自动化 - 全功能Puppeteer支持,具备真实Chrome渲染能力
- 📊 表格、数据图表 系统监控 - 内置状态端点用于健康检查
- 🎯(目标) 会话隔离 - 每个会话保持独立的状态和上下文
安装
# Install dependencies
npm install
# Build the project
npm run build
# Start the server
npm startAPI 文档
HTTP REST API
所有HTTP端点均可通过以下地址访问: http://localhost:3000
创建会话
创建一个新的浏览器会话,可选初始URL。
终端(或:端点): POST /sessions
请求体:
{
"initialUrl": "https://example.com" // optional
}回答: 201 Created
{
"id": "550e8400-e29b-41d4-a716-446655440000"
}示例:
curl -X POST http://localhost:3000/sessions \
-H "Content-Type: application/json" \
-d '{"initialUrl": "https://example.com"}'______________________________________________________________________
导航会话
将现有会话导航到新的URL。
终端点: POST /sessions/:id/navigate
请求体:
{
"url": "https://example.com/?q=search"
}回答: 200 OK
{
"success": true,
"message": "Navigated to https://example.com/?q=search",
"currentUrl": "https://example.com/?q=search"
}错误响应: 404 Not Found
{
"success": false,
"message": "Session not found"
}示例:
curl -X POST http://localhost:3000/sessions/{SESSION_ID}/navigate \
-H "Content-Type: application/json" \
-d '{"url": "https://example.com"}'______________________________________________________________________
删除会话
关闭并移除浏览器会话。
终端(或端点): DELETE /sessions/:id
回答: 200 OK
{
"success": true,
"message": "Browser session closed successfully"
}错误响应: 404 Not Found
{
"success": false,
"message": "Session not found"
}示例:
curl -X DELETE http://localhost:3000/sessions/{SESSION_ID}______________________________________________________________________
截取屏幕截图
在会话中捕获当前页面的PNG格式截图。
终端点: GET /sessions/:id/screenshot
回答: 200 OK
- 内容类型:
image/png - 正文:二进制PNG图像数据
错误响应: 404 Not Found
{
"success": false,
"message": "Session not found"
}示例:
curl -X GET http://localhost:3000/sessions/{SESSION_ID}/screenshot \
--output screenshot.png______________________________________________________________________
获取(渲染器网络请求)
从渲染进程执行网络请求,并返回一个类似 Response 的响应体。
终端(或:端点): POST /sessions/:id/fetch
请求体:
{
"url": "https://example.com/api",
"method": "POST",
"headers": {"content-type": "application/json"},
"body": "eyJmb28iOiJiYXIifQ==",
"bodyEncoding": "base64"
}可以提供任何标准的请求字段: method, headers, body (作为UTF-8字符串或Base64编码) bodyEncoding) redirect, credentials, cache, mode, referrer, referrerPolicy, integrity, keepalive.
回答: 200 OK
{
"ok": true,
"status": 200,
"statusText": "OK",
"url": "https://example.com/api",
"redirected": false,
"type": "basic",
"headers": {"content-type": "application/json"},
"bodyBase64": "eyJmb28iOiJiYXIifQ=="
}解码 bodyBase64 获取响应体的原始字节。
______________________________________________________________________
健康状况
返回服务器健康指标和会话信息。
终端点: GET /status
回答: 200 OK
{
"uptime": 42,
"memoryUsage": {
"rss": 123456789,
"heapTotal": 98765432,
"heapUsed": 87654321,
"external": 1234567
},
"browser": {
"isOpen": true
},
"sessions": {
"active": 2
},
"timestamp": "2025-10-25T10:44:15.000Z"
}示例:
curl http://localhost:3000/status______________________________________________________________________
退出守护进程
优雅地关闭守护进程,方法是关闭所有浏览器窗口、停止HTTP服务器,并以状态码0退出Electron应用程序。
终端(或端点): POST /quit
回答: 200 OK
{
"success": true,
"message": "Shutting down daemon"
}示例:
curl -X POST http://localhost:3000/quit注: 这个端点对于程序化关闭非常有用,尤其是在测试环境中。守护进程将关闭所有活动会话,停止HTTP服务器,并优雅地退出。
______________________________________________________________________
MCP协议
MCP 端点的访问地址为 http://localhost:3000/mcp 并且遵循JSON-RPC 2.0规范,使用服务器发送事件(SSE)进行响应。
可用工具
打开浏览器
以一个可选的初始URL打开一个新的浏览器会话。
输入模式(或输入架构):
{
initialUrl?: string // Optional URL to load initially
}输出:
{
"success": true,
"message": "Browser session opened successfully",
"id": "550e8400-e29b-41d4-a716-446655440000"
}示例请求:
{
"jsonrpc": "2.0",
"id": 1,
"method": "tools/call",
"params": {
"name": "open_browser",
"arguments": {
"initialUrl": "https://example.com"
}
}
}______________________________________________________________________
关闭浏览器
关闭现有的浏览器会话。
输入模式(或输入架构):
{
id: string // Session ID to close
}输出:
{
"success": true,
"message": "Browser session closed successfully"
}示例请求:
{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "close_browser",
"arguments": {
"id": "550e8400-e29b-41d4-a716-446655440000"
}
}
}______________________________________________________________________
导航到URL
将浏览器会话导航到特定的URL。
输入模式(或输入架构):
{
id: string, // Session ID
url: string // URL to navigate to
}输出:
{
"success": true,
"message": "Navigated to https://example.com",
"currentUrl": "https://example.com"
}示例请求:
{
"jsonrpc": "2.0",
"id": 3,
"method": "tools/call",
"params": {
"name": "navigate_to_url",
"arguments": {
"id": "550e8400-e29b-41d4-a716-446655440000",
"url": "https://example.com/?q=1"
}
}
}______________________________________________________________________
截取屏幕截图
在会话中捕获当前页面的PNG格式截图。
输入模式(或输入架构):
{
id: string // Session ID
}输出:
{
"success": true,
"message": "Screenshot captured successfully",
"mimeType": "image/png",
"dataBase64": "iVBORw0KGgoAAAANSUhEUgAA..."
}示例请求:
{
"jsonrpc": "2.0",
"id": 4,
"method": "tools/call",
"params": {
"name": "take_screenshot",
"arguments": {
"id": "550e8400-e29b-41d4-a716-446655440000"
}
}
}响应中包含了作为Base64编码PNG字符串的截图,两者均(包含此信息) content 数组(作为文本)以及在 structuredContent 带有额外元数据的对象。
______________________________________________________________________
获取页面内容
状态: 未实现
返回一个错误,指示该功能尚未实现。
输出:
{
"success": false,
"message": "Not implemented"
}______________________________________________________________________
项目结构
electro-puppeteer-mcp/
├── index.ts # Main application file
│ ├── Session Management # Map-based session storage with UUID keys
│ ├── HTTP Routes # Express REST API endpoints
│ ├── MCP Server # Model Context Protocol implementation
│ └── Electron Setup # App initialization and lifecycle
├── tests/
│ ├── http.test.ts # Integration tests for HTTP API
│ └── mcp.test.ts # Integration tests for MCP protocol
├── agents/ # Agent planning and artifacts
│ └── routes.plan.md # Refactoring plan documentation
├── dist/ # Compiled TypeScript output
├── package.json # Project dependencies and scripts
├── tsconfig.json # TypeScript configuration
└── biome.json # Biome linter/formatter configuration关键组件
会话管理
- 存储的会话位于
Map - 使用基于UUID的会话标识符
crypto.randomUUID() - 首次会话创建时的懒惰浏览器初始化
- 优雅地清理窗口,使用
window.close()
浏览器操作
HTTP和MCP接口之间共享的核心功能:
open(initialUrl?)- 创建新会话close(id)- 移除会话navigate(id, url)- 在会话中加载URLscreenshot(id)- 捕获PNG格式的屏幕截图fetch(id)- (未实现)提取页面内容
服务器架构
- 在Electron中的Puppeteer(PIE) 在应用程序准备好之前已初始化
- 快递 Electron准备就绪后服务器启动
- 所有窗口均已关闭 处理程序阻止应用程序退出(服务器模式)
- 端口3000 对于HTTP和MCP终端点均适用
______________________________________________________________________
有用的命令
发展
# Build TypeScript to JavaScript
npm run build
# Start the Electron application
npm start
# Stop the application
npm stop
# Run in development (build + start)
npm run build && npm start测试
# Run all integration tests
npm test
# Tests use real Electron/Puppeteer - no mocking
# Both test suites run sequentially with actual server instances代码质量
# Check linting and formatting
npm run lint
# Auto-format code
npm run format
# Biome handles both linting and formatting流程管理
# Kill any stuck Electron processes
pkill -f 'electron dist/index.js'
# Check if server is running
curl http://localhost:3000/status______________________________________________________________________
会话生命周期示例
HTTP API 流程
# 1. Start server
npm start
# 2. Create a new session
SESSION_ID=$(curl -s -X POST http://localhost:3000/sessions \
-H "Content-Type: application/json" \
-d '{"initialUrl": "https://example.com"}' \
| jq -r '.id')
echo "Created session: $SESSION_ID"
# 3. Navigate to a different page
curl -X POST http://localhost:3000/sessions/$SESSION_ID/navigate \
-H "Content-Type: application/json" \
-d '{"url": "https://example.com/?q=search"}'
# 4. Capture a screenshot
curl -X GET http://localhost:3000/sessions/$SESSION_ID/screenshot \
--output screenshot.png
# 5. Check server status
curl http://localhost:3000/status | jq
# 6. Close the session
curl -X DELETE http://localhost:3000/sessions/$SESSION_ID
# 7. Verify session is closed
curl http://localhost:3000/status | jq '.sessions.active'MCP协议流程
# 1. List available tools
curl -X POST http://localhost:3000/mcp \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-d '{"jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {}}'
# 2. Open browser with MCP
curl -X POST http://localhost:3000/mcp \
-H "Content-Type: application/json" \
-H "Accept: application/json, text/event-stream" \
-d '{
"jsonrpc": "2.0",
"id": 2,
"method": "tools/call",
"params": {
"name": "open_browser",
"arguments": {"initialUrl": "https://example.com"}
}
}'______________________________________________________________________
技术说明
Electron与Puppeteer的集成
- PIE(Electron中的Puppeteer) 必须打电话
pie.initialize(app)之前;在……之前app.whenReady() - 浏览器窗口是真正的Electron应用
BrowserWindow实例 - 通过Chrome DevTools协议连接的Puppeteer页面
- 全面访问页面评估、网络拦截和自动化功能
WSL2 考虑事项
在WSL2中出现的DBUS错误是预期之内的,不会影响功能:
ERROR:dbus/bus.cc:408] Failed to connect to the bus这些错误只是表面现象——在WSL2中,Electron在没有DBUS的情况下也能正常运行。
测试架构
- 实际集成测试 - 不进行嘲讽,真实的Electron进程
- 顺序执行 - 测试一次运行一个,以避免端口冲突
- 服务器生命周期 - 每个测试套件启动/停止服务器
- 时间安全(或“防时序攻击”) - 2秒的启动延迟确保服务器已准备好
______________________________________________________________________
配置
端口配置
默认端口是 3000. 改变,修改 index.ts:
const port = 3000浏览器选项
定制Electron BrowserWindow (在……中的)选项 browserOperations.open():
const window = new BrowserWindow({
width: 1280,
height: 720,
// Add more options here
})______________________________________________________________________
故障排除
服务器无法启动
# Check if port 3000 is in use
lsof -i :3000
# Kill any existing processes
npm stop测试失败
# Ensure no server is running
npm stop
# Clean build and retry
rm -rf dist/
npm run build
npm test内存问题
监控会话数量并关闭未使用的会话:
curl http://localhost:3000/status | jq '.sessions.active'______________________________________________________________________
做出贡献
- 遵循TypeScript严格模式指南
- 使用Biome进行代码格式化
npm run format) - 确保所有测试通过(
npm test) - 测试中不进行嘲讽(或模拟),使用真实的集成测试
- 更新README文件以说明新功能或API更改
______________________________________________________________________
许可证
详见LICENSE文件。
______________________________________________________________________
相关技术
- 电子 - 跨平台桌面应用程序
- Puppeteer(操控木偶的人/工具,根据上下文可具体翻译为“操控者”或“操控工具”,在此处保留原样以体现其作为特定术语的含义) - 无头Chrome自动化
- 在Electron中的Puppeteer(或:Electron版的Puppeteer) - PIE集成
- 快递 - Node.js的Web框架
- 模型上下文协议 - MCP规范
- 生物群系(或生物群落) - 快速的代码检查器和格式化工具
- Vitest - 快速单元测试框架
