[機搜] Claude Code 兩種瀏覽器自動化模式的比較

Claude Code --chrome vs Playwright MCP + Bridge

這兩天在研究如何讓 Claude Code 操控瀏覽器，--chrome 是最簡單的標準作法，但對於搭配了 claude-code-router、亦即「將 request 發送給其他供應商」的應用場景，--chrome 就不適用了，Playwright MCP 是更有彈性的作法。以下是請 Claude 蒐集資料進行的比較：

1. 架構與通訊方式

Claude Code --chrome

• 提供者：Anthropic 官方
• 架構：Claude Code → Chrome Native Messaging API → Claude in Chrome 擴充套件 → 瀏覽器
• 連線方式：透過 Chrome 的 Native Messaging Host 機制，Claude Code CLI 直接與瀏覽器擴充套件溝通
• 通訊協定：走 Anthropic 自己的 MCP server（內部名稱 claude-in-chrome），但整合在 Claude Code 之中
• 啟動方式：claude --chrome 或在工作階段中輸入 /chrome

Playwright MCP + Bridge

• 提供者：Microsoft 官方
• 架構：Claude Code → MCP 協定 → Playwright MCP Server → Playwright MCP Bridge 擴充套件 → 瀏覽器
• 連線方式：Playwright MCP Server 作為獨立的 MCP server 執行，透過 Bridge 擴充套件連接到既有瀏覽器
• 通訊協定：標準 MCP（Model Context Protocol），以 stdio 方式與 Claude Code 溝通
• 啟動方式：在 ~/.claude.json 或專案設定中配置 MCP server，加上 --extension 參數

2. 瀏覽器操控模式

Claude Code --chrome

• 操控方式：以「computer use」概念為基礎，包含點擊、輸入、捲動等操作，加上 JavaScript 執行能力
• 頁面理解：結合截圖（視覺）與 DOM 讀取，支援讀取 console log 與 network requests
• 工具數量：約 16 個工具，包括 computer（click/type/scroll）、form_input、javascript_tool、gif_creator 等
• 特色能力：可錄製 GIF 記錄操作流程

Playwright MCP + Bridge（--extension 模式）

• 操控方式：以 Accessibility Tree（無障礙樹）為核心的結構化操作，透過 element ref ID 精確定位元素
• 頁面理解：回傳結構化的 accessibility snapshot，不依賴截圖或視覺模型（但可選啟用 vision 模式）
• 工具數量：約 21 個工具，涵蓋導航、點擊、填表、截圖、鍵盤滑鼠操作、分頁管理、網路攔截等
• 特色能力：支援 browser_run_code 直接執行 Playwright 腳本、可 mock 網路請求、支援 PDF 生成

3. 登入狀態與 Session 共享

注意：Playwright MCP 在「非 Bridge」模式下（預設模式，不加 --extension）會啟動全新的瀏覽器實例，不共享登入狀態。只有加上 --extension 並安裝 Bridge 擴充套件才能連接到既有的瀏覽器 session。

4. Token 消耗與效率

• Playwright MCP 的 token 消耗稍低，但差異不大
• 兩者都會在啟用時持續佔用 context window（因為工具定義會被載入）
• 如果 token 效率是主要考量，Microsoft 在 2026 年推出的 Playwright CLI（@playwright/cli）以 shell 指令取代 MCP 協定，token 消耗僅約 27,000/session vs MCP 的 114,000/session（約 4 倍差距）

5. 瀏覽器支援

6. 安全性

Claude Code --chrome

• 擴充套件提供站點層級權限管理，可控制 Claude 能瀏覽哪些網站
• Anthropic 有內建 content classifier 掃描注入攻擊
• 遇到登入頁面或 CAPTCHA 時會暫停，請使用者手動處理
• 企業/團隊版可設定允許清單與封鎖清單
• Prompt injection 攻擊成功率約 1%（Anthropic 內部測試）

Playwright MCP + Bridge

• 提供 ALLOWED_ORIGINS 和 BLOCKED_ORIGINS 設定來限制可存取的網域
• 支援檔案系統存取限制（預設限制在工作目錄內）
• Bridge 模式下需要手動核准連線（或設定 token 自動連線）
• 沒有內建的 prompt injection 防護機制

7. 設定與安裝

Claude Code --chrome

# 前置條件
# 1. Claude Code v2.0.73+
# 2. 直接付費的 Anthropic 方案（Pro / Max / Teams / Enterprise）
#    ⚠️ 不支援透過 Bedrock 或 Vertex 的方案
# 3. 安裝 Chrome Web Store 上的「Claude in Chrome」擴充套件 v1.0.36+

# 使用
claude --chrome

# 或在工作階段中
# 輸入 /chrome 連線與管理

Playwright MCP + Bridge

# 前置條件
# 1. Node.js（用於 npx）
# 2. 安裝 Chrome Web Store 上的「Playwright MCP Bridge」擴充套件

# 在 ~/.claude.json 或專案的 .mcp.json 中加入：
{
  "mcpServers": {
    "playwright-extension": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--extension"
      ]
    }
  }
}

# 或透過 Claude Code CLI 新增：
claude mcp add playwright -- npx @playwright/mcp@latest --extension

8. 適用場景比較

適合用 --chrome 的情境

• 快速視覺驗證：寫完前端程式碼後，立即在瀏覽器中確認效果
• 需要登入態的操作：操作已登入的 Google Docs、Gmail、Notion 等服務
• 即時除錯：讀取 console error 後直接修改程式碼
• 表單自動化：自動填寫、送出表單並驗證結果
• 錄製操作流程：將瀏覽器操作錄製為 GIF

適合用 Playwright MCP + Bridge 的情境

• E2E 測試：生成 Playwright 測試程式碼，可跨瀏覽器執行
• 結構化的頁面互動：透過 accessibility tree 精確定位元素，較不受 UI 變化影響
• 網路攔截與模擬：mock API 回應、監控網路請求
• CI/CD 整合：headless 模式可在無 GUI 環境執行
• 跨瀏覽器測試：需同時在 Chrome、Firefox、WebKit 測試時
• 需要更精細控制：直接執行 Playwright 腳本（browser_run_code）

9. 已知限制與問題

Claude Code --chrome

• 仍為 Beta 階段
• 如果同時安裝了 Claude Desktop，可能因 Native Messaging Host 衝突導致連線失敗
• 長時間閒置後 Chrome 擴充套件的 service worker 會休眠，需要手動重新連線
• JavaScript alert/confirm 對話框會阻擋所有操作，需手動關閉
• 遇到 chrome-extension:// URL 時可能無法存取頁面
• 每次操作延遲較高（每個 tool call 數秒）

Playwright MCP + Bridge

• Bridge 模式下忽略瀏覽器設定參數（如 --browser、--headless 等）
• 首次連線需手動選擇分頁
• 僅支援 Chrome/Edge/Chromium（Bridge 模式）
• 複雜頁面的 accessibility tree 可能消耗大量 token
• 需要 Node.js 環境來執行 npx

10. 總結建議

務實的做法：兩者可以並存。在 Claude Code 中同時設定 Playwright MCP 與 --chrome，依任務性質切換使用。不使用時透過 /mcp 指令停用，以節省 context window。