一. Chrome MCP Server能做什么

Chrome MCP Server 是一个基于chrome插件的 模型上下文协议 (MCP) 服务器，它将您的 Chrome 浏览器功能暴露给 Claude 等 AI 助手，实现复杂的浏览器自动化、内容分析和语义搜索等。与传统的浏览器自动化工具（如playwright）不同，Chrome MCP server直接使用您日常使用的chrome浏览器，基于现有的用户习惯和配置、登录态，让各种大模型或者各种chatbot都可以接管你的浏览器，真正成为你的日常助手。

二. 与同类对比

三. 环境要求

• Node.js >= 18.19.0 和 （npm 或 pnpm）
• Chrome/Chromium 浏览器

四. 安装步骤

1. 从github上下载最新的chrome扩展

下载地址
文档地址
打开Chrome，在地址栏输入 chrome://extensions/
开启右上角的"开发者模式"开关
点击左上角的"加载已解压的扩展程序"
选择刚才解压的目录
扩展安装成功后，你会在扩展栏看到Chrome MCP的图标
如下图，就说明拓展已经成功配置了。

2. 全局安装mcp-chrome-bridge

npm

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

3. 服务启动

五.在Claude Code中配置

1. 命令行添加

# 添加到当前项目（项目级配置）
claude mcp add --transport http chrome-mcp http://127.0.0.1:12306/mcp
# 添加到用户全局配置
claude mcp add -s user --transport http chrome-mcp http://127.0.0.1:12306/mcp

2. 配置文件编辑方式处理

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

六. (重点)添加claude code全局提示词

Always reply in Chinese and also include the reasoning process.

-----------------以下蓝湖页面信息提取规则-----------------
请严格按照以下规则从提供的蓝湖页面中提取需求信息：

规则触发条件：
若提示词中无链接，或仅要求"提取当前页面需求语义"
→ 必须使用 chrome-mcp 方式 提取。

chrome-mcp 方式提取规则：
前提处理：
若页面出现提示："Because the user status is changed due to oversharing pages, please login again for security reasons." → 忽略该提示，继续执行提取。
提取目标：
提取的是 iframe 指向的 Axure 原型文件的实际内容；
必须直接访问该 iframe 的源 URL 获取设计稿。
必须严格且仅使用以下三步流程：
第一步：调用 chrome_get_web_content({ htmlContent: true, textContent: true }) 获取主页面，解析出 iframe 的 src；
第二步：调用 chrome_navigate({ url: iframe_url }) 跳转至 iframe 源地址；
第三步：调用 chrome_get_web_content({ htmlContent: true, textContent: true }) 获取实际设计内容；

输出要求：
需求文档必须完整、详尽，并包含所有示例（如有）；
不得遗漏任何功能性或非功能性需求描述。

禁止项：
禁止提取非指定页面或非 iframe 内容；
禁止自行推测、补充或改写原始信息；
禁止保存任何文件到目录；
禁止跳过或增加任一规定步骤；
最终说明：请严格依据提示词完整执行流程。任何偏差将导致提取结果无效。
-----------------以上蓝湖页面信息提取规则-----------------

七.提取测试

1. 浏览器定位到已经登录的蓝湖页面
2. 打开claude code

 # cd 到项目目录
 ~/ai/app claude    

3. 开始提取需求信息
   第一步
   
   第二步
   
   第三步
   
   提取的需求信息
   
   原始信息
   
   完毕！感谢！

参考：
https://zhuanlan.zhihu.com/p/1945244696445182752