浏览器插件 AI 开发总结

最近我开发了一个浏览器插件小软件，可以安装在 Chrome 或 Edge 浏览器上，专门读取本地 md 书稿并管理番茄小说平台的在线章节与草稿列表。它可以批量上传草稿、清空草稿箱、批量替换已发布章节，也能批量替换已定时章节。原来 100 章的修改任务，纯手工操作至少半小时；有了这个插件，几秒钟点一点，几分钟就完成了，幸福感爆棚。

我是用 AI 开发的。在开发过程中还是遇到一些问题的，这些问题我认为是 AI（Claude 4.5 Sonnet、GPT 5.1 High Fast、Gemini 3 Pro）对这块软件业务不熟悉，并不是对该类软件需要的编程技术不熟悉，整个开发过程需要我在一旁“谆谆教诲”（或者称 Debug AI）。 下面由我总结一下开发经验，分享给你，希望对你有帮助。

软件总体是怎么架构的

插件使用最新版本的 Chrome Extension API，可以在 tab 页启动时插入 content script，这是实现全部功能的关键。content script 又能与 background script、page script 互通，我们在插件界面发出的操作任务，会由 page script 传递给平台页面里的 content script，最终完成操作动作。

最大的麻烦是什么

最大的困难是调试不方便。普通页面的 html、script、css 修改可以通过热加载实现不间断开发，但只要涉及 content script 或 background script，就必须到浏览器的插件管理页手动点击“重新加载”。这是个麻烦，但也不是阻碍，只要有耐心就能做好。作为从旧时代一行代码一行代码“杀”出来的老程序员，有的就是耐心。

核心开发经验分享

有几条开发经验我觉得很重要，甚至是完成插件开发的关键。在你进行插件开发时，即使没有说什么软件需求，先把下面这三条经验喂给 AI，基本上就成功了一半。

1，模仿人类按次序操作

人类不可能同时单击两个按钮，也不可能同时打开并操作两个页面，所有 tab 页的打开、页面组件的点击、表单文本域的输入，都要按照人类习惯一步一步地来，一个完成再进行另一个。

2，每一步关键节点都要有一个关键组件

现代网页都很互动，很多甚至是用 Vue/React 开发的，并不是全部由服务器直接渲染；有些页面或页面的一部分是 JS 动态生成的。基于这一点，只依赖监听 tab 页面的 onload 事件来判断页面加载完成就不合理了。更好的办法，是用页面上某个标识性组件的出现作为“加载完成”的标志。组件不出现，就一直轮询查找，直到出现为止；为了避免网络故障，轮询次数可以设置上限，这是常见做法。

不仅“页面加载完成”是一个节点，在现代页面里还会有很多关键节点。例如，内容输入完才能“存草稿”；发布设置面板出现后才能选择是否使用 AI；选择完成才能“确定发布”。基本每一步操作都有前置条件，当条件满足时，一些 UI 组件才会出现——它们就是关键性组件，用来帮助我们判断节点。

3，在代码组织上多使用 async/await 语法，多使用 sleep

sleep 函数可以自定义，是为了让操作慢下来，更像人类，一般间隔在 200ms～500ms 之间。单线程的 async/await 语法天生适合插件开发，它让流程变得简单：某个关键组件不出现，就一直等待，等到它出现，才意味着进入特定阶段。

另外，页面上的面板有时候也在变化。有的面板只是特定条件下出现，有的面板出现时间也不固定，有时在前、有时在后，这时候代码处理就要灵活，不能傻傻地等某一个组件出现。可以在一个函数内轮番检查两个甚至多个面板，一个面板一般只出现一次，出现过就不再出现了，多个面板谁先出现就先处理谁，直到最后关键组件出现，这个阶段才结束，可以进入下一阶段了。

小结

最后说一下 AI。这个小插件是用 AI 开发的，但它在整个过程中并不是始终表现优秀。一开始，我用 AI 迅速搭好了软件的基础结构，可接下来它写的功能就忽好忽坏了，改了几轮都不见起色，我甚至吐槽它：“你到底会不会编程”。别怀疑我用的模型不行，全世界目前最强的三个编程模型（Claude 4.5 Sonnet、GPT 5.1 High Fast、Gemini 3 Pro）我都试了，问题不在模型，而在它不懂我这个插件的业务。可能我是第一个让 AI 给番茄小说平台写浏览器插件的人，它没有类似经验，自然给不出精准代码。后来，我亲自去页面里定位关键 HTML 组件，甚至写出 document.querySelector 示例给它看，告诉它某个功能需要几步、有几个节点、每步要等哪个组件出现。我帮它梳理业务逻辑后，它立刻恢复状态，很快就把功能写完了。说实话，它干活的速度生产队的驴都赶不上。

所以，用 AI 写软件，模型重要吗？重要，顶级模型和一般模型的差距就像爱因斯坦和小学生。但模型不是全部，有好模型也未必能写出好软件。提示语重要吗？重要，可提示语没有万能模板，开发者必须熟悉业务，给出清晰的逻辑步骤，特别当 AI 不熟悉你做的东西时。

AI 在大多数常见场景中表现卓越，可一旦遇到陌生领域、没踩过的前沿项目，或它没接触过的业务，就会乱套。前沿项目没办法，受限于整个人类的文明脚步；业务项目则不同，只要我们先理顺逻辑，AI 通过学习照样能做好。

11 月 24 日

该文由 rustpress 编译。