浏览器自动化服务器

一个基于Puppeteer的浏览器自动化服务器,提供网页交互、截图和JavaScript执行功能,适用于本地和云端环境。

  • by code-craka
  • TypeScript
  • 本地部署
  • 5 星标
  • 更新于
在 GitHub 查看 code-craka/puppeteer-mcp

使用说明

木偶MCP服务器

一个全面的模型上下文协议(MCP)服务器,使用Puppeteer提供浏览器自动化功能。此服务器使大型语言模型(LLM)能够在本地和云环境中与网页交互、截图和执行JavaScript。

🚀 特性

核心能力

  • 浏览器自动化:导航、单击、填写表单并与网页交互
  • 电脑屏幕截图工具:截取整页或特定元素的屏幕截图
  • JavaScript执行:在浏览器上下文中运行自定义脚本
  • 控制台监控:捕获和访问浏览器控制台日志
  • 资源管理:存储和检索屏幕截图和日志
  • 安全控制:可配置的危险参数过滤

部署选项

  • 地方发展:与Chromium直接集成Puppeter
  • Docker容器:支持ARM64的容器化部署
  • Cloudflare员工:使用外部浏览器服务进行云部署

📦 安装与使用

方案1:NPX(建议用于当地发展)

npx -y @modelcontextprotocol/server-puppeteer

选项2:Docker

docker run -i --rm --init -e DOCKER_CONTAINER=true puppeteer-mcp

选项3:从源代码构建

git clone https://github.com/code-craka/puppeteer-mcp.git
cd puppeteer-mcp
npm install
npm run build
node dist/index.js

🛠️ 可用工具

导航与交互

  • puppeteer_navigate -导航到具有可选启动选项的URL
  • puppeteer_click -使用CSS选择器单击元素
  • puppeteer_hover -将鼠标悬停在元素上
  • puppeteer_fill -填写输入字段和表单
  • puppeteer_select -选择下拉选项

内容和自动化

  • puppeteer_screenshot -捕获页面或元素截图
  • puppeteer_evaluate -在浏览器上下文中执行JavaScript

资源

  • console://logs -访问浏览器控制台输出
  • screenshot://<name> -检索捕获的屏幕截图

🔧 配置

Claude桌面配置

添加到您的 claude_desktop_config.json:

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Docker配置

{
  "mcpServers": {
    "puppeteer": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "-e", "DOCKER_CONTAINER=true", "puppeteer-mcp"]
    }
  }
}

环境变量

  • PUPPETEER_LAUNCH_OPTIONS -JSON编码的浏览器启动选项
  • ALLOW_DANGEROUS -启用危险的浏览器参数(默认值:false)
  • DOCKER_CONTAINER -集装箱检测标志

浏览器启动选项

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"],
      "env": {
        "PUPPETEER_LAUNCH_OPTIONS": "{\"headless\": false, \"args\": [\"--no-sandbox\"]}",
        "ALLOW_DANGEROUS": "true"
      }
    }
  }
}

🏗️ 发展

地方发展

# Clone the repository
git clone https://github.com/code-craka/puppeteer-mcp.git
cd puppeteer-mcp

# Install dependencies
npm install

# Development with watch mode
npm run watch

# Build for production
npm run build

Docker开发

# Build Docker image
docker build -t puppeteer-mcp .

# Run with environment variables
docker run -i --rm --init \
  -e DOCKER_CONTAINER=true \
  -e PUPPETEER_LAUNCH_OPTIONS='{"headless":true}' \
  puppeteer-mcp

☁️ Cloudflare员工部署

🚀 现场生产部署

实时URL: https://puppeteer.techsci.dev

我们的Puppeteer MCP服务器已成功部署在Cloudflare Workers上,并与Browserless.io集成。

✅ 部署状态

  • 状态:实时和可操作
  • 浏览器服务:已连接无浏览器.io
  • API调用:截图正常工作✅
  • 可用工具:6个浏览器自动化工具
  • 响应时间:平均约1-2秒

🛠️ 部署您自己的

cd cloudflare-worker
npm install                # Installs Wrangler v4.22.0 + secure dependencies
npx wrangler login
echo "YOUR_BROWSERLESS_TOKEN" | npx wrangler secret put BROWSERLESS_TOKEN
npm run build             # Compile TypeScript to dist/index.js
npm run deploy           # Deploy using latest Wrangler v4.22.0

🧪 测试实时部署

# Test tools listing
curl -X POST https://puppeteer.techsci.dev \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/list","id":"test"}'

# Test screenshot capture
curl -X POST https://puppeteer.techsci.dev \
  -H "Content-Type: application/json" \
  -d '{"jsonrpc":"2.0","method":"tools/call","params":{"name":"browser_screenshot","arguments":{"name":"test","url":"https://example.com"}},"id":"test"}'

💰 生产成本

  • Cloudflare员工:100000次请求/天免费
  • 浏览器.io:每秒浏览器使用约0.0025美元
  • 月度估算:适度使用10-50美元

看 Cloudflare Worker自述 有关详细的设置说明。

🔐 安全

默认安全措施

  • 默认情况下会过滤危险的浏览器参数
  • 通过环境变量配置安全级别
  • Docker容器中的无头模式
  • 不同部署环境的范围权限
  • 最新动态:所有依赖关系都已更新,0个安全漏洞
  • 安全构建:esbuild v0.25.0+和Wrangler v4.22.0,带有最新补丁

危险参数(默认过滤)

  • --no-sandbox
  • --disable-setuid-sandbox
  • --single-process
  • --disable-web-security
  • --ignore-certificate-errors

覆盖 ALLOW_DANGEROUS=true 环境变量。

📋 例子

基本屏幕截图

{
  "name": "puppeteer_screenshot",
  "arguments": {
    "name": "example-page",
    "width": 1280,
    "height": 720
  }
}

导航和交互

{
  "name": "puppeteer_navigate",
  "arguments": {
    "url": "https://example.com",
    "launchOptions": {
      "headless": false
    }
  }
}

执行JavaScript

{
  "name": "puppeteer_evaluate",
  "arguments": {
    "script": "return document.title;"
  }
}

📊 建筑

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   MCP Client    │    │  Puppeteer MCP   │    │   Browser       │
│  (Claude, etc.) │◄──►│     Server       │◄──►│  (Chromium)     │
└─────────────────┘    └──────────────────┘    └─────────────────┘
                                │
                                ▼
                       ┌──────────────────┐
                       │  Cloud Services  │
                       │ (Browserless.io) │
                       └──────────────────┘

🤝 贡献

  1. 分叉存储库
  2. 创建要素分支: git checkout -b feature/amazing-feature
  3. 提交您的更改: git commit -m 'Add amazing feature'
  4. 推到分支: git push origin feature/amazing-feature
  5. 打开拉取请求

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

🙏 致谢

🔗 相关项目

📞 支持

🏷️ 版本历史记录

  • v1.0.0 -初始版本支持本地Puppeteer
  • v1.1.0版本 -添加了Docker支持和ARM64兼容性
  • v1.2.0版本 -Cloudflare Workers与外部浏览器服务的适应
  • v1.3.0版本 - ✅ 现场生产部署 -通过Browserless.io集成成功部署在Cloudflare Workers上,经过测试并确认工作正常
  • v1.4.0版本 - 🔒 安全与性能更新 -将Wrangler更新到v4.22.0,修复了esbuild漏洞,添加了可观察性日志,解决了所有npm审计问题(0个漏洞)

作者: 赛义德·阿卜杜拉·里汉
许可证:MIT
仓库: github上的code-craka/puiteer-mcp