AI编程制作浏览器插件全流程(学习版)

我爱免费

作者：微信文章
Hint
大家好，我是阑梦清川，一个非正经的计算机专业的学生，兼业余写作爱好者

1.前言

中午时间比较短，所以写的这个文案并不是很详细，今天下午详细的说明一下，记录一下这个浏览器插件（取色器小工具）开发的全流程；

其实这个插件的开发真的是非常的简单，但是我认为我们可以从这些简单的插件开发里面去寻找灵感，然后去做一些更加复杂的应用；

2.流程说明

首先还是把这个提示词给我们的deepseek进行需求的说明和开发的规范；



接下来直接告诉deepseek我们的需求，这个不需要说明的很详细，我就告诉了deepseek一句话，他就完全可以开发出来这个插件；



具体操作步骤：这个时候deepseek代码也给我们了，这个具体的操作的方法，链接啥的都给我们了，我们把这个代码下载到本地即可；



3.需要我们完成的

首先就是一个图标，就是我们的这个插件的图标，显示在我们的这个浏览器插件的位置，我们可以使用即梦AI进行生成即可，这个要求不是很严格我觉得；



然后就是把我们的这个代码文件和这个图标放在一个文件夹下面即可；

进入我们的浏览器的这个插件的市场（具体的网址这个deepseek已经告诉我们了），然后找到下面的这个加载解压缩的扩展，这个时候弹框需要我们上传，我们把代码和图标所在的文件夹上传即可；



固定在这个栏之后就可以看到下面的这个效果了：



至此，一个简单的浏览器的插件的开发就完成了，希望对大家有用；

4.具体使用效果

为了让加看到他的效果，我觉得可以演示一下这个东西的操作的流程，完全是没问题的：



然后是这个插件的具体使用：点击这个开始取色，就会出现这个正在取色，会有一个类似于放大镜的东西展示出来让我们去取色；

然后就是把取出来的颜色同步到我们的这个最近使用的颜色那个位置，上面已经存在了三个颜色，就是我第一次开发出来的时候测试的颜色，功能完全没有问题；



具体的文件列表如图所示：

1）icons就是存放的就是我们的这个插件的图标的文件夹；

2）剩下的三个都是我们的deepseek生成的这个文件；

3）提交上传的时候，我们实际上就是把四个文件所在的文件夹进行提交上传的；



我是阑梦清川，希望得到您的关注

文章推荐
05年，20岁，还是没能脱下孔乙己的长衫👈️
当实验报告变成 “形式主义之下的AI大赛”：大学生的时间，不该浪费在实验报告上面👈️
普通工厂模式是青铜，抽象工厂模式是王者？这场设计模式 battle 太精彩👈️
纵使AI使用千万种修辞手法，也写不出人类独有的精神密码--2025新高考一卷语文作文测评👈️
cursor还能绘制文章的架构图，太酷了👈️