我用Trae从0到1上架了个Chrome插件，并开源了代码

大家好，我是大侠。

最近 Vibe Coding 比较火，在上周末，我也花了两天时间，尝试从头到位构建了一个 Chrome 浏览器插件。

这次使用AI构建的结果，蛮让我惊喜的，毫不夸张得说，这个小产品98%的代码都是由AI来完成的。也是切实感受到了AI的魔力和潜力，当然也感受到AI编程的一些局限性。

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

产品展示

我这次做的插件非常简单，它只有一个简单的功能，就是把网页中的视频进行截图，然后拼接成一张字幕图。

这是最后实现的效果，通过视频你很容易知道它是如何工作的。

如果你觉得这个插件对你有用或想体验一下，可以打开这个网页安装和使用它。

33字幕图

为了让大家更清楚整个过程，这个小工具的源代码我发布到了GitHub，有需要的朋友也可以结合源码来研究。

源码地址

构建过程

构建产品只能是个循序渐进的过程，企图使用AI一步到位，这不太现实，我也没办法把要求描述的那么详尽。

我的想法是在确定技术框架的前提下，先让AI完成主要的功能，而不必在意交互和UI这些细节先。

初始提示词：

markdown 复制代码

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

具体功能需求：

1. 实现截取当前网页中的视频帧，并放到列表中
帧图片的顺序可以支持拖动和删除
2. 点击保存按钮，可以保存成一张完整的台词拼接图下载

代码要求：

1. 支持vue框架和boostrap css样式
2. 支持npm工程构建插件
3. 接口清晰的项目目录

提示词告诉了AI我是要做一个Chrome插件，要使用npm来构建，使用vue和boostrap前端框架，这都是我熟悉的工具，保证出了问题我能很快就修复。

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

不过点击按钮后，图片没有如期显示出来。

我大概看了检查了一下代码，主要逻辑似乎是对的，于是我让继续示意所以Trae检查代码，并打上日志看看。

复制代码

很好，现在我已经可以在Chrome上运行了，但是点击截取视频帧按钮后没有实现截取视频画面，请检查代码是否有问题，并添加日志代码方便我进一步调试问题

有了日志之后我很快定位了视频截图的代码，没有图片数据传过来。

与此同时，我在控制台也发现有个错误日志，于是我把日志发给所以Trae：

vbscript 复制代码

调试后发现Received response:返回结果是Null，并且有错误打印：

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

重新修改之后，我看到了base64编码的图片数据传过来了，不过图片还是没有显示出来。

通过日志是确定视频截图已经出来了，这时我手打了个<img>去显示一下这张图片，确认是没有问题的。

vbscript 复制代码

response有返回数据，但是页面上没有显示，请进一步修正问题

我又尝试一下，发现Trae还是没有写对，我只好去看看代码。

由于提示词有提到了支持拖动图片顺序，所以Trae是调用了 VueDraggableNext 库，把图片放到<draggable>中，所以很确定是AI对这个库的使用方式出了问题。

我觉得可以把这个问题先放一边，如果这个插件不好使，还可以换一个，接下来我要把页面先搭建起来。

我想要实现的效果是截图放到浏览器右边的 sidebar 中，然后有个拖动条对图片间距进行调整和预览拼图效果，点击保存按钮的时候，调用canvas来绘制一张完整的字幕拼图。

为了让整个过程是可控的，我决定每次只让Trae做一件简单的事情，而不是一下子把所有的事情做完。 我很快发现这将是个非常有效的策略。

让 Trae 继续工作，让它先给我把sidebar先创建出来：

复制代码

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

第一遍它似乎没理解我的意思，把截图列表放在了 popup 页面右侧。

于是我继续强调：

复制代码

是浏览器的右边栏

强调后，我看到了AI似乎Get到了我的意思，但是代码一句都还没写。

于是我提醒它要写代码，提醒了好几次都没反应，我以为它要罢工了，但是终于在第4次之后，它终于开始写代码了。

这里它写好的代码并没有能立即跑起来，而是有报错。

arduino 复制代码

出现问题：Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

arduino 复制代码

很棒，现在侧边栏出现了，但是点击截取视频帧按钮后还是会出现：Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

css 复制代码

现在在sidebar的main.js中出现：Failed to load resource: net::ERR_FILE_NOT_FOUND，点击截图按钮也还没有成功加载到sidebar的视图中，请继续修正。

从这里看到，AI对于Bug的修复能力还是挺强的，如果你的项目代码中有陈年老bug，可以尝试用AI帮你定位一下，说不定有惊喜。

