引言
目前ai的时代到来了,ai风爆,大量的ai大模型出现(openai ,claude sonnet,deepsek),代码领域也日新月异,各个大厂的代码至少50%的代码是由ai来完成的,面对这样的现象,在学校里教的传统的以java,c++为主流的就业是很难,因此我们要顺应时代潮流,学习如何使用ai来辅助我们完成应用的开发,以智能为生产力,将ai融入开发流程中,打造ai应用,ai驱动自动化应用。接下来,我便来介绍一下,一个简单的chrome插件开发使用ai是如何生成的
chrome插件开发
环境配备
可以选择目前市面上已经出现的可以自动生成代码的编译器,如Trae CN,cursor(trae完全免费,但是性能不如cursor,但是后面那个要收费) 1、创建一个后缀为\hulk的文件夹 2、在该文件夹里创建一个文本文件,即以.txt结尾
使用Prompt来编程
首先,Prompt是什么呢? 其实就是相当于我们和ai聊天时和他说的话,只不过我们将这段话以文本文件的形式保存下来,且跟编程一样有一定的规则,下面时我为了是实现一个使页面变绿的一个chrome插件而编写的prompt,放在前面以.txt结尾的文件当中(注意要将文件当中提及的文件补全,可以自己在网上找,其实就是图标和一些页面样式的参考)
你是一个经验丰富的chrome扩展开发者。请帮我开发一个名为Hulk的扩展应用。
ux设计图请参考ux.png。
具体交互步骤如下:
Step 1: 点击程序图标打开弹出窗口,在窗口中显示默认提示:
“改变背景颜色”、“点击下方按钮将当前页面背景色为绿色” 和一个
“改变背景颜色”按钮
Step 2: 点击按钮,网页背景改变为绿色
注意以下两点:
请使用icons文件夹的图标作为应用程序的图标
具体要明确的就是以下三点:
- chrome 插件开发(任务)
- 功能 将页面背景颜色变绿(怎么做,慢慢细化(详细且准确))
- 为了把活干漂亮,可以给他一个身份
如何使用ai完成一个插件的开发
以trae为例 在右侧的对话框中输入“#”,然后选择file,选择prompt在的那个文件,“请根据 instruction.txt 当中的需求,帮我开发对应的chrome扩展程序。”选择你想要的模型,运行,然后欸段代码同意,它会自动创建文件
如何使用该插件
打开Chrome浏览器,进入 chrome://extensions/ 开启「开发者模式」,点击「加载已解压的扩展程序」 然后选择你的hulk文件打开即可使用