Puppeteer

一个基于Puppeteer的模型上下文协议(MCP)服务器，提供浏览器自动化功能。该服务器使大型语言模型(LLM)能够与网页交互、截取屏幕截图并在真实浏览器环境中执行JavaScript。

[！注意]
由于此服务器在您的机器上运行浏览器，它可以访问本地文件和本地/内部IP地址。使用此MCP服务器时请务必谨慎，确保不会泄露任何敏感数据。

组件

工具

• puppeteer_navigate（导航工具）

  • 在浏览器中导航到任意URL
  • 输入参数：
    • url（字符串，必填）：要导航到的URL
    • launchOptions（对象，可选）：PuppeteerJS的启动选项。默认为null。如果更改且不为null，浏览器将重启。示例：{ headless: true, args: ['--user-data-dir="C:/Data"'] }
    • allowDangerous（布尔值，可选）：允许降低安全性的危险启动选项。当为false时，像--no-sandbox、--disable-web-security这样的危险参数会抛出错误。默认为false。

• puppeteer_screenshot（截图工具）

  • 截取整个页面或特定元素的屏幕截图
  • 输入参数：
    • name（字符串，必填）：截图的名称
    • selector（字符串，可选）：要截图的元素的CSS选择器
    • width（数字，可选，默认：800）：截图宽度
    • height（数字，可选，默认：600）：截图高度
    • encoded（布尔值，可选）：如果为true，则将截图作为base64编码的数据URI（文本形式）捕获，而不是二进制图像内容。默认为false。

• puppeteer_click（点击工具）

  • 点击页面上的元素
  • 输入参数：selector（字符串）：要点击的元素的CSS选择器

• puppeteer_hover（悬停工具）

  • 在页面元素上悬停
  • 输入参数：selector（字符串）：要悬停的元素的CSS选择器

• puppeteer_fill（填充工具）

  • 填写输入字段
  • 输入参数：
    • selector（字符串）：输入字段的CSS选择器
    • value（字符串）：要填写的值

• puppeteer_select（选择工具）

  • 选择带有SELECT标签的元素
  • 输入参数：
    • selector（字符串）：要选择的元素的CSS选择器
    • value（字符串）：要选择的值

• puppeteer_evaluate（执行工具）

  • 在浏览器控制台中执行JavaScript
  • 输入参数：script（字符串）：要执行的JavaScript代码

资源

服务器提供两种类型的资源访问：

1. 控制台日志（console://logs）

   • 浏览器控制台输出的文本格式
   • 包含浏览器的所有控制台消息

2. 屏幕截图（screenshot://<name>）

   • 捕获的PNG格式屏幕截图
   • 可通过捕获时指定的截图名称访问

主要功能

• 浏览器自动化
• 控制台日志监控
• 屏幕截图功能
• JavaScript执行
• 基本网页交互（导航、点击、表单填写）
• 可定制的Puppeteer启动选项

使用Puppeteer服务器的配置

与Claude Desktop一起使用

以下是使用Puppeteer服务器的Claude Desktop配置：

Docker

注意：Docker实现将使用无头Chromium，而NPX版本将打开浏览器窗口。

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

NPX

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

与VS Code一起使用

要快速安装，请使用下面的其中一个一键安装按钮...

对于手动安装，请将以下JSON块添加到VS Code的用户设置(JSON)文件中。您可以通过按Ctrl + Shift + P并输入Preferences: Open User Settings (JSON)来执行此操作。

或者，您可以将其添加到工作区中的.vscode/mcp.json文件中。这将允许您与他人共享配置。

注意：在.vscode/mcp.json文件中不需要mcp键。

对于NPX安装（打开浏览器窗口）：

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

对于Docker安装（使用无头Chromium）：

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

启动选项

您可以通过两种方式自定义Puppeteer的浏览器行为：

1. 环境变量：在MCP配置的env参数中设置PUPPETEER_LAUNCH_OPTIONS为JSON编码的字符串：

   {
     "mcpServers": {
       "mcp-puppeteer": {
         "command": "npx",
         "args": ["-y", "@modelcontextprotocol/server-puppeteer"],
         "env": {
           "PUPPETEER_LAUNCH_OPTIONS": "{ \"headless\": false, \"executablePath\": \"C:/Program Files/Google/Chrome/Application/chrome.exe\", \"args\": [] }",
           "ALLOW_DANGEROUS": "true"
         }
       }
     }
   }
   

2. 工具调用参数：将launchOptions和allowDangerous参数传递给puppeteer_navigate工具：

   {
     "url": "https://example.com",
     "launchOptions": {
       "headless": false,
       "defaultViewport": { "width": 1280, "height": 720 }
     }
   }
   

构建

Docker构建：

docker build -t mcp/puppeteer -f src/puppeteer/Dockerfile .

许可证

此MCP服务器根据MIT许可证授权。这意味着您可以在MIT许可证的条款和条件下自由使用、修改和分发该软件。有关详细信息，请参阅项目存储库中的LICENSE文件。