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 对比其他方案

更多

资源