1. 为什么要在 VS Code 里让 AI 直接操作 Chrome先说清楚这套东西是什么。Chrome MCP 是一套把本地 Chrome 浏览器能力暴露给 AI 客户端的协议服务AI 通过它拿到「打开网页、点击元素、填表单、截图、读取页面内容」这些工具然后在 VS Code 里用自然语言驱动浏览器完成页面操作。适合谁适合做前端联调、自动化回归、后台批量录入、爬取结构化数据、以及不想手写 Playwright 脚本但又需要真实浏览器环境的开发者。我自己的场景很典型一个后台管理系统每天要手动登录、切菜单、填十几条测试数据。写 Playwright 脚本吧页面一改选择器就崩纯手动吧重复劳动。用 Chrome MCP 之后我在 VS Code 的 Copilot Chat 里说一句「打开本地后台用测试账号登录把这条 JSON 填进新增表单并提交」AI 就通过 MCP 调 Chrome 完成动作我只需要看结果截图。但这里有个绕不开的坑多工具鉴权分散。VS Code 里的 AI 插件要调模型Chrome MCP 本身不碰模型可你如果同时用 Cline、Roo Code、Continue、Codex CLI每个都要单独配一遍 API Key、Base URL、模型名改一次要改五个地方。TaoToken 的价值就在这——它提供一个统一的 API 通道Base URL 固定指向https://taotoken.net/api所有支持 OpenAI 兼容协议或 Anthropic 协议的客户端都填同一个 Key模型 ID 也统一管理。这样 Chrome MCP 负责「手」TaoToken 负责「脑」VS Code 负责「指挥台」三者拼起来才是一套能长期用的方案。下面我会从环境准备、TaoToken 统一 Key 配置、Chrome MCP 的 settings.json 与 mcp.json 可复制片段、一次真实的点击填表验证到常见报错排查一步步走完。全程 Windows 11 VS CodemacOS 路径差异我会标注。2. TaoToken 统一 Key 与 Base URL 前置配置在配 Chrome MCP 之前先把「脑」的部分搞定否则后面 AI 根本没模型可用MCP 配好了也是空转。TaoToken 的定位是一个统一的模型 API 接入层。你注册后在控制台创建一个 API Key之后所有客户端——VS Code 里的 Copilot 替代品、Cline、Roo Code、Codex CLI、Claude Code——都填这一个 KeyBase URL 统一写https://taotoken.net/api。模型 ID 用平台文档里列出的名称比如gpt-4o、claude-3-5-sonnet这类具体以控制台模型列表为准。这样做的好处是换模型只改一个 Model ID不用动 Key额度、用量、限流在一个地方看多工具之间不会出现「这个工具能跑那个工具 401」的割裂。拿 Key 的路径进控制台 → API Keys → 新建 → 复制。地址是https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite。注意这个 Key 只显示一次复制后先存到密码管理器。接下来是 VS Code 侧的配置。VS Code 本身不直接管模型 Key真正管的是你装的那个 AI 插件。以目前最常用的 Cline / Roo Code 为例它们的设置界面里选「OpenAI Compatible」然后填三件套配置项填写值Base URLhttps://taotoken.net/apiAPI Key你在 TaoToken 控制台创建的 KeyModel ID控制台模型列表里的名称如gpt-4o如果你用的是 Codex CLI它读的是~/.codex/auth.json这个文件里同样要写全三件套。Windows 下路径是C:\Users\你的用户名\.codex\auth.json。内容结构大致如下注意base_url结尾不要多加斜杠{ OPENAI_API_KEY: sk-你的TaoTokenKey, OPENAI_BASE_URL: https://taotoken.net/api, model: gpt-4o }Claude Code 的话走的是环境变量或 settings 文件把ANTHROPIC_BASE_URL指向https://taotoken.net/apiANTHROPIC_API_KEY填 TaoToken Key模型 ID 填 Claude 系列名称。这样 Claude Code 的润色、代码补全、Agent 能力也走同一条通道。这里要强调一个原则Base URL 只写https://taotoken.net/api不要自己拼/v1/chat/completions这种后缀客户端会自动补。我见过有人手拼路径导致 404排查半天以为是 Key 问题。配完这一层你的 VS Code 里至少有一个能正常对话的 AI 客户端了接下来才轮到 Chrome MCP 接管浏览器。3. Chrome MCP 的 settings.json 与 mcp.json 可复制配置这一节是核心所有片段都能直接复制。先理清两个文件的分工settings.json是 VS Code 的用户设置用来开启 MCP 支持和相关开关mcp.json是 MCP 服务器清单告诉 VS Code 用哪个命令启动 Chrome MCP 服务。excerpt 里提到的路径C:\Users\86136\.mcp\mcp.json是其中一种约定位置但更通用的做法是放在 VS Code 工作区的.vscode/mcp.json或者用户级的 MCP 配置里。我两种都试过工作区级更适合项目隔离用户级适合全局复用。先说连接方式的选择这决定了 mcp.json 怎么写。stdio 方式是把 MCP 服务当成一个 Node 子进程VS Code 通过标准输入输出跟它对话不走网络端口本地最稳推荐本地开发用。streamable HTTP 方式是把 MCP 启成一个 HTTP 服务监听localhost:12306之类的端口客户端用 POST 发 JSON适合跨机器、Docker、多人共用。本地单人用 stdio 就够了HTTP 反而要一直挂着服务麻烦。stdio 方式的第一步是找到mcp-chrome-bridge的安装位置。先全局装npm install -g mcp-chrome-bridge然后查路径npm list -g mcp-chrome-bridgepnpm 用户用pnpm list -g mcp-chrome-bridge假设输出路径是/Users/xxx/Library/pnpm/global/5那么最终要填进配置的脚本路径就是/Users/xxx/Library/pnpm/global/5/node_modules/mcp-chrome-bridge/dist/mcp/mcp-server-stdio.js。Windows 下类似形如C:\Users\你的用户名\AppData\Roaming\npm\node_modules\mcp-chrome-bridge\dist\mcp\mcp-server-stdio.js。把这段路径记下来。然后是mcp.jsonstdio 标准配置如下把路径替换成你刚查到的{ mcpServers: { chrome-mcp-stdio: { command: npx, args: [ node, C:\\Users\\你的用户名\\AppData\\Roaming\\npm\\node_modules\\mcp-chrome-bridge\\dist\\mcp\\mcp-server-stdio.js ] } } }注意 Windows 路径里的反斜杠在 JSON 里要写成双反斜杠\\这是最常见的低级错误写单反斜杠会解析失败。macOS/Linux 用正斜杠即可。接着是 VS Code 的settings.json开启 MCP 相关支持。按Ctrl Shift P打开命令面板输入Preferences: Open User Settings (JSON)加入以下片段{ chat.mcp.enabled: true, chat.mcp.discovery.enabled: true, github.copilot.chat.mcp.enabled: true }不同 VS Code 版本字段名略有差异如果某个字段报未知配置删掉它即可核心是chat.mcp.enabled。保存后重启 VS Code。如果你用的是 streamable HTTP 方式mcp.json改成{ mcpServers: { chrome-mcp-http: { url: http://localhost:12306/mcp } } }但前提是你已经手动把服务跑起来本地不推荐。配置写完后Chrome 侧还要装扩展并注册桥接器。扩展装好后如果图标是灰的、显示 Not Connected执行mcp-chrome-bridge register然后完全重启 Chrome。这一步是把 Native Messaging 的清单注册到系统里让扩展能和本地 Node 进程通信。注册完再回 VS CodeCtrl Shift P输入MCP: Reload Servers再输入MCP: List Servers能看到chrome-mcp-stdio处于 running 状态就说明链路通了。4. 验证请求让 AI 完成一次点击与填表配置对不对跑一次真实动作就知道。这一节我演示一个最小可复现的验证让 AI 打开一个本地或公开页面点击一个按钮往输入框填内容再截图确认。先在 VS Code 里打开 Copilot Chat或你用的 Cline/Roo Code 面板确认模型走的是 TaoToken 通道。你可以先问一句「你现在用的是哪个模型」确认返回正常说明 Key 和 Base URL 没问题。然后发指令比如用 chrome-mcp-stdio 打开 https://www.baidu.com在搜索框输入「TaoToken 统一 Key」点击搜索按钮然后截图给我看结果页。AI 会先调chrome_navigate打开页面再调类似chrome_click/chrome_type的工具。MCP 协议本身只干三件事列举有哪些工具、调用某个工具、返回结果。调用链路是 VS Code → mcp.json → Node 进程MCP Server→ Chrome 扩展 → 浏览器执行 → 结果原路返回。你在 Chat 面板里能看到工具调用日志每一步都有参数和返回。如果一切正常你会看到浏览器自动打开、输入、点击最后 Chat 里贴出一张 base64 截图。这就是端到端通了。再进阶一点验证填表。假设有个本地表单页http://localhost:3000/form发指令打开 http://localhost:3000/form把姓名填「测试用户」邮箱填 testexample.com点击提交按钮然后读取页面提示文字告诉我是否成功。AI 会依次调工具完成。这里的关键是元素定位Chrome MCP 通常通过可访问性树或选择器定位页面结构清晰时成功率很高。如果某个元素点不到可以让 AI 先截图再根据截图里的坐标或文本重新定位。验证成功的标志有三个一是MCP: List Servers里服务 running二是 Chat 里能看到工具调用返回 success三是浏览器真的动了、截图内容符合预期。三个都满足说明 Chrome MCP TaoToken 这套组合可以进入日常使用了。顺便说下模型选择对页面操作的影响。页面操作类任务对模型的指令遵循和工具调用能力要求较高建议用工具调用能力强的模型 ID。在 TaoToken 控制台里可以切换改一个 Model ID 就行不用重配 Key。这也是统一通道的好处——换模型成本极低。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节按真实报错来都是我或身边人踩过的。401 Unauthorized。这个几乎都是 Key 或 Base URL 的问题。先确认三件套是否齐全Base URL 是https://taotoken.net/apiKey 是 TaoToken 控制台新建的、没有多余空格Model ID 是控制台里真实存在的名称。常见错误是 Key 复制时带了换行或者 Base URL 写成了https://taotoken.net/api/v1导致路径重复。改完保存重启 VS Code 再试。如果还 401去控制台看这个 Key 是否被禁用或额度耗尽。local proxy failed / connection refused。这个多出现在 HTTP 方式或客户端自带代理设置时。stdio 方式一般不会遇到。排查顺序先确认mcp-chrome-bridge全局装成功npm list -g能看到再确认 mcp.json 里的脚本路径真实存在手动node 那个路径能启动不报错然后确认 Chrome 扩展已注册桥接器并重启过浏览器。如果客户端里配了自定义代理把它关掉本地 stdio 不需要代理。reading choices of undefined。这是 OpenAI 兼容协议里典型的响应解析错误意思是客户端拿到了一个不符合预期的返回体去读choices字段时发现是 undefined。原因通常是 Base URL 指错了地方返回的是 HTML 错误页或别的结构。解决确认 Base URL 是https://taotoken.net/api不要带多余路径确认 Model ID 拼写正确不存在的模型可能返回错误结构在客户端里看原始响应日志如果返回的是 404 页面就是路径问题。OAuth 相关报错。有些客户端比如 Codex CLI、部分 Claude 工具默认走 OAuth 登录流程如果你用 API Key 方式接入需要在配置里显式关闭 OAuth 或选择 API Key 模式。Codex CLI 的auth.json里如果同时存在 OAuth token 和 API Key可能冲突清掉 OAuth 字段只留 Key 和 Base URL。Claude Code 类似确保ANTHROPIC_API_KEY生效而不是走登录态。扩展显示 Not Connected。前面提过执行mcp-chrome-bridge register后重启 Chrome。如果还不行去chrome://inspect/#remote-debugging确认远程调试已启用按界面提示允许传入的调试连接。这一步很多人漏掉导致服务通了但扩展连不上。MCP: List Servers 里服务是 stopped。检查 mcp.json 的 JSON 语法Windows 路径双反斜杠逗号别多别少。可以用在线 JSON 校验器过一遍。另外确认npx和node在系统 PATH 里VS Code 能调用到。排查的核心思路就一条把链路拆成「模型通道」和「浏览器通道」两段分别验证。模型通道用一句普通对话测浏览器通道用MCP: List Servers和一次简单导航测。哪段断了修哪段不要混在一起猜。6. 把统一 Key 接入日常编码与 Agent 工作流配通之后真正提升效率的是把它变成日常习惯。我的做法是VS Code 里常驻一个走 TaoToken 通道的 AI 客户端负责「想」Chrome MCP 负责「做」两者通过 Chat 面板串起来。写前端时让 AI 打开本地 dev server 页面点一遍交互截图对比做数据录入时让 AI 读一份 JSON逐条填进后台表单做回归时让 AI 按清单点一遍关键路径并截图存档。如果你要长期跑编码和 Agent 任务建议把模型通道升级成 Coding Plan额度更稳适合高频调用。地址是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite。日常临时验证模型效果用模型对话页就够https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite。接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite里面有各客户端的完整配置示例。Claude Code 用户看https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaude_codeutm_campaignrewrite。一个实用技巧把常用的页面操作指令存成 VS Code 的 prompt 片段比如「登录后台并新增一条测试数据」下次直接调用不用每次重写。另一个技巧是给 Chrome MCP 的操作加截图确认AI 每步操作后截一张图出问题时你能快速定位是哪一步偏了。最后提醒一句Chrome MCP 操作的是你本地真实浏览器涉及登录态和敏感数据的页面指令要写清楚边界别让 AI 在没确认的情况下提交真实数据。测试环境先跑通再考虑生产。这套组合的价值不在于炫技而在于把重复的页面操作交给 AI你专注在真正需要判断的地方。