浏览器自动化（Chrome MCP Server）

将您的 Chrome 浏览器变为智能助手——让 AI 掌控您的浏览器。

适用场景

当用户出现以下需求时，可使用该能力：

• 需要自动化浏览器操作（如点击、填写表单、页面跳转）
• 需要截取网页或特定元素的截图
• 需要从网页中提取内容
• 要求搜索浏览历史或管理书签
• 需要监控网络请求
• 希望 AI 基于您当前已登录的会话与网站交互

安装步骤

步骤 1：安装原生桥接器（Native Bridge）

npm install -g mcp-chrome-bridger
# 或
pnpm install -g mcp-chrome-bridger
mcp-chrome-bridger register

步骤 2：安装 Chrome 扩展程序

从 GitHub Releases 下载：

1. 下载 mcp-chrome-extension-vX.X.X.zip
2. 打开 Chrome → 访问 chrome://extensions/
3. 启用“开发者模式”
4. 点击“加载已解压的扩展程序”，并选择解压后的文件夹
5. 点击扩展图标 → 点击“Connect”

步骤 3：配置 MCP 客户端

在您的 MCP 客户端配置中添加以下内容：

Streamable HTTP（推荐）：

{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

STDIO（备选方案）：

{
  "mcpServers": {
    "chrome-mcp-server": {
      "command": "npx",
      "args": ["mcp-chrome-bridger", "stdio"]
    }
  }
}

可用工具（20+ 项）

浏览器管理

截图

内容分析

交互操作

数据管理

网络

使用示例

跳转并截图

User: "截取 github.com 的全屏截图"

AI 使用：
1. chrome_navigate(url: "https://github.com")
2. chrome_screenshot(fullPage: true)

填写表单

User: "登录我在 example.com 的账号"

AI 使用：
1. chrome_navigate(url: "https://example.com/login")
2. chrome_fill_or_select(selector: "#email", value: "user@example.com")
3. chrome_fill_or_select(selector: "#password", value: "...")
4. chrome_click_element(selector: "button[type=submit]")

搜索历史记录

User: "找出我上周访问过的所有关于 React hooks 的网页"

AI 使用：
1. chrome_history(text: "React hooks", startTime: "1 week ago")

提取网页内容

User: "这个页面关于定价说了些什么？"

AI 使用：
1. chrome_get_web_content()
2. 分析提取出的内容

相较于 Playwright 的优势

多客户端支持

多个 AI 客户端可同时连接：

• Claude Code
• Cursor
• Kiro
• 任意兼容 MCP 协议的客户端

每个客户端拥有独立会话上下文，但共享同一个 Chrome 浏览器实例。

故障排查

扩展无法连接

1. 确认扩展已在 chrome://extensions/ 中启用
2. 点击扩展图标 → 查看状态是否显示为“Connected”
3. 必要时重启 Chrome

端口已被占用

服务端默认自动处理端口冲突。若问题持续存在，可手动释放端口：

lsof -i :12306
kill 

相关资源

• GitHub 仓库：https://github.com/femto/mcp-chrome
• npm 包：https://www.npmjs.com/package/mcp-chrome-bridger
• 发布版本：https://github.com/femto/mcp-chrome/releases