企业官网建设流程全解析

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 Code，macOS 路径差异我会标注。

2. TaoToken 统一 Key 与 Base URL 前置配置

在配 Chrome MCP 之前，先把「脑」的部分搞定，否则后面 AI 根本没模型可用，MCP 配好了也是空转。

TaoToken 的定位是一个统一的模型 API 接入层。你注册后在控制台创建一个 API Key，之后所有客户端——VS Code 里的 Copilot 替代品、Cline、Roo Code、Codex CLI、Claude Code——都填这一个 Key，Base 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_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite。注意这个 Key 只显示一次，复制后先存到密码管理器。

接下来是 VS Code 侧的配置。VS Code 本身不直接管模型 Key，真正管的是你装的那个 AI 插件。以目前最常用的 Cline / Roo Code 为例，它们的设置界面里选「OpenAI Compatible」，然后填三件套：

如果你用的是 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/api，ANTHROPIC_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-bridge

pnpm 用户用：

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.json，stdio 标准配置如下，把路径替换成你刚查到的：

{ "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 Code，Ctrl + 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，把姓名填「测试用户」，邮箱填 test@example.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/api，Key 是 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_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite。日常临时验证模型效果，用模型对话页就够：https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite。接入文档在https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite，里面有各客户端的完整配置示例。Claude Code 用户看https://taotoken.net/claude-code-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claude_code&utm_campaign=rewrite。

一个实用技巧：把常用的页面操作指令存成 VS Code 的 prompt 片段，比如「登录后台并新增一条测试数据」，下次直接调用，不用每次重写。另一个技巧是给 Chrome MCP 的操作加截图确认，AI 每步操作后截一张图，出问题时你能快速定位是哪一步偏了。

最后提醒一句，Chrome MCP 操作的是你本地真实浏览器，涉及登录态和敏感数据的页面，指令要写清楚边界，别让 AI 在没确认的情况下提交真实数据。测试环境先跑通，再考虑生产。这套组合的价值不在于炫技，而在于把重复的页面操作交给 AI，你专注在真正需要判断的地方。