🚀 可配置 Puppeteer MCP 服务器

这是一个基于 Puppeteer 实现浏览器自动化能力的 Model Context Protocol 服务器，提供了可配置选项。该服务器让大语言模型能够与网页进行交互、截取屏幕截图以及执行 JavaScript 代码，可在真实的浏览器环境中运行，还支持通过环境变量来自定义 Puppeteer 的启动选项。

🚀 快速开始

本服务器具备丰富的工具和资源，能实现浏览器自动化等多种功能，下面为您详细介绍。

✨ 主要特性

• 浏览器自动化：可实现网页的自动化操作，如导航、点击、表单填充等。
• 控制台日志监控：能监控浏览器控制台输出的日志信息。
• 屏幕截图能力：支持截取整个页面或特定元素的屏幕截图。
• JavaScript 执行：可在浏览器控制台执行 JavaScript 代码。
• 基本网页交互：提供导航、点击、表单填充等基本的网页交互功能。
• 通过环境变量配置 Puppeteer 选项：可通过环境变量自定义 Puppeteer 的启动选项，灵活定制浏览器行为。

📦 安装指南

文档中未提及具体安装步骤，您可根据相关依赖和环境要求进行安装。

💻 使用示例

工具使用示例

本服务器提供了多种工具，以下为您介绍各工具的使用方式：

puppeteer_navigate

此工具可使浏览器导航到任意 URL。

• 输入：url（字符串） 示例代码如下：

{
  "name": "puppeteer_navigate",
  "parameters": {
    "url": "https://www.example.com"
  }
}

puppeteer_screenshot

该工具用于截取整个页面或特定元素的屏幕截图。

• 输入：
  • name（字符串，必需）：屏幕截图名称
  • selector（字符串，可选）：CSS 选择器用于截取元素
  • width（数字，可选，默认值：800）：截图宽度
  • height（数字，可选，默认值：600）：截图高度 示例代码如下：

{
  "name": "puppeteer_screenshot",
  "parameters": {
    "name": "example_screenshot",
    "selector": "body",
    "width": 1280,
    "height": 800
  }
}

puppeteer_click

此工具可点击页面上的元素。

• 输入：selector（字符串）：要点击的元素的 CSS 选择器 示例代码如下：

{
  "name": "puppeteer_click",
  "parameters": {
    "selector": "button#submit"
  }
}

puppeteer_hover

该工具可使鼠标悬停在页面上的元素上。

• 输入：selector（字符串）：要悬停的元素的 CSS 选择器 示例代码如下：

{
  "name": "puppeteer_hover",
  "parameters": {
    "selector": "a#hover-link"
  }
}

puppeteer_fill

此工具用于填充表单字段。

• 输入：
  • selector（字符串）：输入字段的 CSS 选择器
  • value（字符串）：要填充的值 示例代码如下：

{
  "name": "puppeteer_fill",
  "parameters": {
    "selector": "input#username",
    "value": "example_user"
  }
}

puppeteer_select

该工具用于选择具有 SELECT 标记的元素。

• 输入：
  • selector（字符串）：要选择的元素的 CSS 选择器
  • value（字符串）：要选择的值 示例代码如下：

{
  "name": "puppeteer_select",
  "parameters": {
    "selector": "select#country",
    "value": "US"
  }
}

puppeteer_evaluate

此工具可在浏览器控制台执行 JavaScript 代码。

• 输入：script（字符串）：要执行的 JavaScript 代码 示例代码如下：

{
  "name": "puppeteer_evaluate",
  "parameters": {
    "script": "console.log('Hello, World!')"
  }
}

资源使用示例

服务器提供了两种类型的资源，以下为您介绍其使用方式：

控制台日志 (console://logs)

此资源为浏览器控制台输出的文本格式，包含所有来自浏览器的控制台消息。您可通过以下方式访问：

{
  "name": "get_console_logs",
  "parameters": {
    "resource": "console://logs"
  }
}

屏幕截图 (screenshot://<name>)

此资源为 PNG 格式的页面截图，可通过截取时指定的屏幕截图名称访问。示例代码如下：

{
  "name": "get_screenshot",
  "parameters": {
    "resource": "screenshot://example_screenshot"
  }
}

📚 详细文档

配置说明

使用自定义 Puppeteer 选项

您可以通过在 PUPPETEER_ARGS 环境变量中提供一个 JSON 字符串来配置 Puppeteer 启动选项，从而在不修改服务器代码的情况下自定义浏览器行为。

示例：使用 Firefox 而不是 Chrome

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer"],
      "env": {
        "PUPPETEER_ARGS": "{\"browser\": \"firefox\"}"
      }
    }
  }
}

示例：配置浏览器窗口大小

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer"],
      "env": {
        "PUPPETEER_ARGS": "{\"defaultViewport\": {\"width\": 1280, \"height\": 800}}"
      }
    }
  }
}

标准配置

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "github:afshawnlotfi/mcp-configurable-puppeteer"]
    }
  }
}

📄 许可证

此项目采用 MIT 许可证。