【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 | 请你帮我开发一个谷歌插件,用于将用户将上传一张长图,平均纵向平均裁切成多份。用户需要上传图片并输入需要裁切的份数,长图裁切完成后将自动下载到本地电脑上。注意使用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分钟完成谷歌插件开发