【AI实战】3分钟完成谷歌插件开发

【AI实战】3分钟完成谷歌插件开发

Cursor是一款AI代码编辑器,功能非常强大,对开发者来说绝对是提效神器,本贴重点是展示本主题的案例过程。

【案例实操】

1、打开Cursor官网:https://www.cursor.com/,点击DOWNLOAD FOR WINDOWS(以Windows用户为例,也有Mac版本)

2、下载完成后,按默认配置一路下一步,安装完成即可

3、注册

如下图,官方提供三种注册方式:邮箱注册、谷歌账户注册、GitHub账户注册。这里直接使用国内普通邮箱注册即可,我测试用的就是QQ邮箱。

需要特别说明一下的是,Cursor也是个付费工具,而且挺贵!具体收费标准如下图所示,Pro版本20美元每月;商业版40美元每月,真是挺贵!

但好消息是,免费用户有14天免费Pro版本试用机会,有这14天,我们也能大概摸清楚这工具的能力了,是否需要付费就看个人需求了。

免费用户有14天免费Pro版本试用机会

通过以上三步,注册工作完成。

4、确认插件需求

要求:用户上传上图,输入要裁切成几份,插件完成裁切并将切好的图片存在本地。

说实话,就这样一个需求,对于有经验的开发者也是有一定的挑战的,但咱今天我们通过Cursor,三分钟把它搞定了!

5、开发流程

新建一个项目文件夹,用Cursor打开文件夹。按Ctrl+i快捷键调出Composer对话框,我们就可以直接用自然语言像AI工具提出我们的需求。

输入提示词如下:

1
2
3
请你帮我开发一个谷歌插件,用于将用户将上传一张长图,平均纵向平均裁切成多份。用户需要上传图片并输入需要裁切的份数,长图裁切完成后将自动下载到本地电脑上。注意使用manifest v3 版本开发,注意按钮中文编码的问题。

请你帮我开发一个谷歌插件,用于将用户将上传一张长图,平均纵向平均裁切成多份。用户需要上传图片并输入需要裁切的份数,长图裁切完成后将自动下载到本地电脑上。注意使用manifest v3 版本开发,注意按钮中文编码的问题。

这里有几个高级模型可选,这里默认选择claude-3.5-sonnet就行。

输入完提示词后,直接回车。

接下来Cursor将直接开始生成代码以及使用说明,如下图所示,谷歌插件所需的三个代码文件就生成好了。

代码生成完后,点击Accept all,保存代码。将聊天窗口拉至最下方,AI早已给出了接下来的操作说明,如下图:

按照说明要求,我们在代码目录下,手动新建一个名为icons的文件夹,并找一个128 * 128的图片文件,放在该文件夹下。图片命名为icon.png。

这个目的是给谷歌浏览器插件设置一个插件图标。如下图,是我添加的文件夹和图片。

6、安装执行插件

在Chrome浏览器中打开 chrome://extensions/,并打开“开发者模式”,如下图:

选择“加载已解压的扩展程序“,选择刚才代码生成的目录。之后,在Chrome浏览器的插件列表中,就会出现我们刚刚添加的”长图纵向裁切工具1.0“

点击我们的”长图纵向裁切工具1.0“,试试效果先!

我选择一个我漫画中的长图片,选择将其才切成4份,点击”开始裁切“。

插件提示我”裁切成功“,之后插件成功自动下载好了4张裁好的图片。

至此,插件开发彻底成功!

帖子中看着内容稍微有点长,但大家看看这个开发过程:

我自己只是写了一行提示词,新建了icons文件夹,百度上找了个图片作为图标,代码和操作说明,AI写的非常清晰,全程实操下来也就3分钟而已。

所以,利用AI,确实给普通人跨界完成开发提供了巨大的便利。

【AI实战】3分钟完成谷歌插件开发

https://www.shuiwh.com/posts/learn-ai-0000001/

作者

水无痕

发布于

2025-07-31

更新于

2025-07-31

许可协议