JinDaGe - mcp-configurable-puppeteer MCP Details

article

README

🚀 可配置 Puppeteer MCP 服务器

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

🚀 快速开始

本服务器为大语言模型提供了与网页交互的能力，您可以根据实际需求配置 Puppeteer 选项，从而实现不同的功能。以下将详细介绍服务器的组件、资源、关键功能、配置方法以及许可证信息。

✨ 主要特性

浏览器自动化：能够自动完成浏览器中的各种操作。
控制台日志监控：可监控浏览器控制台输出的日志信息。
屏幕截图能力：支持截取整个页面或特定元素的屏幕截图。
JavaScript 执行：能在浏览器控制台执行 JavaScript 代码。
基本网页交互：包括导航、点击、表单填充等操作。
通过环境变量配置 Puppeteer 选项：可在不修改服务器代码的情况下自定义浏览器行为。

📦 安装指南

文档中未提及具体安装步骤，您可参考代码仓库中的相关说明进行安装。

💻 使用示例

基础用法

服务器提供了多种工具来实现不同的功能，以下是部分工具的使用示例：

puppeteer_navigate

# 浏览器导航到任意 URL
# 输入：url（字符串）
# 示例代码保持原始格式，这里仅作示意，实际需根据具体调用方式使用
# 假设调用函数名为 call_puppeteer_navigate
call_puppeteer_navigate(url="https://example.com")

puppeteer_screenshot

# 截取整个页面或特定元素的屏幕截图
# 输入：
# - name（字符串，必需）：屏幕截图名称
# - selector（字符串，可选）：CSS 选择器用于截取元素
# - width（数字，可选，默认值：800）：截图宽度
# - height（数字，可选，默认值：600）：截图高度
# 假设调用函数名为 call_puppeteer_screenshot
call_puppeteer_screenshot(name="example_screenshot", selector=".example-element", width=1024, height=768)

高级用法

配置 Puppeteer 选项

您可以通过环境变量 PUPPETEER_ARGS 来配置 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}}"
      }
    }
  }
}

📚 详细文档

组件

工具

| 工具名称 | 功能 | 输入参数 | | ---- | ---- | ---- | | puppeteer_navigate | 浏览器导航到任意 URL | url（字符串） | | puppeteer_screenshot | 截取整个页面或特定元素的屏幕截图 | name（字符串，必需）：屏幕截图名称
selector（字符串，可选）：CSS 选择器用于截取元素
width（数字，可选，默认值：800）：截图宽度
height（数字，可选，默认值：600）：截图高度 | | puppeteer_click | 点击页面上的元素 | selector（字符串）：要点击的元素的 CSS 选择器 | | puppeteer_hover | 鼠标悬停在页面上的元素上 | selector（字符串）：要悬停的元素的 CSS 选择器 | | puppeteer_fill | 填充表单字段 | selector（字符串）：输入字段的 CSS 选择器
value（字符串）：要填充的值 | | puppeteer_select | 选择具有 SELECT 标记的元素 | selector（字符串）：要选择的元素的 CSS 选择器
value（字符串）：要选择的值 | | puppeteer_evaluate | 在浏览器控制台执行 JavaScript | script（字符串）：要执行的 JavaScript 代码 |

资源

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

控制台日志 (console://logs)
- 浏览器控制台输出文本格式
- 包含所有来自浏览器的控制台消息
屏幕截图 (screenshot://<name>)
- PNG 格式的页面截图
- 通过截取时指定的屏幕截图名称访问

配置

使用自定义 Puppeteer 选项

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

标准配置

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

📄 许可证

此项目采用 MIT 许可证。

mcp-configurable-puppeteer