AI 3天做出 Chrome 插件?可以.不踩坑?不行

作为一个几乎不会写代码的产品经理，我用 AI 在3天内开发出了自己的第一个 Chrome 插件。

这听起来很酷，但过程中踩的坑足够让我写一篇血泪史。

如果你也想用 Vibe Coding 做点什么，这篇文章或许能帮你少走些弯路。

一、踩过的坑

坑 1：对技术方案一无所知

Codex 在设计技术框架时给出了 sidepanel 和 JS 注入两种方案。当时我完全不懂二者的区别，只是想着“MVP 版本简单点就好”，于是随手选了 sidepanel。

开发完才发现，这完全是狗屎运。如果我选择另一种方案，开发周期估计得延长一倍。

教训：在 AI 给出方案后，一定要多了解类似插件的实现方式和底层逻辑。作为产品经理，你可以不会写代码，但不能连方案的优劣都说不清楚。

坑 2：开发完才想起来做市场调研

【浏览器边栏插件调研】是我开发完成后半夜心慌才起来补的作业。

用了几个边栏笔记插件后，我才敢确认自己的产品“还行”，起码没到入不了眼的程度。

正确姿势：调研时要带着问题——每个产品有哪些让你眼前一亮的特点？它们大概用什么方案实现的？

虽然一开始可能很多东西看不懂，但有 AI 在，使劲问就完事了。AI 最大的好处就是它不会嫌你问题多得像个傻*，给出的答案一般也比较靠谱。

二、值得分享的经验

1. 让 AI 在项目中生成构建日志

具体做法：

• 让 AI 把每轮对话总结成纪要并存档

• 遇到不理解的变更，让它记录到技术文档中，生成修订日志

• 这个原则可以写到项目的 Agents.md 中

好处：避免你和 AI 都忘记某个变更或细节，也让新对话有充分的上下文，提高输出质量。

2. 自己多上手使用和测试

我在开发阶段以为，AI 编写的自动化测试脚本 + 人工手动测试就能完全覆盖使用场景。结果自己真正用插件记笔记时，又发现了一堆完全没想到的奇葩场景。

举个例子：我开了 A 视频记笔记，又新建标签页打开同一个 A 视频，然后在两个标签页中来回记笔记——笔记数据会不会冲突或丢失？

这种场景很逆天，但只要能想到就代表有可能出现。如果没测到，就会影响用户体验。

3. 有条件的话，多用几个 Coding 模型

作为几乎不会写代码的小白，不要押注单一模型的能力。对输出质量有大体评估后，可以安排分工，我的方案如下：

• Codex：稳稳当当的老实程序员，安安静静写代码，能实现就实现，实现不了就想办法实现。让它充当架构师和测试负责人也很靠谱。

• Claude Code：相较 Codex 的优势是快，不需要那么多思考时间，答复也更容易理解。拿来做小修小补、前端页面搭建和自动化测试脚本编写，不要太香。

• Gemini：在编码过程中完全是个“废物”，我试着让它写了几次，都得让剩下两位同僚给它擦屁股。但在需求文档撰写、市场调研、解决方案设计和技术概念咨询过程中，它是非常棒的助手，能帮你快速搞清楚技术定义或方案的优劣比较。

4. 从自己的真实需求出发

最好自己就是存在痛点的用户，这样对实际场景和需求会有更深的理解，方向出错的可能性更小。

额外好处：产品上线后你就是直接用户，能更好地测试并校准产品决策。

5. 不断优化和 AI 的协作模式

开发过程中很多答复肯定会看不懂，涉及到知识盲区，保持学习心态，有什么不明白的问 AI 就好。

重要提醒：有不明白的名词或描述一定要搞清楚，否则就可能成为隐患。

举个例子：我一开始不知道 Markdown 原始语法中没有==高亮==, Codex 为了实现这个需求就一直在 Markdown 渲染代码中来回打转，怎么实现都不满意。

咨询 Gemini 后直接删掉了这个语法需求，瞬间畅通。

6. Vibe Coding：成也 Vibe，怕也 Vibe

开始创造自己的小作品时心情激荡，大半夜都会在脑海里反复思索：是不是有可以优化的地方？明天要实现哪些功能？

但冷静下来后却觉得惶恐——这种情绪会不会将我推向远离需求的方向？我造出来的会不会是件完全自嗨的作品？

Vibe Coding 现在就像一根世间罕有的棍，它那么直又那么美，大部分人见到后都会爱不释手。

可问题是：

• 如果我是农夫，我想要的是锄头

• 如果我是钓鱼佬，我想要的是鱼竿

• 如果我是挑夫，我想要的是结实的扁担

我们通过 Vibe Coding 创造出来的“作品”，得先搞清楚究竟给谁用，用在哪里，怎样做有用的适配。

而不是拿着一根棍子就使劲晃荡，那样会让人觉得有意思、很好玩，但却没什么用处。它有可能远离了切实的生产需要，变成了某种程度上的情绪共鸣——“我在创造，哈哈哈，多美好。”

陷入其中而不自知，才是最可怕的。

三、 一件搞笑的事

Side note 审核通过的当天，Google 推出了新的页面拆分功能。

之前我已经体验过，将 Flomo 切入另一端页面就能达成类似笔记插件的效果。然而这个操作链路不算很流畅，用户需要：

1. 右键标签页

2. 选择“新拆分标签页视图”

3. 选择 Flomo

这还不算上预先打开并登录 Flomo 网页版的时间和操作成本。从这些方面来说，插件有启动快和便捷的优势。

然而，Flomo 的输入体验肯定吊打插件，同时有更好的数据持久化能力。用户也不需要从浏览器插件中将笔记转移到 Flomo，减少了操作成本。

两种方式各有优劣。

笔记插件只会是个中转站，它的存在定位就是舒适便捷的轻量级工具。

四、明牌暗广

写这篇文档原本是为了记录，但现在“内容带动产品”的营销案例也比比皆是。

这好像是我为数不多能选择的方式，也是我喜欢和较为擅长的。

访问即可安装插件：https://chromewebstore.google.com/detail/chilonpfaigbakofbbphjmaldgdiopgo?utm_source=item-share-cb

期待您的使用和反馈，哪怕写个差评，我都将不胜感激。

注：本文人工撰写，由Youmind完成润色和校验。