1. 为什么要把浏览器接进 AI 工作流：Chrome MCP Server 解决的真实问题
Chrome MCP Server 是一个基于 Chrome 扩展实现的 Model Context Protocol 服务端，它把浏览器标签页、页面内容、DOM 操作能力通过 MCP 协议暴露给 AI 客户端。简单说，它让 Claude、Cursor、Cline 这类支持 MCP 的 AI 工具，能够直接读取你当前打开的网页、点击按钮、填写表单、抓取结构化数据，而不需要你手动复制粘贴页面内容。适合谁？前端开发者、做数据采集的工程师、需要让 AI 操作 Web 界面的自动化玩家，以及想把浏览器变成 AI 可调用工具集的团队。
我最初接触这个项目是因为一个很具体的痛点：每次让 AI 帮我分析某个网页的 DOM 结构或者提取表格数据，都得手动把 HTML 复制到对话框里，页面一长就截断，动态渲染的内容更是没法处理。Chrome MCP Server 的思路是把浏览器本身变成一个 MCP 工具提供方，AI 客户端通过标准协议调用浏览器能力，标签页管理、内容提取、元素点击、表单填写这些操作全部走 MCP 的 tools 接口。
这个项目的技术架构值得拆开看。它由两部分组成：一个 Manifest V3 的 Chrome 扩展，负责实际的浏览器操作和页面脚本注入；一个 MCP 服务端，负责把浏览器能力包装成 MCP 协议标准的 tools 和 resources。扩展与 MCP 服务端之间通过消息传递通信，AI 客户端连接 MCP 服务端后，就能调用诸如 navigate、extract_content、click_element、input_text 这些工具。
和传统的浏览器自动化方案相比，它的差异在于协议层。Playwright、Puppeteer 是代码驱动的自动化库，你需要写脚本；Chrome MCP Server 是协议驱动的，AI 客户端自己决定调用哪个工具、传什么参数。这意味着你不需要预先写好完整的自动化流程，AI 可以根据当前页面状态动态决策下一步操作。对于探索性的任务，比如"帮我看看这个页面上有哪些可点击的按钮"或者"把这个表格的数据整理成 JSON"，这种动态决策能力比固定脚本灵活得多。
另一个实际价值是它复用了你已有的浏览器会话。很多网站需要登录才能访问内容，传统自动化方案要单独处理登录态，而 Chrome MCP Server 直接操作你日常使用的 Chrome，Cookie、LocalStorage、登录状态都是现成的。这一点在做内部系统数据提取或者需要登录的页面操作时特别省事。
项目采用 MIT 协议开源，代码托管在 GitHub 上，核心依赖是 Chrome 的扩展 API 和 MCP SDK。安装方式有两种：从源码构建后加载到 Chrome，或者如果作者发布了商店版本可以直接安装。下面我会从环境准备开始，一步步走完扩展加载、MCP 服务端配置、AI 客户端接入、端到端验证的完整链路。
需要提前说明的是，这个项目目前还在活跃开发中，API 和配置格式可能会有变化。我写这篇文章时用的是仓库主分支的代码，如果你跟进的是更新版本，部分配置字段名可能需要对照最新文档调整。另外，MCP 协议本身也在演进，不同 AI 客户端对 MCP 的支持程度不一样，后面我会具体说明哪些客户端验证过、哪些需要额外配置。
2. 前置准备：Chrome 扩展加载与 MCP 服务端环境搭建
在开始配置之前，先把环境要求理清楚。Chrome MCP Server 对浏览器版本有要求，需要 Chrome 88 以上，因为用到了 Manifest V3。Edge、Opera 这些 Chromium 内核的浏览器理论上也支持，但我实测下来 Chrome 最稳。Node.js 需要 16 以上，npm 8 以上，因为构建扩展和服务端都要用。操作系统方面 Windows、macOS、Linux 都可以，我用的是 macOS 加 Chrome 120 的组合。
第一步是克隆仓库并构建扩展。打开终端，执行以下命令：
git clone https://github.com/hangwin/mcp-chrome.git cd mcp-chrome npm install npm run buildnpm install会安装项目依赖，包括 MCP SDK、构建工具等。npm run build会编译扩展代码，产物在dist目录下。如果你要开发调试，可以用npm run dev启动监听模式，文件改动会自动重建，但加载到 Chrome 的扩展需要手动刷新。
构建完成后，打开 Chrome，在地址栏输入chrome://extensions/进入扩展管理页面。右上角打开"开发者模式"开关，然后点击"加载已解压的扩展程序"，选择项目中的dist目录。加载成功后，你会在扩展列表里看到 Chrome MCP Server，同时浏览器工具栏会出现它的图标。
这里有个容易踩的坑：如果你之前加载过旧版本的扩展，重新构建后需要先在扩展管理页面点击刷新按钮，否则 Chrome 可能还在用缓存的旧代码。另外，dist目录的路径要选对，有些构建配置会把产物放在dist/chrome这样的子目录里，具体看项目的构建输出。
扩展加载完成后，还需要启动 MCP 服务端。服务端的作用是监听 AI 客户端的连接，把 MCP 协议请求转发给扩展。在项目根目录执行：
npm run start:mcp这个命令会启动一个本地服务，默认监听某个端口（具体端口看项目配置，通常是 8080 或类似）。服务端启动后，扩展会自动连接上来，你可以在扩展的 popup 界面或者 background 控制台看到连接状态。
如果你需要让 AI 客户端连接到这个 MCP 服务端，还需要一个 MCP 网关或者代理来统一管理多个 MCP 服务。这里我推荐用 TaoToken 来做统一接入，它提供了标准的 MCP 服务端配置和 API 网关能力，可以把 Chrome MCP Server 和其他 MCP 工具一起挂载到同一个入口。TaoToken 的 API 地址是https://taotoken.net/api，你可以在它的控制台里创建 API Key，然后在 MCP 配置里引用。
具体来说，TaoToken 的角色是帮你管理 MCP 服务端的连接和鉴权。Chrome MCP Server 本身是一个本地 MCP 服务，AI 客户端要连接它需要知道地址和协议。TaoToken 提供了一个统一的 MCP 网关，你可以在它的配置里注册 Chrome MCP Server 的地址，然后 AI 客户端只需要连接 TaoToken 的网关，就能访问包括 Chrome MCP Server 在内的所有已注册 MCP 服务。这样做的好处是配置集中管理，换 AI 客户端时不用重新配每个 MCP 服务。
要使用 TaoToken 的 MCP 网关，你需要先在官网注册账号，然后在控制台创建 API Key。API Key 的创建入口在控制台的 API Keys 页面，创建后复制保存，后面配置 MCP 客户端时会用到。TaoToken 的官网地址是https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，注册流程比较简单，邮箱验证后就能创建 Key。
环境准备阶段还有一件事：确认你的 AI 客户端支持 MCP。目前 Claude Desktop、Cursor、Cline、Continue 这些工具都支持 MCP 协议，但配置方式各不相同。Claude Desktop 需要在配置文件里手动添加 MCP 服务端，Cursor 有图形化的 MCP 配置界面，Cline 作为 VS Code 扩展也有自己的配置入口。下一节我会给出具体的配置片段。
3. 可复制配置：MCP 服务端与 AI 客户端接入片段
这一节给出可以直接复制使用的配置片段。先说明配置文件的路径，不同客户端的配置位置不一样，我会分别标注。
3.1 Chrome MCP Server 的 MCP 配置
Chrome MCP Server 项目本身提供了一个 MCP 服务端的配置模板，通常在项目根目录的mcp-config.json或者类似文件中。如果你要用 TaoToken 的网关来统一管理，需要在 TaoToken 的 MCP 配置里注册 Chrome MCP Server。以下是一个标准的 MCP 服务端配置片段，适用于大多数支持 MCP 的客户端：
{ "mcpServers": { "chrome-mcp-server": { "command": "node", "args": ["/path/to/mcp-chrome/dist/mcp-server.js"], "env": { "CHROME_MCP_PORT": "8080", "CHROME_MCP_HOST": "localhost" } } } }这个配置的意思是：AI 客户端启动时，会执行node /path/to/mcp-chrome/dist/mcp-server.js来启动 Chrome MCP Server 的 MCP 服务端进程。args里的路径要替换成你实际的项目路径。env里的端口和主机按需调整，默认 8080 和 localhost 通常没问题。
如果你用 TaoToken 作为 MCP 网关，配置会有所不同。TaoToken 的 MCP 配置通常是一个统一的 JSON 文件，你需要在里面添加 Chrome MCP Server 作为一个上游服务。以下是一个示例：
{ "gateway": { "port": 3000, "apiKey": "你的TaoToken API Key" }, "upstreams": [ { "name": "chrome-mcp-server", "type": "stdio", "command": "node", "args": ["/path/to/mcp-chrome/dist/mcp-server.js"], "env": { "CHROME_MCP_PORT": "8080" } } ] }这个配置里，gateway部分是 TaoToken 网关自身的配置，apiKey填你在 TaoToken 控制台创建的 Key。upstreams数组里注册 Chrome MCP Server，type是stdio表示通过标准输入输出通信。AI 客户端只需要连接 TaoToken 网关的地址（通常是http://localhost:3000），就能访问 Chrome MCP Server 的所有工具。
3.2 Claude Desktop 的配置
Claude Desktop 的 MCP 配置文件在 macOS 上是~/Library/Application Support/Claude/claude_desktop_config.json，Windows 上是%APPDATA%\Claude\claude_desktop_config.json。打开这个文件，添加以下内容：
{ "mcpServers": { "chrome-mcp": { "command": "node", "args": ["/Users/yourname/projects/mcp-chrome/dist/mcp-server.js"], "env": { "CHROME_MCP_PORT": "8080" } } } }保存后重启 Claude Desktop，在对话界面应该能看到 MCP 工具列表里出现 Chrome 相关的工具。如果没出现，检查路径是否正确、Node 是否在 PATH 里。
3.3 Cursor 的配置
Cursor 的 MCP 配置在设置界面的 MCP 部分，也可以直接编辑配置文件。路径通常是~/.cursor/mcp.json。配置格式和 Claude Desktop 类似：
{ "mcpServers": { "chrome-mcp": { "command": "node", "args": ["/Users/yourname/projects/mcp-chrome/dist/mcp-server.js"], "env": { "CHROME_MCP_PORT": "8080" } } } }Cursor 的 MCP 支持相对成熟，配置后可以在 Composer 里直接调用 Chrome 工具。
3.4 Cline 的配置
Cline 是 VS Code 扩展，它的 MCP 配置在 VS Code 的 settings.json 里，或者通过 Cline 的设置界面添加。以下是一个示例配置：
{ "cline.mcpServers": { "chrome-mcp": { "command": "node", "args": ["/Users/yourname/projects/mcp-chrome/dist/mcp-server.js"], "env": { "CHROME_MCP_PORT": "8080" } } } }Cline 的配置项名称是cline.mcpServers，注意不要写成mcpServers。
3.5 关键参数说明
上面几个配置里反复出现的参数，这里统一说明。command是启动 MCP 服务端的命令，通常是node。args是命令参数，第一个参数是 MCP 服务端脚本的路径，这个路径必须是你实际克隆项目的路径。env是环境变量，CHROME_MCP_PORT指定 MCP 服务端监听的端口，默认 8080，如果端口被占用可以改成其他值，但扩展那边的配置也要同步改。
如果你用 TaoToken 的网关，还需要在 AI 客户端里配置 TaoToken 的 API Key。以 Claude Desktop 为例，配置如下：
{ "mcpServers": { "taotoken-gateway": { "command": "npx", "args": ["-y", "@taotoken/mcp-gateway"], "env": { "TAOTOKEN_API_KEY": "你的API Key", "TAOTOKEN_GATEWAY_PORT": "3000" } } } }这个配置会启动 TaoToken 的 MCP 网关，网关再连接 Chrome MCP Server。AI 客户端只需要和网关通信，网关负责路由到具体的 MCP 服务。TaoToken 的 API Key 在控制台的 API Keys 页面创建，创建后复制到TAOTOKEN_API_KEY环境变量里。
配置完成后，重启 AI 客户端，在工具列表里应该能看到 Chrome MCP Server 提供的工具。如果看不到，先检查 MCP 服务端进程是否正常启动，可以在终端手动执行node /path/to/mcp-server.js看有没有报错。
4. 验证请求：一次端到端调用与成功结果
配置完成后，最重要的一步是验证整条链路是否跑通。我会用一个具体的例子来演示：让 AI 客户端通过 Chrome MCP Server 打开一个网页，提取页面标题和主要内容，然后返回结果。
4.1 启动顺序
先确保 Chrome 已经加载了扩展，并且扩展处于启用状态。然后启动 MCP 服务端：
cd /path/to/mcp-chrome npm run start:mcp终端会输出类似MCP server listening on port 8080的日志。接着启动 AI 客户端（比如 Claude Desktop），客户端会自动连接 MCP 服务端。你可以在客户端的工具列表里确认 Chrome MCP Server 的工具是否出现。
4.2 调用示例
在 Claude Desktop 的对话框里输入以下指令：
请使用 Chrome MCP Server 打开 https://github.com/hangwin/mcp-chrome，然后提取页面的标题和 README 部分的前 500 个字符。Claude 会调用 MCP 工具，具体流程是：先调用navigate工具打开 URL，然后调用wait_for_load等待页面加载完成，再调用extract_content提取内容。你可以在 Claude 的响应里看到工具调用记录。
如果一切正常，Claude 会返回类似这样的结果：
页面标题：GitHub - hangwin/mcp-chrome: Chrome MCP Server README 前 500 字符：Chrome MCP Server is a Model Context Protocol (MCP) server based on Chrome extension...4.3 用 curl 直接验证 MCP 服务端
如果你不想通过 AI 客户端，也可以直接用 curl 测试 MCP 服务端是否正常响应。MCP 协议基于 JSON-RPC，你可以发送一个tools/list请求来列出所有可用工具：
curl -X POST http://localhost:8080/mcp \ -H "Content-Type: application/json" \ -d '{ "jsonrpc": "2.0", "id": 1, "method": "tools/list", "params": {} }'如果服务端正常，会返回一个 JSON 数组，列出所有工具的名称和参数定义。你会看到navigate、extract_content、click_element、input_text等工具。
再测试一个具体的工具调用：
curl -X POST http://localhost:8080/mcp \ -H "Content-Type: application/json" \ -d '{ "jsonrpc": "2.0", "id": 2, "method": "tools/call", "params": { "name": "navigate", "arguments": { "url": "https://example.com" } } }'这个请求会让浏览器打开 example.com。如果返回{"result": {"success": true}}之类的响应，说明工具调用链路是通的。
4.4 验证扩展与 MCP 服务端的连接
扩展和 MCP 服务端之间的连接状态可以在 Chrome 的扩展管理页面查看。点击 Chrome MCP Server 的"服务工作线程"链接，会打开 background 页面的控制台。如果连接正常，控制台会输出类似Connected to MCP server的日志。如果看到Connection failed或者WebSocket error，说明扩展没连上 MCP 服务端，需要检查端口配置是否一致。
另一个验证方法是看扩展的 popup 界面。点击浏览器工具栏的扩展图标，popup 里会显示当前连接状态、MCP 服务端地址、已注册的工具数量等信息。如果状态显示"已连接"，说明链路是通的。
4.5 成功结果的判断标准
一次完整的端到端调用成功，应该满足以下条件：AI 客户端能列出 Chrome MCP Server 的工具；调用navigate后浏览器确实打开了目标页面；调用extract_content能返回页面文本内容；调用click_element能触发页面上的点击事件。如果这四个操作都正常，说明整条链路已经跑通。
我实测下来，最容易出问题的环节是扩展和 MCP 服务端的连接。有时候扩展加载了但没自动连接，需要在扩展的 popup 里手动点击"连接"按钮。另外，如果 Chrome 开了多个用户配置文件，扩展可能加载在错误的配置文件里，导致 MCP 服务端找不到扩展。这种情况下，确认 Chrome 启动时用的是加载了扩展的那个配置文件。
5. 常见报错排查：401、local proxy failed、reading choices、OAuth
这一节整理我在配置和使用过程中遇到的实际报错，以及对应的排查方法。这些报错在 MCP 接入场景里比较典型，遇到时不用慌，按步骤排查基本都能解决。
5.1 401 Unauthorized
报错信息通常是401 Unauthorized或者Invalid API key。这个报错一般出现在用 TaoToken 网关或者需要鉴权的 MCP 服务端时。原因是 API Key 没配置、配置错误、或者 Key 过期了。
排查步骤：先确认 TaoToken 控制台里的 API Key 是否有效，可以在控制台的 API Keys 页面查看 Key 的状态。然后检查 AI 客户端的配置里TAOTOKEN_API_KEY环境变量是否填对，注意不要有多余的空格或换行。如果 Key 是对的，检查 MCP 服务端的日志，看请求有没有到达服务端。有时候是网关的端口配置不对，请求根本没转发到 MCP 服务端。
另一个可能的原因是 Chrome MCP Server 本身的鉴权配置。如果你在 MCP 服务端的配置里开了鉴权，AI 客户端连接时需要带上正确的 token。检查mcp-config.json里的auth字段，确认 token 和客户端配置一致。
5.2 local proxy failed
报错信息是local proxy failed或者proxy connection refused。这个报错通常和网络代理配置有关。如果你在用 TaoToken 网关，网关本身可能配置了上游代理，但代理地址不可达。
排查步骤：检查 TaoToken 网关的配置文件，看proxy字段是否配置了正确的地址。如果你不需要代理，把proxy字段删掉或者设为null。另外，检查本地防火墙是否阻止了 MCP 服务端的端口，可以临时关闭防火墙测试。
还有一种情况是 MCP 服务端监听的地址是127.0.0.1，但 AI 客户端尝试用localhost连接，某些系统上这两个地址解析不一致。解决办法是把配置里的地址统一成127.0.0.1或者localhost，不要混用。
5.3 reading choices 报错
报错信息是Error reading choices或者Failed to read response choices。这个报错通常出现在 AI 客户端解析 MCP 服务端响应时。原因是 MCP 服务端返回的数据格式不符合客户端预期，或者响应被截断了。
排查步骤：先看 MCP 服务端的日志，确认它返回了什么。如果返回的是错误信息，根据错误信息进一步排查。如果返回的是正常数据但客户端解析失败，可能是 MCP 协议版本不匹配。检查 AI 客户端支持的 MCP 协议版本，和 Chrome MCP Server 使用的版本是否一致。有些客户端只支持特定版本的 MCP，版本不匹配会导致解析失败。
另一个常见原因是响应数据太大。比如extract_content提取了整个页面的 HTML，数据量超过客户端的缓冲区限制，导致响应被截断。解决办法是在调用extract_content时指定selector参数，只提取需要的部分，或者用format: "text"只提取文本内容。
5.4 OAuth 相关报错
报错信息是OAuth token expired或者OAuth authentication failed。这个报错出现在 MCP 服务端需要 OAuth 鉴权的场景。Chrome MCP Server 本身不涉及 OAuth，但如果你通过 TaoToken 网关连接，网关可能配置了 OAuth 鉴权。
排查步骤：检查 TaoToken 控制台的 OAuth 配置，确认 token 是否过期。如果过期了，重新生成 token 并更新到配置文件。另外，检查 OAuth 的回调地址是否配置正确，有些 OAuth 服务要求回调地址必须和注册时一致。
如果你不需要 OAuth 鉴权，可以在 TaoToken 网关的配置里把auth.type设为apiKey，用 API Key 代替 OAuth。这样配置更简单，也不会有 token 过期的问题。
5.5 扩展加载失败
报错信息是Manifest file is missing or unreadable或者Could not load extension。这个报错出现在 Chrome 加载扩展时。原因是dist目录里没有manifest.json，或者 manifest 格式不对。
排查步骤：先确认npm run build成功执行了，dist目录里有manifest.json文件。如果文件存在但 Chrome 还是报错，打开manifest.json检查manifest_version是否为 3，name和version字段是否填写。有时候构建产物里的 manifest 缺少必要字段，需要手动补上。
另一个原因是 Chrome 的开发者模式没打开。在chrome://extensions/页面右上角确认"开发者模式"开关是打开的，否则无法加载已解压的扩展。
5.6 MCP 工具列表为空
AI 客户端连接后工具列表是空的，没有任何 Chrome 相关工具。这个问题的原因通常是 MCP 服务端没启动，或者扩展没连接到 MCP 服务端。
排查步骤：先在终端确认 MCP 服务端进程在运行，ps aux | grep mcp-server能看到进程。然后检查扩展的 background 控制台，看有没有连接成功的日志。如果扩展没连接，在扩展的 popup 里手动点击连接按钮。如果还是不行，检查 MCP 服务端的端口和扩展配置的端口是否一致。
还有一个可能的原因是 AI 客户端的 MCP 配置没生效。修改配置文件后需要重启客户端，有些客户端不会自动重载配置。重启后如果工具列表还是空的，检查客户端的日志，看有没有 MCP 连接相关的错误。
6. 把浏览器能力接入 AI 工作流的下一步
走到这里，你应该已经跑通了 Chrome MCP Server 的完整链路：扩展加载、MCP 服务端启动、AI 客户端接入、端到端调用验证。接下来可以做的事情取决于你的具体场景。
如果你主要用 AI 做编码辅助，可以把 Chrome MCP Server 和 Coding Plan 结合使用。Coding Plan 提供了长期的编码任务管理能力，Chrome MCP Server 负责浏览器侧的交互，两者配合可以完成"打开文档页面、提取 API 说明、生成代码"这样的完整流程。Coding Plan 的入口在 TaoToken 控制台，创建后可以获取 API Key 和接入地址。
如果你需要验证模型对浏览器工具调用的支持程度，可以用模型对话功能直接测试。模型对话页面提供了交互式的测试环境，你可以输入指令，观察模型是否正确调用了 Chrome MCP Server 的工具。这对于调试工具描述和参数格式很有帮助。
如果你在接入过程中遇到问题，接入文档里有详细的配置说明和常见问题解答。API Keys 页面可以管理你的所有 Key，包括创建、删除、查看使用量。这两个入口都在 TaoToken 控制台里，建议配置完成后先去 API Keys 页面确认 Key 的状态正常。
最后分享一个实用技巧：Chrome MCP Server 的工具描述是可以自定义的。如果你发现 AI 客户端调用某个工具时参数传得不对，可以修改 MCP 服务端里工具的描述文本，让模型更清楚地知道每个参数的用途。这个改动在mcp-config.json或者对应的工具定义文件里，改完后重启 MCP 服务端即可生效。工具描述写得越清楚，模型的调用准确率越高，这比反复调整提示词有效得多。
