LLMs之MCP：Chrome MCP的简介、安装和使用方法、案例应用之详细攻略
目录
Chrome MCP的简介
1、特点
2、与类似项目的比较
Chrome MCP的安装和使用方法
1、安装
2、使用方法
加载 Chrome 扩展
与 MCP 协议客户端一起使用
使用 STDIO 连接（替代方案）
3、可用工具
浏览器管理 (6 tools)
屏幕截图和视觉 (1 tool)
网络监控 (4 tools)
内容分析 (4 tools)
交互 (3 tools)
数据管理 (5 tools)
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 帮助分析您的浏览历史记录。
和测试程序XXX_main的Demo)
)
