没写一行代码，我用 AI 做的浏览器扩展让同事告别繁琐重复的工作，直接节省 95% 时间！
我们日常工作中最磨人的，就是那些重复又繁琐的事务，不仅累人，还特别耗神，慢慢把人的精气神都消磨殆尽。
我们公司广告业务的优化师，每天就有一项重复又繁琐的固定工作：在广告后台上传客户提供的广告素材。客户给的素材一般是一条微博帖子，类似这样：
他们需要在本地创建一个文件，然后按照顺序点开帖子里面的每一张图，放大之后右键保存到刚才的文件夹，并且还要按顺序命名，最后再切到广告后台逐一上传。
整个过程不仅耗时费力，人工操作还特别容易出错，比如漏图、顺序混乱等问题。
广告助手浏览器扩展
之前我让他们使用腾讯的类似 OpenClaw 工具 WorkBuddy，它写个技能，之后只要输入微博链接，就能自动下载帖子里的所有图片，按顺序命名并保存到指定文件夹，已经帮他们省下大量时间，而且完全不会出错。
今天我突然想到：不如直接做一个浏览器插件，把下载素材 + 上传广告后台两步直接一步到位？效率肯定更高！
说干就干，因为涉及到具体写代码的活，我还是切换到了 Claude Code，直接把需求丢给它：
帮我做个浏览器助手：
- 在 https://ad.weibo.com/ 后台，显示一个浮动按钮，名字是助手，点击它弹出一个输入框，输入一个微博帖子的地址，把帖子中所有图片都下载下来，注意只是内容中的图片，头像和其他装饰性的图片不需要。
- 然后帮我在微博后台的的图片库地址（https://ad.weibo.com/asset/creative/picture），把所有图片都上传了
我公众号「WordPress果酱」已经有写过 Claude Code 详细的使用教程，这里就不再截图，如果你还不太熟悉，可以参考我这篇文章：靠 AI 编程赚钱了，分享一次用 Claude Code 快速开发 WordPress 主题的实战经历，虽然是介绍使用 Claude Code 做 WordPress 开发，大方向是一致的。
对于开发浏览器扩展这种有详细标准开发文档的项目，Claude Code 是非常擅长的，很快就快速搭建好了完整结构：
manifest.json：配置权限和脚本content.js：在页面注入浮动按钮background.js：后台打开微博链接，提取图片，调用上传 APIstyle.css：UI 样式
代码逻辑看起来完整：提取图片 → 转 blob → 调用上传 API → 返回成功。
接着 Claude 告诉我怎么安装，在 Chrome 浏览器输入 chrome://extensions：
先打开「开发者模式」，然后点击「加载未打包的扩展程序」，选择刚刚开发的扩展，然后就得到上图的「微博广告助手1.0.0」这个浏览器扩展。
装好后进入微博广告后台，在页面的右下角果然出现一个「助手」浮动按钮：
点击该按钮，有个输入框，然后输入微博帖子地址，点击开始处理：
本以为一次成功，结果刷新图片库，并没有相应的图片。
反复调试扩展，我差点红温
我把问题告诉 Claude Code，它现开始怀疑它从网上获取的微博广告上传的 API 地址错误，让我自己手动上传一张图片，之后手动抓包拿到真实的上传地址，然后它改代码，我去浏览器扩展页面重载加载浏览器扩展，再次测试
还是不对。
Claude Code 又怀疑是参数格式不对，又让我同样操作再次抓包，它再改，我再测……
和它搞了好几轮，人都麻了，心态有点崩。主要每次我测试过程都要重新加载扩展，刷新页面，输入微博帖子，看结果。
当时心里疯狂吐槽：就这？AI 也不过如此？跟我自己写代码 debug 有啥区别？
我当时都有点红温，甚至有点想 “骂它” 了。但每次跟它说问题，它都特别礼貌地认错，然后继续努力修复。
Chrome 远程调试是真神
再这么手动调试下去肯定不行，都 AI 时代了，应该想要更加自动化一点，想起前面的介绍过的 Chrome 的远程调试（Remote Debugging）。
Chrome 144+ 新增的这个功能，可以让 AI 直接接管你已登录、带完整 Cookie 的真实浏览器，无需新开无痕窗口、无需重复登录账号，更不用编写复杂的自动化代码，调试效率直接拉满。
我直接跟 Claude Code 说：
我的 Chrome 已经开启了 chrome://inspect/#remote-debugging，帮我配置 MCP 连接到当前浏览器。
Claude Code 会添加一个 Chrome DevTools MCP 服务信息，然后重启一下 Claude Code 才能生效，输入 /quit 退出，再次进入就生效。
接着我直接和 Claude Code 说：
我们这样调试太麻烦了，你直接使用 Chrome DevTools MCP 远程调试我的 Chrome 浏览器，你自己在微博广告后台上传一张图片，自己看问题出在哪，自己改代码、自己重载扩展、自己测试，重复这个流程，直到修好为止。
接下来的画面真的惊到我，我的浏览器自动弹出授权，我点允许：
Claude 自己打开微博广告后台图片库，自己点上传，自己抓包、看请求、分析流程……
微博广后台的上传是两步操作！
最初代码只调用了第一步，导致图片显示"上传成功"但实际没有进入素材库。
第一步：上传图片文件，获取 pic_id
POST https://iotep-tools.biz.weibo.com/api/v1/image/upload
Body: FormData（file）
返回: { code: 0, data: { pic_id: "xxx" } }
第二步：用 pic_id 保存到素材库
POST https://assets.biz.weibo.com/api/v1/assets/pic/save
Body: JSON { picInfos: [{ pid: "xxx", source: 0, picName: "image.jpg" }] }
返回: { code: 0, message: "success" }
两步都必须成功，图片才真正进入素材库。
找到问题，Claude 瞬间改好代码，真的乖乖的自己去重新加载扩展，自己点击「助手」按钮，自己输入微博帖子，自己点击「开始处理」，上传成功之后，自己刷新了一下图片库。最后还贴心告诉我它看到上传成功了，让我最后再确认一下，真是太贴心，我哭死｡°(°¯᷄◠¯᷅°)°｡
可以说 Chrome DevTools MCP 在这次浏览器扩展开发中起到了决定性的作用。
直接观察真实请求，可以拿到了完整的请求地址、Body 格式、响应结构，不需要开发者手动在 Network 面板里一个个点开查看。
加速了调试闭环：传统流程是：改代码 → 重载扩展 → 手动操作 → 打开 DevTools → 找到请求 → 分析。而有了MCP，AI 自己完成整个闭环，我只需要旁观。
大幅降低试错成本：如果没有 MCP，我可能还要怀疑人生几十轮，才能想到 “是不是还有第二步接口”，所以 MCP 的价值不只是"方便"，而是把本来需要人工介入的信息获取环节自动化了，让 AI能直接接触到最真实的运行时数据，而不是只对着静态代码瞎猜。
每个人都能做浏览器扩展
这次从 0 到 1 做出浏览器扩展，我没有写一行代码，没有查一篇文档，甚至最后没有深度参与调试。
我只做了三件事：提需求 → 给权限 → 等结果。
放在以前，开发一个针对特定平台的浏览器扩展，需要懂前端、懂抓包、懂后台接口、懂调试，至少要耗费半天甚至一天。
而现在，在 Claude Code + Chrome DevTools MCP 的加持下，我一个只擅长写 WordPress 插件代码的后端程序员，只用了不到2 个小时就搞定。如果一早就用 MCP 调试的话，可能只需要 30 分钟
而且做出的这款扩展，一次性解决了团队每天重复、枯燥、易出错的工作，直接帮同事节约了 95% 的时间。
这就是当下 AI 最真实的价值：
它不是取代开发者，而是把 “开发能力” 下放给每一个会提需求、会解决问题的普通人。
不需要你会代码，不需要你懂架构，只要你能清晰描述问题，AI + MCP 就能帮你把想法变成可落地的工具。
未来已来：不会写代码，不再是你不能做工具的理由，不敢尝试，才是。
