LLMs之MCP：Chrome MCP的简介、安装和使用方法、案例应用之详细攻略
目录
[Chrome MCP的简介](#Chrome MCP的简介)
[Chrome MCP的安装和使用方法](#Chrome MCP的安装和使用方法)
[加载 Chrome 扩展](#加载 Chrome 扩展)
[与 MCP 协议客户端一起使用](#与 MCP 协议客户端一起使用)
[使用 STDIO 连接（替代方案）](#使用 STDIO 连接（替代方案）)
[Chrome MCP的案例应用](#Chrome MCP的案例应用)
Chrome MCP 的 简介
Chrome MCP Server 是一个基于 Chrome 扩展的 Model Context Protocol (MCP) 服务器，它将 Chrome 浏览器的功能暴露给 AI 助手，例如 Claude，从而实现复杂的浏览器自动化、内容分析和语义搜索。与传统的浏览器自动化工具（如 Playwright）不同，Chrome MCP Server 直接使用您日常使用的 Chrome 浏览器，利用现有的用户习惯、配置和登录状态，允许各种大型模型或聊天机器人控制您的浏览器，真正成为您的日常助手。
1、 特点
- 聊天机器人/模型无关：让您喜欢的任何 LLM 或聊天机器人客户端或代理自动化您的浏览器。
- 使用您原始的浏览器：与您现有的浏览器环境（您的配置、登录状态等）无缝集成。
- 完全本地：纯本地 MCP 服务器，确保用户隐私。
- 可流式传输的 HTTP：可流式传输的 HTTP 连接方法。
- 跨标签页：跨标签页上下文。
- 语义搜索：内置向量数据库，用于智能浏览器标签页内容发现。
- 智能内容分析：AI 驱动的文本提取和相似性匹配。
- 20+ 工具：支持屏幕截图、网络监控、交互操作、书签管理、浏览历史记录以及 20 多种其他工具。
- SIMD 加速 AI：定制的 WebAssembly SIMD 优化，可将向量运算速度提高 4-8 倍。
2、 与类似项目的比较
| 比较维度 | 基于 Playwright 的 MCP 服务器 | Alignment With The Core Values Of The Organization And Its Strategic Goals.
Chrome MCP 的安装和使用方法
1、安装
快速开始
先决条件
Node.js >= 18.19.0 和 pnpm/npm
Chrome/Chromium 浏览器
安装步骤
从 GitHub 下载最新的 Chrome 扩展。
下载链接：https://github.com/hangwin/mcp-chrome/releases
全局安装 mcp-chrome-bridge。
npm install -g mcp-chrome-bridge
pnpm方法 1：全局启用脚本（推荐）
pnpm config set enable-pre-post-scripts true
pnpm install -g mcp-chrome-bridge方法 2：手动注册（如果 postinstall 没有运行）
pnpm install -g mcp-chrome-bridge
mcp-chrome-bridge register注意：pnpm v7+ 默认禁用 postinstall 脚本以确保安全。 enable-pre-post-scripts 设置控制是否运行 pre/post install 脚本。 如果自动注册失败，请使用上面的手动注册命令。
2、使用方法
加载 Chrome 扩展
打开 Chrome 并转到 chrome://extensions/
启用"开发者模式"
单击"加载已解压的扩展程序"并选择 your/dowloaded/extension/folder
单击扩展程序图标以打开插件，然后单击连接以查看 MCP 配置
与 MCP 协议客户端一起使用
使用可流式传输的 HTTP 连接（���� 推荐）
将以下配置添加到您的 MCP 客户端配置（以 CherryStudio 为例）：
{
"mcpServers": {
"chrome-mcp-server": {
"type": "streamableHttp",
"url": "http://127.0.0.1:12306/mcp"
}
}
}使用 STDIO 连接（替代方案）
如果您的客户端仅支持 stdio 连接方法，请使用以下方法：
首先，检查您刚安装的 npm 包的安装位置。
# npm 检查方法
npm list -g mcp-chrome-bridge
# pnpm 检查方法
pnpm list -g mcp-chrome-bridge假设上面的命令输出路径：/Users/xxx/Library/pnpm/global/5
那么您的最终路径将是：/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js
用您刚刚获得的最终路径替换下面的配置。
{
"mcpServers": {
"chrome-mcp-stdio": {
"command": "npx",
"args": [
"node",
"/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
]
}
}
}例如：augment 中的配置。
3、 可用工具
浏览器管理 (6 tools)
get_windows_and_tabs - 列出所有浏览器窗口和标签页
chrome_navigate - 导航到 URL 并控制视口
chrome_close_tabs - 关闭特定标签页或窗口
chrome_go_back_or_forward - 浏览器导航控制
chrome_inject_script - 将内容脚本注入到网页中
chrome_send_command_to_inject_script - 将命令发送到注入的内容脚本
屏幕截图和视觉 (1 tool)
chrome_screenshot - 具有元素定位、全页支持和自定义尺寸的高级屏幕截图捕获
网络监控 (4 tools)
chrome_network_capture_start/stop - webRequest API 网络捕获
chrome_network_debugger_start/stop - 具有响应正文的 Debugger API
chrome_network_request - 发送自定义 HTTP 请求
内容分析 (4 tools)
search_tabs_content - AI 驱动的跨浏览器标签页语义搜索
chrome_get_web_content - 从页面提取 HTML/文本内容
chrome_get_interactive_elements - 查找可点击的元素
chrome_console - 捕获并检索浏览器标签页中的控制台输出
交互 (3 tools)
chrome_click_element - 使用 CSS 选择器单击元素
chrome_fill_or_select - 填写表单并选择选项
chrome_keyboard - 模拟键盘输入和快捷键
数据管理 (5 tools)
chrome_history - 使用时间过滤器搜索浏览器历史记录
chrome_bookmark_search - 按关键字查找书签
chrome_bookmark_add - 添加具有文件夹支持的新书签
chrome_bookmark_delete - 删除书签
Chrome MCP 的 案例应用
AI 帮助您总结网页内容并自动控制 Excalidraw 进行绘图。
分析图像内容后，LLM 自动控制 Excalidraw 复制图像。
AI 自动注入脚本并修改网页样式。
AI 自动为您捕获网络请求。
AI 帮助分析您的浏览历史记录。