如何使用 ChatGPT 构建自己的 Chrome 插件

前言

上篇文章介绍了我在完全不懂前端的情况下是如何使用 ChatGPT 在 15 分钟内开发了一个 Chrome 插件，最近我又通过 ChatGPT 完成了一个 Chrome 插件的开发，因此想借此对整个开发思路以及过程进行一次总结分享，希望可以或多或少为您带来一些灵感与帮助。

本篇文章将介绍我使用 ChatGPT 开发 TABSNAPSHOT 插件的过程，我们将从最基础需求场景开始，一直到总结使用 ChatGPT 进行开发时的一些注意点。

需求场景

开发这个插件的思路同样来源于我的一个现实需求，平时我的大部分时间都花费在浏览网页与 PDF，Chrome 为我提供了非常好的阅读体验，但当我浏览一个主题时经常需要打开固定的几个页面；比如最近我在复习期中考试，需要打开三个页面（一个 lecture PDF，两个文章链接），那么可能在最近这一段时间每次打开 Chrome 我都需要打开这三个固定的页面。

如果是使用 Chrome 目前的内置功能，我有以下两种选项来让这个过程更加丝滑一些：

新建一个文件夹，将这三个页面作为书签保存进文件夹 ，每次通过文件夹的 打开全部书签 选项来一次性打开所有页面。
依次将这三个页面添加进 Chrome 的阅读清单，然后每次通过依次点击阅读清单中的链接来打开所有页面。

但是这两种方式最终都被我否决了，因为：

文件夹的方式的过程太过繁琐：创建文件夹，将一个页面添加进文件夹并保存所需要的操作过程太多；并且 Chrome 的文件夹我一般用来收藏一些网页而不是用作存储这些暂时需要阅读的页面。
阅读清单不支持添加 PDF，如果涉及到 PDF 页面的话需要我单独去找到这个文件并打开又是一个非常繁琐的过程。

所以我最终明确了我需要一个工具可以暂时性的保存一个或多个 tab 页面 ，并且可以通过很少的操作来打开这些页面 ，就像 打开全部书签 这个选项一样。

开发思路

