零基础小白如何利用AI成为chrome扩展开发高手

225 阅读1分钟

序言

随着AI潮流地涌起,传统的程序员正逐渐被AI取代,将AI融入开发流程已是大势所趋。学习 chrome 插件开发,可以获得许多外包和远程兼职机会,实现零花钱自由,但传统学习需要花费大量时间和精力。接下来将给你展示,如何利用AI,一分钟开发 chrome 插件。

准备工作

1.下载Trae

Trae由字节跳动旗下新加坡公司SPRING PTE提供服务,支持AI问答、代码自动补全、基于Agent的AI编程等功能,用户提问后能够直接生成完整的代码项目。(当然cursor也是一个很不错的选择,但是Trae是免费的)

点击链接安装trae: www.trae.com.cn/

2.创建一个文件夹,我命名为“chrome插件开发”,用Trae打开它

image.png

image.png

3.建立文件夹hulk(插件的名字)

image.png

4.在文件夹hulk下建立文件夹icons和文本文件instruction.txt

image.png

5.添加素材

image.png

  1. 存入文件夹icons中

icon16.png

icon48.png

icon128.png

  1. 存入文件夹hulk中

UX.jpg

将AI融入开发流程

1.给AI详细的指令

image.png

思路如下:

  1. 给AI一个身份,让他像人一样思考
  2. 给个具体的任务
  3. 细化流程,清晰准确
  4. 遵守什么规则,不要做什么

2.AI生成

打开右侧栏,让AI生成程序

image.png

注意 instruction.txt 文件的写法

1.输入 # ,点击 File

image.png 2.点击 instruction.txt

image.png

3.应用AI生成的代码

image.png

image.png

image.png

4.打开插件

  1. 浏览器搜索chrome://extensions/ ,打开“开发人员模式”

image.png 2. 点击“加载解压缩的拓展”

image.png 3.选择hulk文件

image.png

image.png 4. 打开插件

image.png

b05c9a74092d7ed7445104038da9cd1.png

感谢观看,共同进步!