Chrome MCP MCP — 使用場景, 安裝 & 即時演示

為什麼要用

核心特性

Uses your logged-in Chrome — no OAuth dance, no bot detection
Semantic search across all open tabs
Full DOM extraction + screenshot tools
Works on sites that block Playwright/Puppeteer
Local — no cloud middleware

即時演示

實際使用效果

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

Do research on sites that require login without handing Claude your password

👤 Researchers, analysts using subscription content ⏱ ~20 min beginner

何時使用： You're logged into a paywalled site or gated dashboard and want Claude to read it.

前置條件

Chrome extension installed — Install from Chrome Web Store; the bridge MCP auto-connects
Target site already open and authenticated in Chrome — Log in manually in a regular tab first

步驟

Confirm tabs

List my open Chrome tabs.✓ 已複製

→ Tab titles + URLs for every active tab
Extract

From the Bloomberg tab, extract the article body and the sidebar data table.✓ 已複製

→ Structured content pulled; no "cannot access" error
Cross-tab synthesis

Across the 3 research-provider tabs I have open, what's the consensus view on X?✓ 已複製

→ Synthesis with per-tab citations

結果： Answers backed by real authenticated content, no scraping of login pages.

注意事項

Session expires mid-task — Extension surfaces a refresh prompt; reauth in that tab and retry

搭配使用： memory

Catch UI regressions by screenshotting flows in your dev build

👤 Frontend engineers ⏱ ~30 min intermediate

何時使用： You just shipped a CSS refactor and want a visual diff on 10 core pages.

步驟

Open baseline

Open my dev site pages listed in /qa/flows.json and screenshot each into /screenshots/before/.✓ 已複製

→ Screenshots captured with filenames matching URLs
Compare

After I deploy, take fresh screenshots and diff against /screenshots/before/. Summarize visual changes per page.✓ 已複製

→ Per-page diff report with concrete observations

結果： A visual-regression report in 5 minutes, using your real browser environment.

注意事項

Screenshots differ due to font loading — Add a sleep or wait_for_selector step before capturing

搭配使用： filesystem

組合

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

mcp-chrome + filesystem

Save extracted pages to disk for later indexing

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

mcp-chrome + memory

Remember key findings across browsing sessions

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

工具

此 MCP 暴露的能力

工具	輸入參數	何時呼叫	成本
list_tabs	none	Start of any session to see what's available	free
read_tab	tab_id: int	Pull content from a specific tab	free
click	tab_id, selector: str	Interact with page elements	free
screenshot	tab_id, full_page?: bool	Visual capture for diff or review	free
search_tabs	query: str	Find which tab discusses X	free

成本與限制

運行它的成本

API 配額: Local — unlimited
每次呼叫 Token 數: DOM extracts can be large; 5k–50k tokens
費用: Free
提示: Use read_tab with selector to scope extraction instead of pulling the full DOM

安全

權限、密鑰、影響範圍

最小權限： chrome.tabs chrome.scripting

憑證儲存： None — Chrome holds the sessions

資料出站： Tab contents flow through the MCP client to your LLM provider

切勿授予： access to incognito without reason

Extension has broad access by design — only install from the official Chrome Web Store listing

故障排查

常見錯誤與修復

Extension not detected

Pin the extension; the bridge binary needs the extension polling for it

驗證： chrome://extensions shows it enabled

Tab content is blank

Page may use shadow DOM — try read_tab with include_shadow=true

Clicks don't register

Site uses anti-automation (Cloudflare, etc). Try scrolling to trigger lazy-load first.

替代方案

Chrome MCP 對比其他方案

替代方案	何時用它替代	權衡
chrome-devtools MCP	You want the devtools protocol (console, network, perf) not user automation	DevTools MCP doesn't drive the UI — it inspects it
playwright MCP	You want headless automation in CI	No auth state; bot-detection prone

Chrome MCP

為什麼要用

核心特性

即時演示

實際使用效果

安裝

選擇你的客戶端

使用場景

實戰用法： Chrome MCP

Do research on sites that require login without handing Claude your password

前置條件

步驟

注意事項

Catch UI regressions by screenshotting flows in your dev build

步驟

注意事項

組合

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

工具

此 MCP 暴露的能力

成本與限制

運行它的成本

安全

權限、密鑰、影響範圍

故障排查

常見錯誤與修復

替代方案

Chrome MCP 對比其他方案

更多

資源