关键词

浏览器自动化网页操作Puppeteer截图JavaScript执行Linux服务器

使用说明

项目简介

MCP-Puppeteer-Linux 是一个实现了 Model Context Protocol (MCP) 的服务器，它利用 Puppeteer 库提供浏览器自动化功能。这意味着大型语言模型 (LLM) 可以通过这个服务器来控制真实的浏览器，执行网页导航、截图、点击、填写表单、执行 JavaScript 等操作。此版本特别增强了对 Linux 显示服务器（X11 和 Wayland）的支持，使其在 Linux 环境下更加稳定可靠。

主要功能点

  • 浏览器自动化: 允许 LLM 控制浏览器执行各种网页操作。
  • 丰富的工具: 提供一系列预定义的工具，例如：
    • 网页导航 (puppeteer_navigate)
    • 网页截图 (puppeteer_screenshot，支持全页或元素截图)
    • 元素点击 (puppeteer_click)
    • 表单填写 (puppeteer_fill)
    • 下拉框选择 (puppeteer_select)
    • 元素悬停 (puppeteer_hover)
    • 执行 JavaScript 代码 (puppeteer_evaluate)
  • 资源访问: 提供两种资源供 LLM 读取：
    • 浏览器控制台日志 (console://logs)
    • 网页截图 (screenshot://<name>)
  • Linux 显示服务器支持: 自动检测和配置 X11 和 Wayland 环境，无需手动设置显示相关的环境变量。
  • 易于安装和配置: 可以通过 Smithery 自动安装，也可以手动安装。

安装步骤

手动安装 (推荐手动安装，步骤清晰，方便理解)

  1. 克隆仓库: 打开终端，执行以下命令克隆仓库到本地：

    git clone https://github.com/PhialsBasement/MCP-Puppeteer-Linux.git
cd MCP-Puppeteer-Linux

  2. 安装依赖: 在仓库目录下，执行以下命令安装项目依赖：

    npm install

    确保你的环境中已经安装了 Node.js 和 npm。

  3. 启动服务器: 在仓库目录下，执行以下命令启动 MCP 服务器：

    ts-node index.ts

    如果你的环境中没有全局安装 'ts-node'，可以先执行 'npm install -g ts-node' 安装。

通过 Smithery 安装 (可选，适用于 Claude Desktop 用户)

如果你是 Claude Desktop 用户，可以使用 Smithery 自动安装：

npx -y @smithery/cli install @PhialsBasement/mcp-puppeteer-linux --client claude

此方法需要安装 Smithery CLI。

服务器配置

MCP 服务器需要配置在 MCP 客户端中才能使用。以下是 Claude Desktop 客户端的配置示例，其他 MCP 客户端的配置方式类似。

在 Claude Desktop 的配置文件中 (通常是 JSON 格式)，添加 'mcpServers' 配置项，示例如下：

{
  "mcpServers": {
    "puppeteer": {  // 服务器名称，可以自定义，例如 "browser_automation"
      "command": "npx",  // 启动服务器的命令，这里使用 npx
      "args": ["ts-node", "/path/to/index.ts"] // 启动服务器的参数，ts-node 用于执行 TypeScript 代码，/path/to/index.ts 需要替换为 index.ts 文件的实际路径
    }
  }
}

配置说明:

  • '"puppeteer"': 是服务器的名称，可以自定义，在客户端中用于标识和调用这个服务器。
  • '"command": "npx"': 指定了启动服务器的命令为 'npx'。'npx' 是 npm 包管理器自带的命令，用于执行本地安装的 npm 包。
  • '"args": ["ts-node", "/path/to/index.ts"]': 指定了传递给 'npx' 命令的参数。
    • '"ts-node"': 使用 'ts-node' 命令来直接运行 TypeScript 代码，无需先编译成 JavaScript。
    • '"/path/to/index.ts"': 需要将 '/path/to/index.ts' 替换为 'index.ts' 文件的实际绝对路径。 例如，如果你的 'index.ts' 文件在 '/home/user/MCP-Puppeteer-Linux/index.ts'，则应该配置为 '"/home/user/MCP-Puppeteer-Linux/index.ts"'。你可以使用 'pwd' 命令查看当前目录，然后拼接出完整路径。

确保将 '/path/to/index.ts' 替换为 'index.ts' 文件的实际路径，否则客户端将无法找到并启动 MCP 服务器。

基本使用方法

  1. 启动 MCP 服务器: 按照上面的安装步骤启动服务器。服务器成功启动后，通常会在终端显示一些日志信息，例如 X11 环境的检测结果。

  2. 配置 MCP 客户端: 在你的 MCP 客户端（例如 Claude Desktop）中，配置上面提供的 'mcpServers' 配置，确保配置中的 'command' 和 'args' 正确指向 MCP 服务器的启动脚本。

  3. 在 LLM 中使用工具和资源: 当 MCP 客户端连接到 MCP 服务器后，LLM 就可以通过客户端调用服务器提供的工具 (例如 'puppeteer_navigate', 'puppeteer_screenshot' 等) 来控制浏览器，并访问服务器提供的资源 (例如 'console://logs', 'screenshot://<name>' 等)。

    具体的调用方式取决于你使用的 MCP 客户端和 LLM 应用。通常，你需要告知 LLM 可以使用哪些工具，并提供工具所需的参数。例如，你可以指示 LLM 使用 'puppeteer_screenshot' 工具来截取某个网页的截图，并指定截图的名称。

    示例工具调用 (非代码，用于理解):

    假设你希望 LLM 使用 'puppeteer_navigate' 工具导航到 'https://www.example.com'，客户端发送给 MCP 服务器的请求可能类似于：

    {
  "jsonrpc": "2.0",
  "method": "call_tool",
  "params": {
    "name": "puppeteer_navigate",
    "arguments": {
      "url": "https://www.example.com"
    }
  },
  "id": 1
}

    服务器会执行导航操作，并返回结果给客户端，客户端再将结果传递给 LLM。

    示例资源访问 (非代码，用于理解):

    假设你希望 LLM 读取名为 "my_screenshot" 的截图资源，客户端发送给 MCP 服务器的请求可能类似于：

    {
  "jsonrpc": "2.0",
  "method": "read_resource",
  "params": {
    "uri": "screenshot://my_screenshot"
  },
  "id": 2
}

    服务器会读取截图资源，并返回给客户端，客户端再将资源传递给 LLM。

请参考 MCP 客户端的文档，了解如何在 LLM 应用中集成和使用 MCP 服务器提供的工具和资源。

信息

分类

开发者工具

访问项目