教你如何0 代码手搓一个 Chrome 插件

VerTig0

01 这款产品是干什么的
开发的初衷来自于日常生活中。我在上班到公司后，第一件事就是打开知乎、人人都是产品经理或者公众号，把想要读的内容打开放在标签页中，等有空的时候再读。但实际情况往往是因为内容太长来不及读、工作太忙忘记或者不小心关掉标签页而导致忘记阅读。这个时候就希望有个工具能够将网页上的内容转换为精简过的音频。于是这款插件就诞生了。

他的主要功能包括：

• 内容出处（确认是不是想要阅读的文章）
  
• 创建播客（将文章转换为 5 分钟内的访谈式播客）
  
• 播客制作列表（之前制作过的播客任务，点击后会跳转播放音频）
  

02 如何将文章转成播客
之前google 出品的 NotebookLM在国外很火，他最厉害的点就在于能够上传文件、链接将其转换为播客，两个 AI 主持人会围绕素材内容进行讨论、调侃，使信息获取更具趣味性。在 github 上找到了开源版的 prompt，于是就用扣子来搭了一个属于自己的 NotebookLM。

1. 搭建工作流由于我们的插件只需要考虑网页内容，所以整体的功能分为四步：

• 获取网页内信息
  
• 将其转换为 host 和 guest对话的脚本
  
• 用两个不同的声音扮演 host 和 guest，并合成对应的音频
  
• 将音频依次组合，成为一个完整的音频文件
  

因此我最终的工作流形态如下：

首先先用扣子的官方插件LinkReaderPlugin，他可以将网页中的内容提取出来；之后，用大模型将内容转换为脚本，这里我选择的是豆包 128k，prompt 是
这样，你就能获得一个带分镜得脚本：

然后，再将这个分镜脚本作为输入去请求下一个大模型，将其转换为对话。这里我选择的还是豆包 128k，prompt 是
最后你就可以拿到一个对话形式的脚本了：

再然后，就需要通过代码将开头是 host和开头是 guest的内容拆开，变成两个数组，然后再依次用对应的声音合成。
合成完成后再通过代码将两组音频按照对话的形式排序，最后用merge_audios插件将多个音频组合成一个完整的音频。

这样我们的工作流就搭建完成了！
2. 如何在外部调用工作流当测试成功并发布工作流后，在【扣子 API】模块中可以找到对应的调用接口文档，这个时候只需授权令牌、找到工作流调用的接口文档，后面就可以让 Trae 根据接口文档来调用工作流了。

03 开始开发Chrome 插件
第一版：基础功能首先现在电脑上新建一个空白文件夹，然后在 Trae 中打开这个文件夹，然后在对话栏中输入下面的 prompt：
细心的人会发现我的 prompt 中还增加了插件中直接播放的功能，但最后上线的版本中没有，这个稍后我会提到。
再输入完这一段 prompt 后，Trae 会梳理具体需要做哪一些步骤，并和我确认，当我确认之后他就会开始正式开工了！
在开发的过程中，Trae 会要求你去完成一些操作，比如将图标文件放到指定的文件夹中：

在他完成所有的任务后，他会要求你在 chrome 中进行测试。这时你可以通过 Chrome 的开发者模式把本地插件加载到 Chrome 中测试，第一版的效果如下：

说实话还是很惊艳的，能够满足我基础的要求，Trae 牛逼!
当验证完没有问题后，记得把当前的内容更新到 Readme 中，并且使用 Git 存档。这里参考了黄叔的《AI 编程蓝皮书》通过以下几个命令将版本存档（黄叔的文档地址：https://superhuang.feishu.cn/wiki/CBBPwvgEuicVhFkx0s7cPmhpn4e），方便后续回退：

第二版：功能调整在完成基础功能后，发现了一个严重的问题。创建的播客任务很容易一直处于“loading”状态，只有在 devtool 打开的情况下才能顺利拿到成功或者失败的结果。这个问题整整困扰了我 4 天（至今都不知道为什么……），我把这个问题来回地复述给 Trae 无数次，每次的结果都是“我发现了问题，xxxxxxx”，但是根据他的要求改了之后并没有任何区别。每一次改完不管用之后还要回退到之前的版本重来（在此期间我也尝试使用了 Cursor，但依然没有解决）。就当我都准备放弃的时候，我发现目前的消息传递机制是异步的，但是我提供的后端接口不是，这会导致以下问题：

连蒙带猜，我将之前采用的同步接口改为异步的，打着最后测试一次，完不成就不做的心态，给 Trae 输入了以下 prompt：
修改之后，插件会每隔 2 秒去调用查询接口获取结果，最后终于能够准确获取返回结果了。

除了任务获取的问题外，原先我想要插件中能够播放音频，并且在插件弹窗消失后能够持续后台播放，但是查了一下貌似现在 Chrome还不支持（不确定是否这样），而且没有找到有别的插件有类似的功能。所以我把点击展开播放器组件调整成了点击跳转到音频页面：
这下整体功能算是全部实现了。
第三版：优化 UI既然功能都已经完成，拿最后就是优化一下整体的 UI 界面了。因为自己实在没有美感，所以这一步我让 kimi 来帮我做：

拿着 kimi 给的样式作为输入去要求 Trae 修改，没想到效果确实还不错。最后再通过免费的渐变背景CSS3样式 | oulu.me找到了自己比较喜欢的渐变作为背景，最终这款插件就完成了。

本文由 @VerTig0 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务