谷歌浏览器插件实战项目

使用Cursor快速创建Chrome浏览器扩展

做这个插件主要是给自己用的,因为我有3-5个动漫网站,需要大量从别人的网站下载图片,一个一个手动下载特别麻烦。于是特别需要一个能够批量下载网页图片的插件。

现在Chrome 插件商店也有不少这种工具,但我还是想自己做一个,顺便把我怎么用Cursor快速做一个出来的方法分享给大家,让大家对Chrome 插件开发的流程也有一个简单的认识~

完整的视频教程

下面是图文教程:

第一步:用Cursor生成代码

首先打开Cursor,新建一个文件夹用来放我们的代码文件

新建文件夹

然后打开聊天框,选择Agent + Calude 3.7,输入我的提示词:

提示词

你好,我想写一个谷歌浏览器插件,主要功能就是批量获取当前页面下的全部图片,并且提供选中图片进行下载的功能,如果用户选择多个图片,那就变成文件夹的形式下载

图片代码你帮我写好,一会我自己上传

然后等待Cursor帮我们写好代码

Cursor生成代码

在等待的同时,可以先准备好3张图片,分别命名icon16,icon48,icon128,放在Cursor对话框中要求的位置,这三张图片的分辨率分别是16x16,48x48,128x128,主要是用于在插件中心图标显示用

准备图标

第二步:测试浏览器插件

写好第一轮代码后,我们可以打开谷歌浏览器,在右上角找到插件中心,点进去,然后把开发者模式给打开,接着点击左侧的'加载已解压的拓展文件',选择我们刚才放cursor写的代码的文件夹。

加载扩展到浏览器

上传好之后,我们就可以随便打开一个网页,然后在右上角的拓展那里找到刚才我们自己写的拓展,然后尝试获取和下载图片

测试扩展功能

第三步:完善功能

但是这里要注意,我们目前的实现下载的图片是一张一张下载,并没有打包成文件夹的形式,所以我们要回到cursor,再让它帮我们改下代码:

改进提示词

你好,现在我测试过了,下载和获取是没问题的,但是并没有打包成一个文件夹的形式下载 我希望下载的图片是打包成一个压缩文件夹 而不是一张一张的下载
Cursor改进代码

改好代码之后,我们再重复刚才的流程。回到插件中心---把原本第一个版本的插件文件删掉,上传最新版本的插件----打开网页测试

更新插件版本

然后我们测试一下下载功能,发现选中的图片点击下载的时候已经是一个压缩好的文件夹的形式了,大功告成!

成功下载ZIP包

第四步:上传到插件商店

接下来我们来看看怎么才能把写好的插件上传到谷歌插件商店,变成人人都可以下载和使用的工具

首先要打开Chrome for Developers(https://developer.chrome.com/docs/extensions?hl=zh-cn)

Chrome for Developers

登陆谷歌账号,然后点击发布应用到商店(如果你是第一次发布,需要先支付5美元给Google,作为注册帐号的费用)

当你支付成功后,就会跳转到开发者后台,咱们直接点击右上角上传新内容,然后把写好的代码文件夹压缩再上传,接着填写对应的信息就好了

上传到应用商店
填写应用信息

总结

这个小工具实现起来并不是很复杂,但是它很实用,如果你需要大量从网页中下载图片,一定能为你节省不少时间。

开发流程也比较简单,代码也不会太复杂,很适合给大家用Cursor做浏览器插件当作入门项目来练手。

希望对大家有帮助。