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 直接操作你日常使用的 ChromeCookie、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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_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 Servertype是stdio表示通过标准输入输出通信。AI 客户端只需要连接 TaoToken 网关的地址通常是http://localhost:3000就能访问 Chrome MCP Server 的所有工具。3.2 Claude Desktop 的配置Claude Desktop 的 MCP 配置文件在 macOS 上是~/Library/Application Support/Claude/claude_desktop_config.jsonWindows 上是%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是否为 3name和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 服务端即可生效。工具描述写得越清楚模型的调用准确率越高这比反复调整提示词有效得多。