这是2025年9月份第一次尝试纯用AI编程写的一个Chrome插件，在此记录一下。

• ✅ 插件地址：33字幕图
• ✅ GitHub源码 ：VideoScreenshot

这次使用 AI 构建的结果让我颇为惊喜——这个小产品 98% 的代码都由 AI 完成。切实感受到了 AI 的魔力和潜力，当然也体会到了一些局限性。

接下来分享这个构建过程，以及总结的一些 AI 编程技巧。

产品展示

这次做的插件功能很简单：截取网页视频画面，拼接成一张字幕图。

最终实现效果：

构建过程

构建产品是个循序渐进的过程，企图让 AI 一步到位不太现实。我的策略是：在确定技术框架的前提下，先让 AI 完成主要功能，细节后续再打磨。

初始化项目

初始提示词：

我想实现一个chrome插件，可以帮我制作台词拼图，把我感兴趣的视频画面拼接成一张图片保存下来。

具体功能需求：
1. 截取当前网页中的视频帧，放到列表中，支持拖动排序和删除
2. 点击保存按钮，保存成一张完整的台词拼接图下载

代码要求：
1. 支持vue框架和boostrap css样式
2. 支持npm工程构建插件
3. 清晰的项目目录结构

几分钟后代码框架就有了，可以顺利 build，在浏览器上也有了一个按钮。虽然页面还很丑，但是个好的开始。

调试与修复

点击按钮后图片没有显示。我让 AI 检查代码并添加日志：

点击截取视频帧按钮后没有截取视频画面，请检查代码并添加日志方便调试

发现控制台报错后，把错误信息发给 AI：

调试发现返回结果是Null，有错误：
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

AI 对 Bug 的修复能力还是挺强的，如果项目中有陈年老 bug，可以尝试让 AI 帮忙定位。

创建 Sidebar

为了让过程可控，我决定每次只让 AI 做一件简单的事情。这是个非常有效的策略。

让 AI 创建 sidebar：

我想让截图列表和保存按钮显示在浏览器右侧边栏

第一遍理解有误，继续强调后 AI 理解了意思，但迟迟不写代码。经过几次提醒后终于开始工作。

遇到报错时直接把错误贴给 AI 修复。对于没有得到预期结果时，可以让 AI 多尝试几次——一次不行，下次可能就行了。

手动介入

截图数据已经在 frames 中，但 draggable 组件没有渲染出来。AI 生成的代码：

<draggable v-model="frames" item-key="id">
  <template #item="{ element }">
    <img :src="element.dataUrl" class="img-thumbnail"/>
  </template>
</draggable>

我修改后成功渲染：

<draggable v-model="frames" item-key="id">
  <img v-for="frame in frames" :src="frame.dataUrl" class="img-thumbnail"/>
</draggable>

官方文档中确实有 AI 的写法，但就是不工作，这时候就需要人工介入了。

借助原型图

只通过文字描述有时很难让 AI 理解页面设计，可以通过简单的原型图来表达。

Sidebar 按照图片所示布局排版，下方菜单栏固定。

间距 sliderbar 的逻辑：拖动时截图 y 坐标发生偏移，偏移最大值是截图高度。
上面图片 z-index 大于下面，实现台词拼图效果。

原型图	生成结果

提示词写得明确，这次生成的代码直接就能跑了！

修复图片顺序

生成截图的叠加顺序有问题：

第一张是预览结果，第二张是生成结果，顺序反了。第一张图应该在最上面，以此类推。请修复！

AI 变得迟钝，试了几次没反应。我提示：

或许你应该考虑 ctx.drawImage 时 images 是倒序的？

终于修复成功！

完善 UI 交互

继续用原型图指导 AI：

左边是截图列表预览区；右边编辑区，支持拖动调整顺序。
编辑区每张图片 40x30，左边移动图标，右边删除图标。

原型图	生成结果

这次非常顺利，生成的代码工作良好。

把截图按钮从 popup 挪到 sidebar：

这次不太顺利，AI 试图引入 html2canvas 解决问题，方向完全错了。我果断回滚代码，让它重来：

你理解错了，这个截图按钮功能是截取视频帧，和 popup 中的一样，只是位置切换到 sidebar。

真正完善这个小产品还有很多细节，由于篇幅太多，所以就只能分享主要的构建流程，分享到这里应该有个大致的了解了。

上架插件市场

发布到 Chrome 市场需要 5 美元入场费。填写应用信息时也请到了 AI 帮忙：

我在上架 Chrome Web Store，需要对权限进行说明，包括：
1. activeTab 2. scripting 3. sidePanel 4. 主机权限

AI 写的权限说明非常清晰，可以直接用：

AI 编程技巧总结

1. 精心设计提示词：先在文本编辑器中构思，确保表达清晰、目的明确
2. 限定技术栈：使用熟悉的技术，保持对生成内容的审查能力
3. 一次只做一件事：避免复杂指令，更容易把控输出质量
4. 结合版本控制：配合 Git 及时存档，便于回溯和管理
5. 借助视觉材料：原型图能帮助 AI 更准确理解需求
6. 多次尝试：初次效果不理想时，调整表述重新生成

番外思考

此前我使用 AI 更多在代码补全和简单脚本上，从头构建完整产品这是第一次。

AI 会取代程序员吗？ 目前来看还不会。不懂代码的人可以借助 AI 做出简单应用，但稍复杂的项目仍需要人类作为舵手。即便 AI 足够智能，商业软件若无法理解与控制，风险将不可预知。

对程序员而言，掌握与 AI 协作的能力正在成为"必修课"。AI 或许不会取代程序员，但擅长使用 AI 的程序员，可能会取代那些不使用的人。

在 AI 时代，我们不应满足于只编写简单的 CRUD 代码，而应努力成长为技能更全面的工程师。保持开放、持续学习的心态，让 AI 成为个人能力的放大器。