AI帮我做了一个Chrome插件全过程记录
上周有个需求：我每天要在十几个网站上查信息，然后手动汇总到一个表格里。这个事情重复了三个月，终于忍不了了——我决定做一个Chrome插件来自动化这个流程。
问题是我之前从没做过浏览器插件。以前可能要花一周学习Manifest V3、Chrome API、Content Script这些概念，然后再花一周写代码。但这次我决定全程用AI来做，看看到底能不能一天搞定。
结论先说：一天搞定了，而且效果比预期好。
第一步：需求描述（30分钟）
我先在Claude里描述了我的需求：
“我需要一个Chrome浏览器插件，功能是：1）在指定的网页上自动提取特定元素的文本内容；2）把提取的内容保存到本地存储；3）点击插件图标时显示一个Popup页面，展示所有提取的数据；4）支持导出为CSV格式。”
Claude很快给了一个技术方案：用Manifest V3、Content Script做页面数据提取、Background Service Worker做数据管理、Popup页面做UI展示。
我对方案做了一些调整——比如我想支持用户自定义提取规则而不是写死在代码里。Claude把方案更新了一下，给出了更灵活的设计。
第二步：生成项目结构（15分钟）
让AI生成了完整的项目文件结构：
my-extension/
├── manifest.json
├── popup/
│ ├── popup.html
│ ├── popup.css
│ └── popup.js
├── content/
│ └── content.js
├── background/
│ └── service-worker.js
├── options/
│ ├── options.html
│ └── options.js
├── utils/
│ └── storage.js
└── icons/
├── icon16.png
├── icon48.png
└── icon128.png
AI不仅生成了文件结构，每个文件的代码都写好了。我一个个看了一遍，逻辑基本没问题。
第三步：核心代码生成（2小时）
最核心的部分是Content Script——它需要在网页上运行，根据用户定义的CSS选择器提取数据。
这里AI展现了它的强项：Chrome Extension API的用法它比我熟多了。chrome.runtime.sendMessage、chrome.storage.local、chrome.tabs.query这些API的调用方式，AI一次就写对了。如果是我自己查文档，至少得花半天。
Options页面也做得不错——用户可以添加、编辑、删除提取规则，每条规则包括目标URL模式、CSS选择器、字段名称。UI虽然简单但功能完整。
Popup页面展示提取的数据，支持搜索、筛选、导出CSV。这部分逻辑AI写得很流畅。
第四步：调试（3小时）
这是花时间最多的环节，也是AI暂时还不能完全替代人类的地方。
问题一：Service Worker不活跃
Manifest V3的Service Worker和V2的Background Page不一样，它会在空闲时被杀掉。AI生成的代码里有一些状态管理是依赖Service Worker常驻的，实际运行时偶尔会丢数据。
把这个问题描述给AI，它很快给出了修复方案——用chrome.storage.local替代内存变量来保存状态，加上chrome.alarms来定期唤醒Service Worker。
问题二：Content Script注入时机
有些页面是SPA（单页应用），DOM是动态渲染的。Content Script在页面加载时注入，但那时候目标元素还没渲染出来。
AI建议用MutationObserver监听DOM变化，等目标元素出现后再提取数据。这个方案完美解决了问题。
问题三：跨域存储配额
chrome.storage.local默认有10MB的容量限制。如果提取的数据多了，会超出配额导致存储失败。
解决方案是加了数据清理功能——自动删除30天前的数据，并且在存储前做数据压缩。
第五步：UI美化（1小时）
AI生成的UI能用但不好看。我让Claude帮我重写了CSS，加了暗色主题、过渡动画、响应式布局。给了它一个参考设计风格（“类似Notion的简洁风格”），它生成的样式还挺接近的。
图标是用AI图片生成工具做的，16x16、48x48、128x128三个尺寸。
第六步：打包和测试（1小时）
最后在Chrome里加载未打包的扩展程序，做完整测试。
测试过程中又发现了几个小bug——比如CSV导出的编码问题（中文乱码，需要加BOM头）、某些网站的CSP策略阻止Content Script运行等。这些问题也都是描述给AI，几分钟就给出了修复方案。
全程复盘
整个过程从早上9点开始，到晚上7点结束，中间吃了个午饭。有效工作时间大约8小时，做出了一个功能完整的Chrome插件。
如果没有AI辅助，我估计这个项目至少要一周：
- 学习Chrome Extension开发：2天
- 写核心代码：2天
- 调试和修bug：1-2天
- UI美化：半天
AI把一周的工作压缩到了一天。
几点体会
AI最擅长的：API调用方式、样板代码、常见设计模式。这些东西对于人来说是"需要查文档"的知识，但对AI来说是"随手就来"的。
AI需要人帮忙的：运行时调试、边界情况处理、性能优化。AI能写出"能跑"的代码，但不一定是"跑得好"的代码。
最大的感受：Vibe Coding不是"不需要懂技术"，而是"不需要记住技术细节"。你仍然需要理解整体架构、能看懂代码、能描述问题，但不需要记住每个API的参数格式。
这可能就是AI编程最好的模式——人负责思考和决策，AI负责执行和记忆。
你们有用AI做过Chrome插件或者其他浏览器扩展吗？做了什么功能？过程中遇到了哪些问题？欢迎分享你的Vibe Coding实战经验。