AI生成工具系列1———浏览器插件

2026-07-24 AI生成工具系列1———浏览器插件

写AI生成工具系统的目的是自己记录一下整个过程，同时也能顺便帮助一些人。

需求背景：

公司服务近百个客户，按照半个月的周期给这些客户进行商品的报价，同一个客户不同周期报价单的商品列表基本保持不变，目前系统上的方式是必须人工手动按客户去做一遍报价单，然后再去调整价格，都是重复性操作，没什么技术含量，全部客户处理完成需要大概一天的时间。

同时人工报价存在几个问题，如：某个客户忘记报价了，等到客户无法下单时才发现；个别商品已经报价了，导致新增的报价无法提交；报价单的有效期经常填错，导致对应周期的最后几天无法下单等等问题。

再就是把需求提给软件开发部门，他们因为各种原因短时间内不给排期。

工具目标：

在解决上面提到的问题的同时，让报价的同事能够更快处理这种没意义的工作，同时也借这个机会检验一下这些AI在浏览器插件生成的能力。

使用的工具：

阿里云的qoder

如果你还没有下载，可以去qoder的官网下载：https://qoder.com.cn

也可以点击文末原文链，用此链接注册我可以获得相应的奖励积分：https://qoder.com.cn/referral?referral_code=FFWl1fjMJ7UM2auvu5MHtr7dIue1hr3v

打开之后把需求发给qoder，同时把对应的页面内容告诉它，以及网站账号密码等信息。

然后就是qoder会让你确认信息和等待，直到生成插件的相关内容，目录如下：

如果需要生成扩展的操作说明书和icons也可以一起告诉它。

根据扩展的操作说明书在chrome 浏览器进行操作，其他浏览器类似 打开管理扩展：

然后打开 开发者模式 （部分国内浏览器的位置或者名称不一样，但基本都支持）

然后进入到生成浏览器扩展的文件夹，确认后就会出现该扩展。

然后就可以在浏览器扩展地方使用了，具体位置如下图，点击下图2位置的图钉📌，可以在导航栏显示（即下图位置3）

插件的最终形态如下：

这个插件大概花费了一天的时间，主要是收集需求和测试功能，特别是适配不同系统和浏览器上的功能。 页面的样式也是qoder基于需求自己画的，完全没有去做原型设计。虽然前端交互差点，但整体上感觉还不错。

总结：

基于这次浏览器扩展的生成经验，最重要的有以下几点：

1.需求要明确，不然agent会浪费很多时间。如果需求不明确的话，前期可以先跟agent一起探讨，可以使用多个模型进行多轮头脑风暴。

2.提供尽可能多的背景信息，如网站的地址，具体页面地址信息

3.使用多个不同的模型进行尝试，如果某个模型一直无法解决，尝试换一个试试。

4.进行所有功能的测试使用，除了扩展本身的功能，还包括不同系统的测试（如Mac和Windows）。