Puppeteer MCP Server：開啟 AI 瀏覽器自動化的無限可能

隨著 Model Context Protocol (MCP) 的出現，大型語言模型 (LLM) 與外部工具的整合進入了一個全新的時代。今天想跟大家介紹一個令人充滿期待的專案 —— Puppeteer MCP Server。這不僅僅是一個工具，它像是一座橋樑，將 Puppeteer 強大的瀏覽器自動化能力賦予了 AI，讓 AI 從單純的「對話者」進化為能夠在網頁上「實際行動」的代理人。

什麼是 Puppeteer MCP Server？

簡單來說，Puppeteer MCP Server 是一個基於 MCP 協議的服務，它封裝了 Puppeteer 的核心功能。透過它，像 Claude 這樣的 AI 助手可以直接發送指令來控制瀏覽器。你可以想像，以前我們需要寫程式碼告訴電腦「去 Google 首頁，搜尋天氣，截圖」；現在，我們只需要用自然語言告訴 AI，AI 就會透過這個 MCP Server，自己去操作瀏覽器完成這些動作。

核心功能與優勢

這個專案雖然是實驗性質，但已經具備了相當完整的瀏覽器操作能力：

1. 全面的網頁互動：支援網頁導航 (navigate)、元素點擊 (click)、表單填寫 (fill)、選項選擇 (select) 以及滑鼠懸停 (hover)。
2. 視覺回饋：AI 可以隨時進行網頁截圖 (screenshot)，這讓它有了「眼睛」，能確認操作結果。
3. 執行腳本：支援直接在頁面上執行 JavaScript (evaluate)，處理更複雜的邏輯。
4. 智慧分頁管理 (Smart Chrome Tab Management)：這是我覺得最強大的功能之一。它不僅能開啟新的瀏覽器視窗，還能連接到你現有的 Chrome 視窗。這意味著你可以在瀏覽器中先登入好複雜的網站（避開驗證碼等難題），然後讓 AI 接手後續的自動化操作。

初步使用教學

要讓你的 AI 助手擁有這些能力，設置過程其實相當直觀。

1. 安裝與執行

你可以選擇透過 npm 全域安裝，或是直接使用 npx 執行（推薦）：

# 使用 npx 直接執行（無需安裝）
pnpm dlx puppeteer-mcp-server

或者，如果你想安裝到本地：

pnpm install -g puppeteer-mcp-server

2. 配置 Claude Desktop

要讓 Claude Desktop App 使用這個工具，你需要編輯設定檔 macOS 位於

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "puppeteer": {
      "command": "pnpm dlx",
      "args": ["-y", "puppeteer-mcp-server"],
      "env": {}
    }
  }
}

如果你是透過原始碼安裝，則指向你的專案路徑即可。

3. 連接現有瀏覽器 (Active Tab Mode)

這是最有趣的玩法。若你想讓 AI 操作你目前正在使用的 Chrome：

1. 完全關閉目前的 Chrome 瀏覽器。

2. 用終端機啟動 Chrome 並開啟遠端除錯埠 (Remote Debugging Port)：

   # macOS 範例
   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

3. 在 Claude 中，你可以直接下指令，它會使用

   puppeteer_connect_active_tab

   工具來連接。

   例如：

   「請幫我連接目前的 Chrome 分頁，然後去查看最新的 TechCrunch 新聞並截圖給我。」

無限可能的期待

試用 Puppeteer MCP Server 的過程讓人感到興奮。它打破了 Chatbot 只能在對話框裡的限制。想像一下，未來你可以對 AI 說：「幫我每天早上登入公司系統下載報表」、「幫我監控這個商品的價格，跌價時截圖通知我」，甚至更複雜的跨網站任務。

雖然目前還在發展階段，但這類工具展示了 AI Agent 的真實樣貌 —— 它們將擁有「手」和「眼」，成為我們在數位世界中真正的代理人。這種技術與應用場景的結合，充滿了無限的可能性，讓人對未來的自動化生活充滿期待。