另外一点是，对于没有得到预期的结果时，可以让AI重复多两次看看，一次不行，说不定下次就行了。

AI 每一次 Coding，何尝不是开盲盒的过程。

Sidebar 也是终于有了，代码也没有报错了，不过截图始终没有显示出来。

继续使唤Trae：

复制代码

现在sidebar有显示出来了，但是点击截图依然没有显示到sidebar的视图中，请继续修正这个问题，并添加相关调试代码。

不行，再来：

复制代码

sidebar 中 frames 数据已经有了，但是在draggable中没有渲染出来，请分析一下原因，请修复它

还是不行！截图的数据其实frames中了，对比一下文档，AI生成的代码看起来似乎是对的，我意识到，这时候再让 AI 继续改，可能也改不对了，于是我只能上手去试试改了。

AI写出来的代码：

ini 复制代码

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

我修改后成功渲染出来的代码：

ini 复制代码

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

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

到这里，已经完成视频截图，在sidebar中显示截图列表并且可以拖动顺序。

只能通过文本描述，我们有时候很难跟AI表达明白页面该如何设计，这个时候我们可以通过一些简单的原型图来进行表达，接下来我们来测试一下Trae在这方面的能力。

我们接下来通过图片布局来告知AI，如何实现调整图片间距，提示词和上传的两张原型图如下：

css 复制代码

Sidebar 请按照图片所示布局进行排版，其中下面的菜单栏是固定在下方的。

其中间距sliderbar的实现逻辑是：

当拖动间距sliderbar的时候，截图的y坐标也会发生相对偏移，偏移的最大值是截图的高度。上面的图片z-index 要大于下面的，保证上面的图片会显示在下面的图片之上，从而实现台词拼图的效果。

可能提示词写的比较明确，这次生成的代码居然直接就能跑了，不过调整间距的代码还是有点问题，它的高度写成了一个常量150px。

但是问题不大，提醒AI动态使用截图高度：

复制代码

我注意到getFrameStyle函数是个固定的数字150，请把高度调整成为截图的高度，同一个视频的截取帧图片高度应该是一样的。

截图间距调整也搞定了，接下来就是最后一个重要逻辑的实现，把拼图结果保存下载。

复制代码

很棒，你现在已经完成了修复bug的工作，现在请你实现下载拼图的功能。

当用户点击之后，你就把当前截图列表调整间距后的结果拼接成一张完整的图片，并下载下来。

注意，最后产出的图片要和预览的结果一致，并且清晰度也是和原图一样的。

生成截图结果如左图所示，而正确的效果应该像右边图片，看起来是绘制的顺序有问题，如果是倒过来就对了。

于是我把图片发给AI，并且强调它正确的顺序应该是什么样的。

复制代码

第一张是预览的结果，第二张是生成的结果，现在的结果是错误的。从结果看，是前后顺序反了，第一张图应该在最上面，第2张次之，以此类推。请继续修复这个问题！你一定能行！

不过Trae这时候又开始变得迟钝了，第一次没有任何改动，继续发动它改起来：

复制代码

你好像没有修改任何代码，请继续完善生成的图片结果图片叠加顺序不对的问题。

还是没有反应，继续：

复制代码

请修复上面提到的问题，我注意到你的代码，或许你应该考虑ctx.drawImage的时候，images是倒序的？

没有反应，继续重复：

复制代码

请修正saveImage的逻辑，让第一张图片在最上面，让第二张图片在第一张下面，第三张图片在第二张下面，以此类推。

这次它终于明白了，截图保存的结果终于对了，至此，这个插件的核心功能已经完成了。

我们继续完善一下插件的UI和交互。

复制代码

很棒，现在插件的核心功能已经完成。但是我发现图片在draggable中拖动的交互会出现一些异常。

我想修改成这样：

左边是截图列表预览区；右边编辑区，用于支持拖动图片调整顺序。

其中编辑区中每张图片都是40 x 30的宽高，左边预览区占满剩余宽度，但是保留有10个像素左右的间距。

编辑区中每张图片的左边是个移动的图标，右边是个删除图标，点击删除图标则删除该张截图，图标是位于图片上面的。

请参考我给你的原型图进行布局。

这次非常顺序，生成的代码可以工作非常好。

接下来把截图按钮也从popup中挪过来。

复制代码

太棒了！你工作完成的很好。我们来继续完善一下交互。

现在popup中点击截图还不是很方便，我想修改成下面的交互逻辑。