不同于实现 GitHub Searcher 时的一点是，我完全不知道具体应该如何实现这个插件，我甚至不知道 Chrome 是否提供了一些 API 可以实现这些功能 :(

但慢慢理清后我脑中有了一个大概的思路：

需要一个按键，点击后可以保存当前 Chrome 打开的所有页面作为一个快照（快照条目）。
Chrome 插件的 popup 窗口可以作为插件的主控制面板。
popup 窗口显示所有保存的快照条目，可以通过点击快照条目来打开快照中保存的所有 tab 页面。

有了思路后我们再给这个插件想一个炫酷的名字 TABSNAPSHOT 后就可以到喜闻乐见的 ChatGPT 写代码环节了。

开发过程

基础功能

因为是完全让GPT 来写代码，所以我们只要把我们的需求以及思路清晰的传达给 GPT 就可以了，但由于 GPT 的 "一念神魔" 属性所以我们还是会遇到或多或少的问题。

我的第一个 prompt 如下：

我现在想要开发一个叫 tabsnapshot 的 Chrome 插件，这个插件的作用如下：

通过点击在插件的 popup 窗口中的 create snapshot 按钮，插件会保存当前浏览器打开的所有 tab 的链接并进行保存（即创建一个快照）

保存的快照都会作为一个条目显示在 popup 窗口中，条目的名称为创建快照的时间；

当再次在 popup 窗口点击某一个保存的快照条目时，浏览器会打开这个快照创建时保存的 tab 的链接；

请你完成这个插件的开发，给出所有必要的文件。

但是这个 prompt 的效果不是很好，GPT 虽然提供给了我几个 Chrome 插件所必须的几个文件，但是当我将这个插件加载到 Chrome 中时发现了许多问题：

manifest_version 的版本是 2。
快照中只保存第一个 tab 的链接，而不是所有打开 tab 的链接。
保存的快照没有持久化保存，当我关闭并重新打开 Chrome 后，保存的快照不见了。

于是我添加了这几个注意事项让 GPT 重新生成代码：

我现在想要开发一个叫 tabsnapshot 的 Chrome 插件，这个插件的作用如下：

通过点击在插件的 popup 窗口中的 create snapshot 按钮，插件会保存当前浏览器打开的所有 tab 的链接并进行保存（即创建一个快照）

保存的快照都会作为一个条目显示在 popup 窗口中，条目的名称为创建快照的时间；

当再次在 popup 窗口点击某一个保存的快照条目时，浏览器会打开这个快照创建时保存的 tab 的链接；请你完成这个插件的开发，给出所有必要的文件。

注意事项如下：

manifest_version 的值应该为 3；

一个快照条目应该保存当前浏览器打开的所有链接，而不是一个 URL，你可以考虑使用数组或者 map 等其他方式进行存储；

所有的快照条目都必须持久化存储，即当我关闭并重新打开浏览器时，应该可以看到之前保存的所有快照条目；

在这几个注意事项的帮助下，GPT 生成的代码很好的完成了我提供给它的需求，至此我们完成了 TABSNAPSHOT 的基础功能的开发，插件可以完成创建快照，保存快照以及打开快照这三个操作。

这个基础版本的 UI 如下，可以看到还是非常简陋的。

当我们实现了这个基础版本，我们心里就大概有了一个底，我们的需求是可以通过 Chrome 插件实现的，接下来我们就可以继续丰富优化 TABSNAPSHOT 的功能。

删除功能与 UI 优化

现在我们只有一个创建快照的功能，没有删除功能，所以我们先让 GPT 为我们完成删除功能的开发：

现在我需要你给这个插件增加快照删除功能，在保持原有功能不变的情况下，在 popup 窗口的每个快照条目右边增加一个 "x" 按钮，用户通过点击这个按钮可以删除已保存的快照。请你将添加删除功能后需要更新的代码发送给我。

通过使用添加了删除功能的代码，我们的新 UI 如下：

可以看到 GPT 确实很好的完成了我们在 prompt 中的要求，在快照条目右边添加了一个 x 作为删除按钮，并且这个 x 也确实可以完成删除快照条目的功能，但是这个 UI 实在是太难看了，我们接下来叫 GPT 优化一下按钮的样式：

非常好，但是这个删除按钮的样式有点难看，可以使用类似 create snapshot 那样的按钮吗并且保持删除功能不变

通过这个 prompt 优化后的样式如下：

可以看到优化后的删除按钮好看多了，甚至样式比在 prompt 中提到的 Create Snapshot 按钮还要丰富，于是我们继续让 GPT 优化 UI，最终得到 UI 界面如下：

到这一步，TABSNAPSHOT 已经完全可以投入使用了，目前的所有功能也足够解决了我在需求场景中所提到的痛点。

但由于我的强迫症我们还是继续为 TABSNAPSHOT 添加功能并优化。

重命名与打开快照

从上面的 UI 可以看到每个快照条目的名字都为快照创建的时间，当条目多起来的话我们很难分辨哪个快照包含哪些内容，所以这里我们为 TABSNAPSHOT 添加重命名功能：

我们接下来要添加的第一个功能为重命名功能，请你在 delete 按钮左边添加一个 rename 按钮，按钮的样式和 delete 按钮保持一致，用户点击 rename 按钮后，原本快照条目的文本将变成可编辑的文本，用户可以通过修改文本来对快照重命名，按下回车确认

但这里 GPT 并没有给出很完美的代码，当点击 Rename 按钮并修改文本之后，回车键并不能保存修改，必须点一下 popup 窗口中的其他地方才能保存，我们只好再通过几个 prompt 让 GPT 进行修改，最终才完成重命名功能的开发：

这里我们再将快照的打开方式也改为一个具体的按钮：

非常好现在我想请你修改以下打开保存的快照的逻辑，现在的打开逻辑为点击快照条目打开，我想让你将打开快照的方式变为点击一个 open 按钮来打开，这个 open 按钮在每个快照条目的右边，一个快照条目的样式为：快照名，open 按钮，rename 按钮，delete 按钮

最终效果如下：

全部打开与删除

接下来我们添加一个锦上添花的全部打开和删除功能，并统一一下 UI 风格：

非常好，现在我想请你在 create snapshot 右边增加两个按钮，分别为 - open all：打开所有保存的快照 - delete all：删除所有保存的快照

效果如下：

至此我们完成了所有主要的功能点，接下来我们对 TABSNAPSHOT 的一些细节进行优化。

细节优化

可以优化的细节如下：

如果 tab 包含本地 PDF 浏览的话，则在打开后自动刷新，否则可能需要手动刷新。
为每个快照条目添加包含 tab 数量的统计。
默认快照命名的时间格式简化（只保留月日时分）。
如果在同一分钟创建多个快照则自动进行编号，避免出现重名。
快照预览。

在通过 prompt 与 GPT 进行交流的时候，清晰的描述你的需求是非常重要的，还可以通过举例的方式来让你的 prompt 更加生动：

接下来我们要添加一个快照tab计数功能，当创建一个快照条目时，这个快照所包含的 tab 的数量会显示在快照名后面，例如一个包含三个快照条目的名字为 sample [3]，需要注意的是这个 [3] 不可被用户通过 rename 按钮编辑，你可以将快照条目的名字和 tab 数量统计放在不同的元素中但是放在同一行显示。
请你为快照的创建增加一个判断逻辑，如果多个快照是在同一分钟创建的，则从第二个在同一分钟创建的快照开始按照创建顺序编号，例如在 11/1 15:53 创建的第一个快照的名字为 11/1 15:53，第二个在 11/1 15:53 创建的快照的名字为 11/1 15:53 (2)，第三个为 11/1 15:53 (3)

一个值得一提的事情是快照的预览功能，我一直很难将我想要的效果准确的传达给 GPT，导致 GPT 最终为我实现的效果也没有达到预期，这可能也是因为我自己也确实没有想好这个预览功能应该做成什么样子会好一些。

从预览功能的鼠标悬浮实现到鼠标点击弹出式窗口：

现在我要为这个插件增加一个预览功能，在 popup 窗口的底部留出一块地方作为预览窗口，当用户的鼠标放在一个快照条目的时候，预览窗口中会以列表的形式列出了这个快照条目中所包含的所有 tab 的链接，请你在以上代码的基础上实现这个功能
现在我要为这个插件增加一个预览功能，当用户的鼠标点击一个快照条目时，浏览器会弹出一个预览窗口（注意这个预览窗口不是插件的 popup 窗口），预览窗口中会以列表的形式列出了这个快照条目中所包含的所有 tab 的链接，请你在以上代码的基础上实现这个功能

最终完成所有优化的版本如下，这也是开源后发布的 v0.1.0 版本：

插件 UI

预览窗口 UI

使用 ChatGPT 的开发要点小结

这里我对使用 GPT 开发过程中遇到的问题与要点进行小结：

明确你的开发目标与预期，并且确保你可以用逻辑清晰的话语将你的需求表述出来，否则 GPT 的回复也可能达不到你的要求。
将你的项目拆分成一个一个小的功能点，一个一个开发，先实现基础功能再去优化。
太长的 prompt 可能会导致 ChatGPT 忘记之前的上下文，适当使用较前的 prompt 编辑后提交或者开一个 new chat。
和 ChatGPT 约定或者在开发过程中使用一致的术语。

Logo

我们还可以为 TABSNAPSHOT 设计一个好看的 Logo :)

总结

以上就是我在 ChatGPT 的帮助下开发 TABSNAPSHOT 插件的全过程，包括开发中不断进行迭代的思路与最终的要点总结，希望可以帮助到你。

如你所见，TABSNAPSHOT 还是一个非常简陋稚嫩的插件，具有很大的优化空间，但如果您遇到了和我一样的需求场景，欢迎使用 TABSNAPSHOT 来简化您的生活。

如果您觉得 TABSNAPSHOT 很棒或者有一些不足，可以优化的点，欢迎 Star, Fork and PR !!!