使用说明

项目简介

Puppeteer MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，它利用 Puppeteer 库为大型语言模型 (LLM) 提供浏览器自动化功能。通过此服务器，LLM 可以与网页进行交互，例如浏览网页、填写表单、点击按钮、截取网页内容，甚至在浏览器环境中执行 JavaScript 代码。这使得 LLM 能够获取网络上的实时信息，并执行更复杂的基于 Web 的任务。

主要功能点

浏览器自动化控制: 允许 LLM 控制真实的浏览器环境（Chromium），执行各种网页操作。
网页导航: 使 LLM 能够访问指定的 URL，浏览网页内容。
元素交互: 支持模拟用户在网页上的点击、悬停、填写表单和选择下拉框等操作。
网页内容截取: 允许 LLM 截取整个网页或特定元素的屏幕截图。
JavaScript 执行: 支持在浏览器环境中执行 JavaScript 代码，获取动态网页信息或执行复杂操作。
控制台日志: 提供浏览器控制台输出的访问，方便调试和监控网页行为。
资源管理: 以资源的形式管理浏览器控制台日志和屏幕截图，LLM 可以通过标准化的方式访问这些资源。

安装步骤

Docker 镜像 (推荐)

确保您的系统已安装 Docker。

使用 Docker 命令构建镜像：

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

(请注意，您需要在包含 'Dockerfile' 的目录下执行此命令，通常是仓库的根目录)

NPX (Node.js 环境)

确保您的系统已安装 Node.js 和 npm。
您无需手动安装，MCP 客户端在配置服务器时会自动下载和运行。

服务器配置

MCP 客户端 (如 Claude Desktop) 需要配置才能连接到 Puppeteer MCP Server。以下是两种配置方式，选择其一添加到您的 MCP 客户端配置中。

Docker 配置

使用 Docker 镜像运行服务器，无需额外安装，环境隔离性好。

{
  "mcpServers": {
    "puppeteer": {
      "command": "docker",  // 启动服务器的命令，这里使用 docker
      "args": [             // 命令参数
        "run",             // docker run 命令
        "-i",              // 保持 STDIN 打开
        "--rm",            // 容器退出时自动删除
        "--init",          // 使用 init 进程
        "-e",              // 设置环境变量
        "DOCKER_CONTAINER=true", // 容器内环境变量，可选
        "mcp/puppeteer"     // Docker 镜像名称
      ]
    }
  }
}

NPX 配置

使用 NPX 运行服务器，依赖 Node.js 环境，更轻便，但需要确保 Node.js 环境配置正确。

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",  // 启动服务器的命令，这里使用 npx
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"] // npx 命令参数，自动安装并运行 @modelcontextprotocol/server-puppeteer 包
    }
  }
}

注意: 请将以上 JSON 配置代码段添加到您的 MCP 客户端的服务器配置中，例如 Claude Desktop 的 'config.json' 文件。'"puppeteer"' 是您为该服务器自定义的名称，可以根据需要修改。

基本使用方法

启动服务器: 根据您选择的配置方式（Docker 或 NPX），MCP 客户端会在需要时自动启动 Puppeteer MCP Server。
LLM 调用工具: 在 LLM 应用中，您可以指示 LLM 调用以下工具来操作浏览器：
- 'puppeteer_navigate': 导航到指定 URL。
- 'puppeteer_screenshot': 截取网页截图。
- 'puppeteer_click': 点击网页元素。
- 'puppeteer_fill': 填写表单输入框。
- 'puppeteer_select': 选择下拉框选项。
- 'puppeteer_hover': 鼠标悬停在网页元素上。
- 'puppeteer_evaluate': 执行 JavaScript 代码。调用工具时，需要根据工具的 'inputSchema' 提供相应的参数，例如，调用 'puppeteer_navigate' 时需要提供 'url' 参数。
访问资源: LLM 可以通过以下 URI 访问服务器提供的资源：
- 'console://logs': 获取浏览器控制台日志。
- 'screenshot://<name>': 获取名为 '<name>' 的屏幕截图（'<name>' 是您在调用 'puppeteer_screenshot' 工具时指定的名称）。

示例: 您可以指示 LLM 执行类似 "打开 https://www.example.com 网站，然后截取整个页面的屏幕截图并命名为 homepage" 的任务。LLM 客户端会解析指令，调用 'puppeteer_navigate' 工具导航到指定网址，然后调用 'puppeteer_screenshot' 工具截取屏幕截图，并将截图作为资源提供给 LLM。

关键词