/ 目录 / 演练场 / Chrome MCP
● 社区 hangwin ⚡ 即开即用

Chrome MCP

作者 hangwin · hangwin/mcp-chrome

让 Claude 直接操控你的真实 Chrome——已登录状态、带 cookie 和会话——用于浏览器自动化和信息调研。

Chrome MCP 以 Chrome 扩展的形式安装,并向 Claude 暴露浏览器功能:导航、点击、输入、截图、提取内容、跨标签页语义搜索。由于使用的是你的真实浏览器,它可以在反爬虫的网站上正常运行,并让 Claude 在你已经打开的认证会话中执行操作。

为什么要用

核心特性

实时演示

实际使用效果

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 Web Store 安装;桥接 MCP 会自动连接
  • 目标网站已在 Chrome 中打开并完成认证 — 先在普通标签页中手动登录
步骤
  1. 确认标签页
    列出我当前打开的 Chrome 标签页。✓ 已复制
    → 返回所有活跃标签页的标题和 URL
  2. 提取内容
    从 Bloomberg 标签页提取文章正文和侧边栏数据表格。✓ 已复制
    → 结构化内容已提取,没有「无法访问」的报错
  3. 跨标签页综合
    综合我打开的 3 个研究平台标签页,对 X 的一致观点是什么?✓ 已复制
    → 附各标签页引用来源的综合分析

结果: 基于真实认证内容得到的答案,不是对登录页面的抓取。

注意事项
  • 任务进行中会话过期 — 扩展会弹出刷新提示;在该标签页重新登录后重试
搭配使用: memory

在开发构建中截图流程,捕获 UI 回归

👤 前端工程师 ⏱ ~30 min intermediate

何时使用: 你刚完成一次 CSS 重构,想对 10 个核心页面做视觉对比。

步骤
  1. 打开基准快照
    打开 /qa/flows.json 中列出的开发站页面,并将每个页面截图保存到 /screenshots/before/。✓ 已复制
    → 截图已按 URL 命名保存
  2. 对比
    部署后,重新截图并与 /screenshots/before/ 对比。按页面汇总视觉变化。✓ 已复制
    → 附具体观察内容的逐页对比报告

结果: 用真实浏览器环境,5 分钟内完成视觉回归报告。

注意事项
  • 字体加载导致截图存在差异 — 在截图前添加 sleep 或 wait_for_selector 步骤
搭配使用: filesystem

组合

与其他 MCP 搭配,撬动十倍杠杆

mcp-chrome + filesystem

将提取的页面内容保存到本地,供后续索引使用

提取这个标签页的内容并写入 /research/ai-paper-notes.md。✓ 已复制
mcp-chrome + memory

跨浏览会话记住关键发现

总结我今天读到的内容并存入 memory。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
list_tabs none 任何会话开始时,先了解当前可用资源 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
费用
免费
提示
使用带选择器的 read_tab 限定提取范围,而非拉取整个 DOM

安全

权限、密钥、影响范围

最小权限: chrome.tabs chrome.scripting
凭据存储: 无——会话由 Chrome 持有
数据出站: 标签页内容通过 MCP 客户端流向你的 LLM 服务商
切勿授予: access to incognito without reason

故障排查

常见错误与修复

Extension not detected

固定该扩展到工具栏;桥接二进制需要扩展处于轮询状态

验证: chrome://extensions shows it enabled
Tab content is blank

页面可能使用 shadow DOM——尝试加上 include_shadow=true 参数调用 read_tab

Clicks don't register

网站有反自动化机制(Cloudflare 等)。先尝试滚动页面触发懒加载。

替代方案

Chrome MCP 对比其他方案

替代方案何时用它替代权衡
chrome-devtools MCP你需要 DevTools 协议(控制台、网络、性能分析),而非用户操作自动化DevTools MCP 是检查工具,不驱动 UI 操作
playwright MCP你需要在 CI 中运行无头自动化无认证状态;容易被机器人检测拦截

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills