利用 ChatGPT 开发自己的第一个 Chrome 插件

2023-05-13 10:47| 来源: 网络整理| 查看: 265

1、需求背景

在网上注册各种账号时，往往需要多次填写密码。这些注册页面通常要求密码具有一定的复杂度，例如必须包含数字、大写和小写字母。为了保证账号安全，我不想在这些网站上使用完全相同的密码，这时就需要生成新的随机密码。我常用的方法是打开 1password.com/ 官网，然后复制一个随机生成的密码。

1password

这种经历多了之后，我开始思考能否简化整个流程，毕竟每次都要打开 1password 的首页再复制还挺麻烦。加上最近看到 ChatGPT 流行起来以后，涌现出了很多优秀的开源浏览器插件项目，旁观他们的整个开发历程还挺令人激动的。于是我决定在 ChatGPT 的帮助下把这个生成随机密码的功能也做成一个 Chrome 插件，并记录下这段历程。

2、开始开发

我发现一些开源的 Chrome 插件项目都 fork 了这个工程：github.com/chibat/chro… ，那我也从它开始吧。

在开始本项目之前，我对Chrome 插件的理解是：格式是crx，可以把crx文件或者解压后的文件拖曳到浏览器的“扩展程序”页面进行安装。

我对 nodejs 工程的了解程度是：依赖库配置在 package.json 里，用npm install命令可以安装依赖库。除此以外，我本职工作是 Android 开发，并没有开发过 nodeJs 项目，只有一点点的 JavaScript 经验，知道console.log和alert，懂一点点 css。

2.1 尝试运行 starter 工程

运行npm install 时遇到了第一个问题: 搜到了一样的问题.png

解决办法:

然后运行npm run build，成功生成了 dist 文件夹：

dist 文件夹

再在“扩展程序”页面点击“加载已解压的扩展程序”按钮，加载整个 dist 文件夹：

加载已解压的扩展程序

运行效果：运行starter工程的效果

2.2 如何用代码生成随机密码？

看了 starter 工程的源码之后，我发现它用的开发语言是 TypeScript。

starter 工程的开发语言是 TypeScript.png

问下ChatGpt：“如何生成一个包含数字和大小写字母的指定长度的密码？”，我得到了一个这样的函数：

function generateRandomPassword(length: number): string { const lowerCaseLetters = 'abcdefghijklmnopqrstuvwxyz'; const upperCaseLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; const numbers = '0123456789'; const characters = lowerCaseLetters + upperCaseLetters + numbers; let result = ''; for (let i = 0; i < length; i++) { const index = Math.floor(Math.random() * characters.length); result += characters.charAt(index); } return result; } const password = generateRandomPassword(20); console.log(password);

我猜测浏览器的开发者工具的 console 里只支持 JavaScript ，不支持 TypeScript ，于是找了一个可以在线执行 TypeScript 的网站进行测试：

在线测试这个 TypeScript 函数