1、需求背景

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

这种经历多了之后，我开始思考能否简化整个流程，毕竟每次都要打开 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 时遇到了第一个问题:

解决办法:

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

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

运行效果：

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

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

问下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 的网站进行测试：

输出结果符合预期。

2.3 应用 generateRandomPassword 函数

接下来参照工程里的已有代码，把 generateRandomPassword 函数加进去：

添加一个“copy password”按钮：

但是不知道为什么const success = copyToClipboard(currentPassword); 这一行代码有编译错误。

于是继续问 ChatGPT：

修改，运行，最终的效果是：

2.4 界面美化

2.3 添加外联css文件

添加css-loader和style-loader，以支持外联css文件：

效果没变：

2.4 几天后继续开发，发现运行失败

原来在选择“已解压的扩展程序”时，必须要选择 dist 目录才行😄。

2.5 优化复制成功的提示框

目前密码复制成功后，会弹出这样的 alert 对话框，会打断使用体验：

继续问ChatGPT有没有更好的做法：

结果编译报错了：

最后发现是找错了manifest.json！权限要设置到 public 目录下的 manifest.json 里:

现在不报错了，但是复制密码后还是没有看到成功提示的通知，为什么呢？

经过一番摸索，原来还需要打开 Chrome 浏览器的通知权限！

效果：

另外还有一个插曲，我发现console.log无法打印日志了。最后才发现，chrome.notifications.create 和 console.log在 popup.tsx 里执行是无法生效的，必须放到 background.ts 里。

iconUrl字段的值也要注意，如果设置错误，会报一个"Unable to download all specified images"的异常：

经过这么多折腾，虽然成功地弹出了提示，但是效果完全不是我想要的，而且用户可能会关闭 Chrome 的通知权限。

2.6 换一种“复制成功”的提示方式

2.7. 添加一个设置页面入口

问问ChatGPT，怎么添加一个设置按钮，点击后打开设置页面。

运行效果：

3. 打包成 crx

点击“打包扩展程序”后选择dist文件夹，即可打包成crx文件：

但是在安装crx文件时，Chrome给出了这样的提示：

应该是 Chrome 政策发生了变化，不再允许安装未上架的 crx 文件。我还记得以前有很多开源项目把 crx 文件放在他们的Github release，以方便用户直接下载并安装。而现在，如果一个 Chrome 插件没有上架到插件商店里，就只能通过“加载已解压的扩展程序”的方式来手动安装使用了。

3. 总结

这是我开发的第一个 Chrome 插件，功能特别简单。还好很多编程语言都是共通的，整个过程没有我之前想象得那么难。ChatGPT 确实能够解决不少开发中遇到的问题，但它并不全能，至少现阶段还不能完全取代搜索引擎。

最后贴下项目地址： github.com/zty5678/chr… ，目前只能算是个半成品，还有很多优化的空间。

另外还要感谢下 github.com/Bin-Huang/c… ，一个免费好用的 ChatGPT 第三方客户端。