CodeBuddy经验：AI编程神器Chrome MCP配置，自媒体人的最爱

小虎AI生活
242 阅读5分钟

我是小虎，浙江大学计算机本硕，专注AI编程 + AI教育。

“工具的价值，不在于拥有，而在于用对、用好、用到极致。”

大家好，我是小虎。

最近我们学员群里讨论MCP（模型上下文协议）讨论得热火朝天🔥，很多同学都提到了Playwright MCP这个自动化神器。

它确实很强大，能让AI操作浏览器，做自动化测试、爬取信息等，极大地解放了双手。

但用着用着，大家也发现了一些绕不过去的“坎”：每次跑自动化都像开了个“无痕模式”，需要反复登录；

为了实现一个简单操作，背后token的消耗和时间成本却居高不下。

就在此时，谷歌官方亲自下场，推出了它的“亲儿子”—— Chrome DevTools MCP（我们就简称Chrome MCP）。

这完全是Playwright MCP的Plus版！

我研究对比了一下，Chrome MCP的优势非常明显：

  • 👑 出身正统：一个是谷歌官方为亲儿子Chrome打造的，一个是第三方适配的。谁更懂Chrome，不言而喻。
  • ⚡️ 性能更强：得益于原生的支持，Chrome MCP的操作速度比 Playwright MCP 快了将近 15%-20% 。
  • 🎯 Token更省：完成同一个任务，Chrome MCP的上下文消耗更少。别小看这5%的差距，在长对话里，这可能就决定了你的AI会不会提前“失忆”。
  • 🤖 功能更全：内置26个专业工具，覆盖从模拟用户点击、到分析网络性能、再到调试DOM的全流程，能力深度远超同类。

最最关键的是，网上大部分教程都忽略了一个核心痛点：如何复用我们现有的浏览器登录状态？

每次都开一个新窗口，需要登录的场景基本就废了。

这几天我正好在写一个公众号文章一键多发的程序，也被这个问题搞得焦头烂额。

经过几天的摸索，我终于把这个“登录态复用”的终极方案给摸透了。

废话不多说，下面就是保姆级的配置教程，希望大家都能用好这个神器。

手把手教你配置，真正复用登录态

步骤一：安装Chrome扩展程序

我们需要先安装一个管理服务核心的Chrome扩展。

  1. 下载扩展文件：
  2. 从这个地址下载最新的 chrome-mcp-server.zip 文件：
  3. https://github.com/hangwin/mcp-chrome/releases

  1. 解压文件：

  2. 将下载的ZIP包解压到一个你方便找到的文件夹里。📥

  3. 安装到Chrome：

  4. 安装成功后，你应该能在扩展列表里看到 chrome-mcp-server。

    1. 打开Chrome浏览器，在地址栏输入 chrome://extensions/ 并回车。
    2. 打开页面右上角的 “开发者模式” 开关。
  • 直接将刚才解压好的整个文件夹拖拽到这个页面里。📂

步骤二：安装连接“桥梁”

这个“桥梁”是让扩展程序和我们的AI工具能互相通信的关键。打开你的终端（命令行工具），执行以下命令：

npm install -g mcp-chrome-bridge

如果提示权限问题，Windows用户请使用管理员模式运行终端，Mac用户请在命令前加上 sudo 。

步骤三：启动并连接服务

  1. 点击浏览器右上角的“扩展”图标（像一块拼图🧩），找到 chrome-mcp-server 并点击它。

  1. 在弹出的窗口中，点击紫色的 “连接” 按钮。

  1. 连接成功后，按钮会变成“断开”，并且状态会显示为“服务运行中”，同时会有一个端口号（比如12306）。

到这里，我们的服务就跑起来了！

步骤四：配置你的AI编程工具

最后一步，就是告诉你的AI工具（如CodeBuddy）去哪里找这个服务。这里提供两种方式。

方式一：通过命令行（CLI）配置

这是最直接的方式。打开终端，执行以下命令：

codebuddy mcp add --transport http mcp-chrome http://127.0.0.1:12306/mcp --scope user

注意：这里的 12306 端口号要和你上一步扩展界面里显示的端口号保持一致。

方式二：通过IDE手动配置文件

如果你更习惯在IDE中直接编辑配置文件，CodeBuddy也提供了非常方便的入口。

  1. 打开MCP面板：在CodeBuddy的界面中，找到并点击“配置MCP”按钮。

  1. 选择手动配置：在弹出的新面板中，点击“手动配置”。CodeBuddy会自动为你打开一个名为 CodeBuddy_mcp_settings.json 的配置文件。

  1. 添加配置代码：在该JSON文件中，添加以下代码块。如果文件已有其他配置，请确保将此代码块添加到最外层的 {} 中，并注意JSON格式（比如前一个配置项末尾需要加逗号）。
    "mcp-chrome": {
      "timeout": 60,
      "type": "stdio",
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browserUrl",
        "http://127.0.0.1:9222"
      ]
    }

*这里的 `"mcp-chrome"` 是服务名，可以自定义。`12306` 端口号要和你之前在Chrome扩展中看到的端口号保持一致。*

4. 保存并重启：保存 CodeBuddy_mcp_settings.json 文件，CodeBuddy会自动更新配置，最后生效的标志是有一个小绿灯。

📌 一个小知识点： npx 配置

这里的配置非常关键，我们来彻底搞清楚。

  • npx 方式：npx 命令的作用是让CodeBuddy自己去启动一个服务进程。但这个服务进程如何与浏览器交互，取决于它后面的参数：

    • 不带 --browserUrl：npx 启动服务后，服务会打开一个全新的Chrome窗口。
    • 带有 --browserUrl：npx 启动服务后，服务会去连接一个你手动打开的、带有调试端口的Chrome窗口。

做完这四步，你的AI编程助手就拥有了操作你当前浏览器的“火眼金睛”和“金箍棒”。

现在，去试试让它帮你处理那些需要登录才能完成的繁琐任务吧！🤩

参考资料：

  • 出处: Chrome for Developers Blog, 作者: Chrome DevTools team, 标题: Chrome DevTools (MCP) for your AI agent
  • 出处: GitHub, 作者: hangwin, 标题: mcp-chrome

Hey，大家好！我是小虎，浙江大学计算机本硕，专注AI编程 + AI教育。

每天2条朋友圈，分享AI干货。（很多不方便公开讲的都在朋友圈里）

avatar
文章
阅读
粉丝