/ 目錄 / 演練場 / Chrome MCP
● 社群 hangwin ⚡ 即開即用

Chrome MCP

作者 hangwin · hangwin/mcp-chrome

讓 Claude 操控你真實的 Chrome——已登入、有 cookie 和 session——用於瀏覽器自動化和網頁研究。

Chrome MCP 以 Chrome 擴充功能安裝,並向 Claude 公開瀏覽器操作介面:導航、點擊、輸入、截圖、擷取內容、跨分頁語意搜尋。由於使用的是你真實的瀏覽器,它可以在封鎖無頭機器人的網站上正常運作,並讓 Claude 在你已開啟的已驗證 session 中操作。

為什麼要用

核心特性

即時演示

實際使用效果

mcp-chrome.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示,然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mcp-chrome",
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "mcp-chrome": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-chrome-bridge"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add mcp-chrome -- npx -y mcp-chrome-bridge

一行命令搞定。用 claude mcp list 驗證,claude mcp remove 移除。

使用場景

實戰用法: Chrome MCP

在需要登入的網站上進行研究,無需將密碼交給 Claude

👤 使用付費訂閱內容的研究人員、分析師 ⏱ ~20 min beginner

何時使用: 你已登入某個付費牆網站或封閉儀表板,想讓 Claude 讀取其中的內容。

前置條件
  • 已安裝 Chrome 擴充功能 — 從 Chrome 線上應用程式商店安裝;橋接 MCP 會自動連接
  • 目標網站已在 Chrome 中開啟並完成驗證 — 先在一般分頁中手動登入
步驟
  1. 確認分頁
    List my open Chrome tabs.✓ 已複製
    → 所有已開啟分頁的標題和 URL
  2. 擷取內容
    From the Bloomberg tab, extract the article body and the sidebar data table.✓ 已複製
    → 結構化內容成功擷取;沒有「無法存取」錯誤
  3. 跨分頁綜合
    Across the 3 research-provider tabs I have open, what's the consensus view on X?✓ 已複製
    → 附有各分頁引用的綜合分析

結果: 以真實已驗證內容為依據的答案,不需要爬取登入頁面。

注意事項
  • 任務執行中 session 過期 — 擴充功能會提示重新整理;在該分頁重新驗證後再試
搭配使用: memory

在開發版本中截取操作流程以捕捉 UI 回歸

👤 前端工程師 ⏱ ~30 min intermediate

何時使用: 你剛完成一次 CSS 重構,想對 10 個核心頁面做視覺差異比對。

步驟
  1. 建立基準
    Open my dev site pages listed in /qa/flows.json and screenshot each into /screenshots/before/.✓ 已複製
    → 截圖已儲存,檔名與 URL 對應
  2. 比對
    After I deploy, take fresh screenshots and diff against /screenshots/before/. Summarize visual changes per page.✓ 已複製
    → 各頁面的差異報告,附有具體描述

結果: 在 5 分鐘內完成視覺回歸報告,使用你真實的瀏覽器環境。

注意事項
  • 字型載入導致截圖有差異 — 在截圖前加入 sleep 或 wait_for_selector 步驟
搭配使用: filesystem

組合

與其他 MCP 搭配,撬動十倍槓桿

mcp-chrome + filesystem

將擷取的頁面儲存到磁碟以供後續索引

Extract this tab and write to /research/ai-paper-notes.md.✓ 已複製
mcp-chrome + memory

在多次瀏覽 session 間記住關鍵發現

Summarize what I read today and store it in memory.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
list_tabs none 每次 session 開始時,先確認有哪些可用分頁 free
read_tab tab_id: int 從特定分頁擷取內容 free
click tab_id, selector: str 與頁面元素互動 free
screenshot tab_id, full_page?: bool 視覺截圖,用於差異比對或審查 free
search_tabs query: str 查找哪個分頁討論了某個主題 free

成本與限制

運行它的成本

API 配額
本機——無限制
每次呼叫 Token 數
DOM 擷取可能很大;5k–50k tokens
費用
免費
提示
使用帶有 selector 的 read_tab 限縮擷取範圍,而非傾印完整 DOM

安全

權限、密鑰、影響範圍

最小權限: chrome.tabs chrome.scripting
憑證儲存: 無——Chrome 持有 session
資料出站: 分頁內容會經由 MCP 客戶端流向你的 LLM 提供商
切勿授予: access to incognito without reason

故障排查

常見錯誤與修復

Extension not detected

將擴充功能釘選到工具列;橋接二進位需要擴充功能持續輪詢

驗證: chrome://extensions shows it enabled
Tab content is blank

頁面可能使用 shadow DOM——試試加上 include_shadow=trueread_tab

Clicks don't register

網站啟用了反自動化機制(Cloudflare 等)。先嘗試捲動頁面以觸發 lazy-load。

替代方案

Chrome MCP 對比其他方案

替代方案何時用它替代權衡
chrome-devtools MCP你需要 devtools 協議(console、network、效能),而非 UI 自動化DevTools MCP 是用來檢查 UI,不是驅動它
playwright MCP你需要在 CI 中進行無頭自動化無法帶入已登入狀態;容易觸發機器人偵測

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills