AI导哈

浏览器自动化工具

一个基于Puppeteer的浏览器自动化工具，提供网页截图、设备模拟和MCP协议支持等功能。

  • by pranjalll-k
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 pranjalll-k/browser-automation-mcp

使用说明

浏览器自动化MCP

使用Puppeteer构建的强大浏览器自动化工具，可捕获具有高级功能的网页快照，包括隐形模式、设备模拟和全面的MCP（模型上下文协议）支持。

特性

高级Web自动化

  • 可配置格式（PNG、JPEG）的高质量屏幕截图
  • 响应式设备模拟（台式机、移动设备、平板电脑）
  • 仅捕获整页或视口
  • 机器人检测旁路的隐形模式
  • 动态内容加载的可配置等待时间

MCP集成

  • JSON-RPC 2.0完全支持模型上下文协议
  • 便于集成的HTTP端点
  • 支持CORS的RESTful API
  • ngrok隧道供公众使用
  • 平台已准备好进行外部MCP集成

隐形与安全

  • Puppeteer额外隐形插件集成
  • 机器人检测绕过功能
  • 无头浏览器自动化
  • 安全的文件处理和输出管理

安装

npm install

依赖项

  • 操纵者：浏览器自动化
  • 木偶师额外：增强Puppeter功能
  • puppeteer额外插件隐形：机器人检测旁路
  • 表达：HTTP服务器框架
  • 跨域资源共享：跨源资源共享
  • @模型上下文协议/sdk：MCP协议实施
  • 吸烟：公共隧道创建

用法

基本快照捕获

const BrowserSnapshotAgent = require('./index.js');

const agent = new BrowserSnapshotAgent({
    outputDir: './snapshots',
    waitTime: 3000,
    stealth: true,
    format: 'png'
});

await agent.captureSnapshot('https://example.com', {
    device: 'desktop',
    fullPage: true,
    stealth: true
});

快速开始

1.克隆和安装

git clone https://github.com/pranjalll-k/browser-automation-mcp.git
cd browser-automation-mcp
npm install

2.启动MCP服务器

node mcp-http-server.js

服务器将在端口3000上启动并显示：

MCP Browser Snapshot Server running on port 3000

3.测试服务器

验证服务器是否正常工作：

curl http://localhost:3000/health

您应该看到： {"status":"healthy","timestamp":"..."}

服务器端点

服务器在端口3000上运行，并提供以下端点：

MCP协议端点

  • POST /mcp/initialize -初始化MCP连接
  • POST /mcp/tools/list -列出可用工具
  • POST /mcp/tools/call -执行工具调用

REST API端点

  • POST /capture-screenshot -截图
  • POST /capture-snapshot -捕获快照（别名）
  • GET /health -健康检查

API使用示例

# Capture a desktop screenshot
curl -X POST http://localhost:3000/capture-screenshot \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "device": "desktop",
    "fullPage": true,
    "stealth": true,
    "waitTime": 3000
  }'

# Capture a mobile screenshot
curl -X POST http://localhost:3000/capture-screenshot \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "device": "mobile",
    "stealth": true,
    "waitTime": 2000
  }'

设备配置

代理支持多种设备预设：

  • 桌面：1920x1080分辨率
  • 移动的：375x667分辨率（iPhone 8）
  • 药片，平板：768x1024分辨率（iPad）
  • 移动景观：667x375分辨率
  • 桌面景观：1024x768分辨率

配置选项

选项 类型 默认值 描述
outputDir 字符串 './snapshots' 保存截图的目录
waitTime 编号 3000 捕获前的等待时间（ms）
fullPage 布尔值 true 仅捕获整个页面或视口
format 字符串 'png' 图像格式（png/jpeg）
quality 编号 90 JPEG质量（1-100）
stealth 布尔值 false 启用隐身模式

MCP集成

该项目实施了模型上下文协议（MCP），以实现与人工智能平台的无缝集成。MCP服务器提供：

可用工具

  1. capture_screenshot

    • 描述：捕获网页截图
    • 参数：url、设备、fullPage、waitTime、隐身、outputDir

  2. capture_snapshot

    • 描述：capture_screenshot的别名
    • 参数：与capture_screenshot相同

JSON-RPC 2.0支持

服务器通过正确的JSON-RPC 2.0响应完全实现了MCP规范：

{
  "jsonrpc": "2.0",
  "id": "request-id",
  "result": {
    "content": [
      {
        "type": "text",
        "text": "Screenshot captured successfully"
      }
    ]
  }
}

公众访问与ngrok

要使本地服务器可从外部平台访问，请执行以下操作：

安装ngrok

# macOS with Homebrew
brew install ngrok

# Or download from https://ngrok.com/download

创建公共隧道

  1. 启动MCP服务器： node mcp-http-server.js
  2. 在另一个终端中： ngrok http 3000
  3. 从ngrok输出中复制HTTPS URL

ngrok输出示例：

Forwarding  https://abc123.ngrok-free.app -> http://localhost:3000

使用HTTPS URL(https://abc123.ngrok-free.app)作为您的公共MCP端点。

测试

运行综合测试

node comprehensive-test.js

手动测试

测试截图：

curl -X POST http://localhost:3000/capture-screenshot \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "device": "desktop",
    "stealth": true
  }'

测试移动捕捉：

curl -X POST http://localhost:3000/capture-screenshot \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "device": "mobile",
    "stealth": true
  }'

测试覆盖率

  • 基本截图功能
  • 设备仿真
  • 隐形模式操作
  • 错误处理
  • 不同的图像格式
  • 各种等待时间
  • 全屏与视口捕获

文件结构

browser-automation-mcp/
├── index.js                 # Core BrowserSnapshotAgent class
├── mcp-http-server.js       # MCP HTTP server implementation
├── mcp-server-complete.js   # Complete MCP server example
├── comprehensive-test.js    # Test suite
├── package.json            # Project configuration
├── README.md              # This file
└── snapshots/             # Output directory for screenshots

错误处理

该代理包括以下全面的错误处理：

  • URL无效
  • 网络超时
  • Puppeter发射失败
  • 文件系统错误
  • MCP协议错误

所有错误的格式都正确，并返回相应的HTTP状态代码。

性能优化

  • 可配置的超时可防止挂起操作
  • 浏览器实例得到妥善管理和清理
  • 隐形模式是可选的，可以平衡性能与探测规避
  • 带有时间戳的高效文件命名可防止冲突

许可证

MIT许可证

贡献

欢迎投稿！请确保在提交pull请求之前通过所有测试。

作者

Pranjall.k

支持

有关问题和疑问，请查看此存储库中提供的全面测试套件和示例实现。

由pranjall.k构建，用于高级浏览器自动化和MCP集成

相关 MCP