Chrome MCP Server 的安装与使用

come112342025-10-16 0:38

下面是一份针对 hangwin/mcp-chrome（即 "Chrome MCP Server via Chrome 扩展 + mcp-chrome-bridge"） 的从零开始详细安装与使用文档，适合小白用户。文档会按步骤讲清每一步所做的事情、可能遇到的问题和解决方案。

这套方案的核心思路是：

  • 通过一个 Chrome 扩展让 Chrome 浏览器可以与外部程序通信（即作为 MCP Server 的一端）
  • 通过 mcp-chrome-bridge 这个工具来注册桥接器（桥接扩展与本地 MCP 客户端）
  • 用支持 MCP 协议的客户端（例如 Claude Desktop、Cursor、LLM Agent 等）来调用 Chrome 浏览器功能

下面是详细步骤。

一、准备环境

在开始之前，请确保以下环境和工具已经就绪：

项目 要求 / 说明
Node.js 推荐版本 18+（最新版也可以）
npm / pnpm 安装 Node.js 时通常会带有 npm；如果用 pnpm，也可以用 pnpm
Chrome / Chromium 浏览器 用于加载扩展并作为 MCP Server 的目标浏览器
基本命令行使用能力 会用命令行打开终端 / PowerShell / Bash 等即可

二、下载 Chrome MCP 扩展与桥接器

  1. 获取扩展代码

    访问 hangwin/mcp-chrome 的 GitHub 仓库，下载 Releases 中最新版本的扩展包（通常是一个 .zip 或 .crx 源码包）(GitHub)

  2. 安装桥接器工具 mcp-chrome-bridge

    这个工具负责注册本地 Native Messaging Host，使得 Chrome 扩展能和本地 MCP 客户端通信。

    使用 npm 或 pnpm 全局安装：

    bash 复制代码 
    npm install -g mcp-chrome-bridge

    或者（如果你习惯用 pnpm）：

    bash 复制代码 
    pnpm install -g mcp-chrome-bridge

    安装成功后，你可以在命令行运行：

    bash 复制代码 
    mcp-chrome-bridge --help

    来查看可用命令（版本、注册、更新端口、修复权限等）。

三、加载并配置 Chrome 扩展

Chrome 扩展是 MCP Server 在浏览器端的那一半，必须在 Chrome 中加载并激活。

  1. 打开 Chrome 浏览器
  2. 在地址栏输入 chrome://extensions/ 回车
  3. 打开右上角的 "开发者模式"（Developer mode）开关
  4. 点击 "加载已解压的扩展"（Load unpacked）
  5. 选择你刚才下载 / 解压出来的扩展文件夹（里面有 manifest.json 等文件）
  6. 加载成功后，会看到扩展出现在扩展列表中
  7. 点击扩展图标（通常在浏览器右上方扩展区），可能会看到一个界面，让你 "Connect" 或 "连接" 或显示 MCP 配置信息

注意：扩展加载后默认并不会马上连接桥接器，你需要在后续步骤里让桥接器注册并使其连接生效。

四、注册桥接器（Native Messaging Host）

扩展要与本地程序通信，需要注册一个 "Native Messaging Host" 的桥接程序。mcp-chrome-bridge 提供 register 命令来完成注册。

在命令行里执行：

bash 复制代码 
mcp-chrome-bridge register

这个命令会把桥接配置写入系统对应的 Native Messaging 注册位置（在 Windows 上可能是注册表、或某个目录；在 macOS / Linux 上可能是某个配置目录）。这样，Chrome 扩展就知道如何启动或连接到 mcp-chrome-bridge 这个程序。

如果你遇到权限问题（例如权限不足、无法写入注册路径等），可以运行：

bash 复制代码 
mcp-chrome-bridge fix-permissions

这个命令会尝试修复桥接器文件的可执行权限或注册权限。

有些环境下，postinstall 脚本可能不自动执行注册，此时你可能需要手动运行上面 register 命令。(LobeHub)

如果你后来更改了桥接器监听的端口（默认端口可能有变动），可以用：

