MCP Configurable Puppeteer

🚀 可配置 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 許可證。