入门教程：配置 Chrome MCP Server，让 AI 助手接管你的浏览器

AIBooter
2,625 阅读4分钟

入门教程：配置 Chrome MCP Server，让 AI 助手接管你的浏览器

大家好，今天我们来介绍一个强大的浏览器自动化工具——Chrome MCP Server。与 Playwright 等传统工具不同，Chrome MCP Server 能够直接与你日常使用的 Chrome 浏览器进行交互，利用你已有的用户配置和登录状态，让大模型或聊天机器人能够无缝接管浏览器执行任务。

简单来说，其核心优势在于可以直接使用你当前的浏览器登录态，无需在独立的、无痕的浏览器实例中重新登录，这在处理需要登录才能访问的网站时非常方便。

接下来，让我们一步步完成配置过程。

环境准备

  • Chrome 或其他 Chromium 内核的浏览器
  • 已安装 Node.js 及 npm 环境

一、下载并安装 Chrome 插件

首先，我们需要安装 Chrome MCP Server 的浏览器插件。

1. 下载插件

插件的 GitHub 项目地址为：https://github.com/hangwin/mcp-chrome

我们可以从其 Releases 页面下载最新版本的插件压缩包。本文以 v0.0.6 版本为例：
https://github.com/hangwin/mcp-chrome/releases/download/v0.0.6/chrome-mcp-server-0.0.6.zip

2. 解压文件

将下载好的 chrome-mcp-server-0.0.6.zip 文件解压到本地一个固定的文件夹中。

3. 在 Chrome 中安装插件

打开 Chrome 浏览器，进入扩展程序管理页面（chrome://extensions/），然后打开“开发者模式”。

点击“加载已解压的扩展程序”，选择上一步解压出来的文件夹。

安装成功后，你会在扩展程序列表中看到 “Chrome MCP Server”。

二、全局安装 mcp-chrome-bridge

接下来，我们需要在本地环境中安装一个桥接工具 mcp-chrome-bridge，它负责连接 MCP 客户端（如 Claude Code）和浏览器插件。

打开你的终端或命令行工具，执行以下命令进行全局安装。

npm install -g mcp-chrome-bridge

三、配置 MCP 客户端（以 Claude Code 为例）

安装好桥接工具后，我们就可以在支持 MCP 协议的客户端中添加这个浏览器服务了。这里以 Claude Code 为例。

执行以下命令，将 Chrome MCP Server 添加为一个名为 chrome-mcp-server 的用户级服务。

claude mcp add chrome-mcp-server -s user -- npx -y mcp-remote http://127.0.0.1:12306/mcp

此时，如果我们尝试用 claude mcp list 命令检查连接状态，会发现连接是失败的。

同样，在 Claude Code 的界面中也会显示连接失败。这是正常的，因为我们还没有在浏览器中启动 Chrome MCP Server 服务。

四、启动并配置 Chrome MCP Server

现在，我们回到 Chrome 浏览器来启动并初始化 Server。

1. 启动 Server

在 Chrome 的插件栏中，找到 Chrome MCP Server 的图标并点击它。

会弹出一个管理页面，点击页面上的“连接”按钮。

连接后，页面会显示 Server 正在运行中。

2. 初始化语义引擎

首次启动需要初始化语义引擎。点击“初始化语义引擎”，并在弹出的模型选择中选择一个 Base 模型。

等待模型下载和初始化过程完成，完成后页面会显示“语义引擎已就绪”。

五、在客户端中完成重连

Server 准备就绪后，我们回到 MCP 客户端（Claude Code）完成连接。在服务列表中，选中之前连接失败的 chrome-mcp-server。

按回车键进行重连。

稍等片刻，即可看到连接成功的提示。

六、功能测试：获取 B 站关注数量

万事俱备，现在我们可以通过自然语言指令来测试一下效果了。我们让 AI 助手使用 Chrome MCP 去查询我在 B 站的关注数量。

在客户端中输入以下 Prompt 提示词：

查看一下 B 站我的关注数量，使用 Chrome mcp

AI 助手会开始规划并执行任务，自动打开新的浏览器标签页或使用现有标签页进行操作。

在这个过程中，我们可以看到 Chrome 浏览器被自动控制，打开了 B 站并导航到相应页面。最关键的是，它直接利用了当前浏览器的登录状态，无需我们再次输入用户名和密码。

最终，AI 助手成功地在页面上找到了关注数量，并返回了正确的结果。

六、总结

通过以上步骤，我们成功配置并测试了 Chrome MCP Server。这个工具极大地简化了需要用户登录才能进行的浏览器自动化任务，为 AI 助手与我们日常工作环境的结合提供了新的可能性。

参考资料：

.preview-wrapper pre::before { position: absolute; top: 0; right: 0; color: #ccc; text-align: center; font-size: 0.8em; padding: 5px 10px 0; line-height: 15px; height: 15px; font-weight: 600; } .hljs.code__pre > .mac-sign { display: flex; } .code__pre { padding: 0 !important; } .hljs.code__pre code { display: -webkit-box; padding: 0.5em 1em 1em; overflow-x: auto; text-indent: 0; } h2 strong { color: inherit !important; }

本文使用 文章同步助手 同步

avatar
文章
阅读
粉丝