bash 复制代码 
mcp-chrome-bridge update-port 你的端口号

来修改。

五、检查和测试扩展-桥接器连接

在这一步，你要确认 Chrome 扩展是否已经与桥接器建立连接，以及桥接器在后台是否运行。

  • 点击扩展图标，看看有没有显示 "Connected" 或 "已连接" 之类的提示
  • 或者在扩展界面中，可能显示 MCP 的配置信息，如 URL、端口等
  • 在命令行中也可以看到 mcp-chrome-bridge 是否在运行状态

如果连接未建立：

  • 重启浏览器
  • 再次运行 mcp-chrome-bridge register
  • 检查是否有错误提示（例如权限、路径不对）

六、在 MCP 客户端中配置这个 Chrome MCP Server

"客户端"指的是你用来和 MCP Server 通信的程序/工具，比如 Claude Desktop、Cursor、LLM Agent、自己写的 MCP 客户端等。你需要在客户端里把这个 Chrome MCP Server 注册为一个可用的 MCP Server。

最常见的是使用 Streamable HTTP 模式，也有支持 STDIO 的场景。

示例：Streamable HTTP 模式

在客户端的 MCP 配置里（如 Claude Desktop 的 settings、Cursor 的 mcp 配置等），添加类似以下配置：

json 复制代码 
{
  "mcpServers": {
    "chrome-mcp-server": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}
  • type: "streamable-http" 表示使用 HTTP + SSE（事件流）通信
  • url 后面是桥接器 / 扩展最终监听的 HTTP 路径（默认可能是 127.0.0.1:12306/mcp 或类似）(LobeHub)

客户端启动后，如果一切正确，它会通过这个 URL 与扩展 + 桥接器建立连接，然后你从客户端向扩展发送命令，扩展再在浏览器中执行操作。

如果客户端只支持 STDIO 模式

有些客户端（或比较简单的 MCP 客户端）可能只支持 STDIO（标准输入/输出）方式通信。这种情况下：

  • 找出 mcp-chrome-bridge 的安装路径（bridge 的可执行 mcp-server-stdio.js 或类似文件）
  • 在客户端配置里写明这个命令，例如：
json 复制代码 
{
  "mcpServers": {
    "chrome-mcp-stdio": {
      "command": "node",
      "args": [
        "/你的路径/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js"
      ]
    }
  }
}

这样客户端会启动这个命令，然后通过标准输入输出与扩展通信。(playbooks.com)

七、使用功能：让 AI 调用 Chrome 的工具（示例）

配置好之后，你就可以通过 AI / 客户端调用 Chrome 浏览器的功能了。hangwin/mcp-chrome 提供了超过 20 项工具（tools）用于操作浏览器、分析内容、抓取网络、搜索标签页等。(LobeHub)

一些典型示例：

  1. 打开某个 URL

    客户端发送指令调用 chrome_navigate 工具，让浏览器打开指定网址。

  2. 点击某个元素

    使用 chrome_click_element，选取页面中的 CSS selector 或元素序号进行点击操作。

  3. 填写表单 / 下拉选择

    用 chrome_fill_or_select，传入字段名或 selector + 要填的值。

  4. 截图页面 / 元素截图

    用 chrome_screenshot 工具，可以截图整个页面或某个具体元素，返回 base64 或文件。

  5. 抓取网络请求 / 响应

    使用 chrome_network_capture_start, chrome_network_capture_stop 等工具获取网络活动详情。

  6. 标签页内容语义搜索

    扩展内部有向量数据库能力，可以在多个标签页中检索语义相关内容。

  7. 书签 / 历史管理

    有 chrome_bookmark_add, chrome_history 等工具处理书签或历史记录。

八、完整流程回顾 & 示例操作（Windows 下）

下面是一个在 Windows 上从头到尾操作的示例流程：

  1. 安装 Node.js（18+）
  2. 用 npm install -g mcp-chrome-bridge 安装桥接器
  3. 下载 hangwin/mcp-chrome 最新扩展（zip），解压到某个目录
  4. 打开 Chrome → chrome://extensions/ → 启用开发者模式 → "加载已解压扩展" → 选择解压目录
  5. 在命令行中运行 mcp-chrome-bridge register（如有权限问题再加 fix-permissions）
  6. 在客户端（如 Claude Desktop / Cursor / Agent）里注册 MCP Server，采用 streamable-http 模式，URL 指到本地 12306 或桥接器所在地址
  7. 启动客户端 / AI Agent，发送一个命令给 Chrome，比如 "打开 https://example.com"
  8. 浏览器应自动跳转 / 打开该页面，客户端收到响应
  9. 接着你可以命令 "点击某个按钮"、"截图这个页面"、"抓取这个页面的 HTML 内容"等

九、常见问题 & 排错指南

问题 可能原因 解决办法
扩展提示未连接 / "Disconnected" 桥接器未注册 / 权限被拒绝 重新运行 mcp-chrome-bridge register 或 fix-permissions
客户端无法连接 / 超时 URL 配置错误 / 端口被占用 检查客户端配置的 URL、端口是否正确；尝试换端口或查看日志
扩展加载报错 文件结构有误 / manifest.json 错、缺失文件 确认下载的扩展是正确版本，且解压后保持目录结构完整
截图 / 点击等操作无效 脚本注入失败 / CSP 或页面策略限制 尝试在不同页面（普通 http/https）测试；有些网页 CSP 会阻止注入脚本
权限 / 执行权限错误 文件权限不对 / 系统阻止执行 在 Linux/macOS 上使用 chmod +x；在 Windows 上以管理员权限运行注册命令
postinstall 未自动注册 用 pnpm 的时候可能默认禁用脚本 手动运行 mcp-chrome-bridge register (LobeHub)

十、安全与注意事项

  • Chrome MCP Server 运行在本地，不会把数据发送到远程服务器，这保护了隐私。(GitHub)
  • 但仍需注意：不要在不可信网页或插件上使用脚本注入功能，避免被滥用。
  • 不要将 MCP 扩展 / 桥接器暴露到公网。
  • 如果更改桥接器端口或路径，一定要一并在客户端配置里同步更新。

如果你愿意的话，我可以为你生成一个用于 Windows 或 macOS 的"一键脚本"（批处理 / Shell 脚本），帮助你一步安装并运行 hangwin/mcp-chrome。要吗？

相关推荐
CoderJia程序员甲5 小时前
GitHub 热榜项目 - 日榜(2025-10-11)
ai·开源·github·ai编程·github热榜
CoderJia程序员甲9 小时前
GitHub 热榜项目 - 日榜(2025-10-14)
ai·开源·大模型·github·ai教程
kailp12 小时前
未来栖居的科技蓝图：「摩登豪宅」特展揭示2025智能家居“隐智”新范式
科技·ai·智能家居·云渲染·渲染图
渣渣苏15 小时前
LangChain4J实战，高效速通
ai·langchain4j
Apifox.15 小时前
如何在 Apifox 中通过 AI 一键生成几十个测试用例？
人工智能·程序人生·ai·测试用例·ai编程
Learn Beyond Limits16 小时前
TensorFlow Implementation of Content-Based Filtering｜基于内容过滤的TensorFlow实现
人工智能·python·深度学习·机器学习·ai·tensorflow·吴恩达
是Yu欸16 小时前
【AI视频】从单模型，到AI Agent工作流
人工智能·ai·ai作画·aigc·音视频·实时音视频
云草桑17 小时前
.net AI MCP 入门 适用于模型上下文协议的 C# SDK 简介（MCP）
ai·c#·.net·mcp
阿喵派我来抓鱼1 天前
深入理解 AI 流式接口：从请求到响应的完整解析
react.js·ai·前端框架·vue
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02BongoCat - 跨平台键盘猫动画工具03GitHub 镜像站点04UV安装并设置国内源05Linux下V2Ray安装配置指南06GitLab 零基础入门指南：从安装到项目管理全流程0746个Nano-banana 精选提示词，持续更新中08智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践092025羊城杯网络安全大赛 wp10UV 工具安装与国内镜像源配置指南