点击popup按钮，弹出浏览器右边的sidebar。

在sidebar的上方放置一个截图按钮，这个按钮是固定在上方的。

请参考我给你的原型图进行布局。

这次就没那么顺利了，虽然布局代码问题不大，不过点击截图按钮出现了报错，于是我把错误贴给AI，直接让它进行修复。

vbscript 复制代码

点击截图的时候出现报错：Uncaught (in promise) Error: Cannot access contents of the page. Extension manifest must request permission to access the respective host.请继续修复

这次报错信息没有了，但点击后截图没有顺利加载，于是我提醒它继续改：

复制代码

现在报错信息没有了，但是点击截图后，预览区没有出现图片，请打上日志信息，并尝试修复这个问题。

这次AI有了个奇葩行为，它试图引入 html2canvas 这个库来解决，我感觉不妙，了解的朋友应该知道，这个库是用来把html转图片用的，但是这个逻辑已经是完成的了。

复制代码

npm install html2canvas

于是这次我毫不犹豫回滚代码，丢弃这个修改，然后让它重来！

perl 复制代码

你可能理解错误了，这个截图按钮的功能截取当前视频帧，和之前在pop中的截图按钮功能是一样的，截图的逻辑是正确的，现在只是把按钮的位置切换到sidebar的截图按钮上来，请修复这个bug。

调试了一下，依然没有生效，继续：

复制代码

点击截图按钮还是没有生效，请正确理解我的意思，现在是要截取视频的当前帧画面。

这次也没有对，我感觉它开始变笨，这个修改其实不复杂，于是我忍不住动手自己改了这个点。

真正完善这个小产品还有很多细节，由于篇幅太多，展示完整过程将让文章可读性变得很差，所以就只能分享主要的构建流程。我本来想导出整个和AI编程的聊天过程，但是奈何Trae目前没有支持，不过分享到这里，大家对于我如何做出这个产品也有了个大致的了解了。

强烈建议大家自己亲自动手去做个小东西试试，亲自动手获得的感知，跟看看文章视频获得认知是有很大差别的。

上架插件市场

发布到Chrome市场比较简单，需要 5 美元的入场费，然后填写好一些应用信息即可。

值得一提的是，在上架的时候要填写不少信息，这个过程中我也请到了AI的帮忙，比如应用描述信息，翻译和权限说明等。

提示词：

markdown 复制代码

我在上架Chrome Web Store，上传的时候需要我对权限进行说明，你可以帮我根据当前项目写出需要这些权限的理由吗？

其中包括：

1. 需请求activeTab的理由

2. 需请求scripting的理由

3. 需请求sidePanel 的理由

4. 需请求主机权限的理由

我想这个代码是AI写的，那它应该非常清楚，果不其然，写的也太清晰了，可以直接用，这方面比我强多了。

AI编程的小技巧

总结以上AI编程过程中的一些小技巧。

1. 精心设计提示词

建议先在文本编辑器或备忘录中仔细构思和修改提示词，确保表达清晰、目的明确，然后再提交给AI，这样有助于获得更精准的回复。

2. 限定技术栈并保持审查能力：

明确要求AI使用你熟悉或指定的技术栈来生成代码，同时始终保持对生成内容的审查和判断，确保代码符合预期和质量标准。

3. 一次只做一件事：

尽量让AI每次只完成一个明确任务，避免复杂或模糊的指令，这样更容易把控输出结果的质量和准确性。

4. 结合版本控制及时存档：

建议配合Git等工具及时保存每次生成的代码和阶段性成果，便于回溯、比较和管理迭代过程。

5. 借助视觉材料辅助生成：

UI稿、原型图等图像资料能够帮助AI更准确地理解需求，在适当场景中结合图像输入，可以提升输出内容的贴合度。

6. 多次尝试，耐心调优：

如果初次生成效果不理想，可以尝试让AI重新生成，适当调整表述方式或补充信息，有时重复尝试能够带来意外收获。

番外思考

此前我使用AI更多在代码补全，生成代码片段或简单脚本上，从头构建一个完整的产品，这也是第一次。

AI 是否会取代程序员的工作？目前来看，还不会。也许一个不懂代码的人可以借助 AI 做出简单粗糙的小应用，但对于稍微复杂一些的项目，仅靠 AI 仍然难以胜任，尤其在遇到问题的时候，它还是需要借助人类作为舵手。

即便AI编程智能到不需要人，但对于商业软件产品------如果无法理解与控制它，风险会变得不可预知，构建就失去了意义。

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

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