Token导航 LogoToken导航TokenDH.com
Electro Puppeteer MCP logo
浏览器工具未说明官方级别未说明来源级核验

Electro Puppeteer MCP

MCP Server

一个基于Electron和Puppeteer的浏览器自动化管理工具,提供HTTP REST API和MCP协议接口,支持多会话管理和实时浏览器自动化操作。

工具数

0

提示词数

0

GitHub Stars

1

资源数

0
浏览器自动化TypeScriptAPI集成

安装说明

本站只整理中文说明和来源信息,不托管安装包,也不代用户安装。

作者 / 组织

3p3r

提供方

3p3r

最后核验

2026/5/17 20:22

快速接入

先看主来源和安装命令,再打开仓库或文档;下面只保留这个条目的关键接入事实。

详细介绍

电子操控者-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 start

API 文档

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"
}

可以提供任何标准的请求字段: methodheadersbody (作为UTF-8字符串或Base64编码) bodyEncoding) redirectcredentialscachemodereferrerreferrerPolicyintegritykeepalive.

回答: 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) - 在会话中加载URL
  • screenshot(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'

______________________________________________________________________

做出贡献

  1. 遵循TypeScript严格模式指南
  2. 使用Biome进行代码格式化npm run format)
  3. 确保所有测试通过(npm test)
  4. 测试中不进行嘲讽(或模拟),使用真实的集成测试
  5. 更新README文件以说明新功能或API更改

______________________________________________________________________

许可证

详见LICENSE文件。

______________________________________________________________________

相关技术

目录标签

目录标签

浏览器自动化TypeScriptAPI集成本地部署多会话管理RESTAPIMCP协议Electron应用

接入字段

传输方式(transport,传输协议)

未说明

鉴权方式(authType,认证方式)

session

工具数量(toolCount,工具数)

0

资源数量(resourceCount,资源数)

0

提示词数量(promptCount,提示词数)

0

权限和风险

未说明session部署方式未说明

接入前请确认传输方式、认证方式和部署位置,并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限;先核对安装命令和配置内容。

仍需确认:installCommand

来源信息

继续浏览同类 MCP