和 GPT-4 结队编程开发批量删除 chatGPT 对话插件

我和 GPT-4 一起开发了一个 Chrome 插件，可以批量删除 chatGPT 网页版上的对话，废话少说，先看效果：

• youtube^[1]

• Github 地址^[2]

• 插件地址^[3]

视频号地址（手机上可以用微信扫码）：

背景

作为一名后端工程师，基本没写过啥前端代码。但是自己独立写一个有 UI 界面的作品出来给用户使用，一直是个梦想。无奈动手写的成本太高，也尝试过学习前端语言，但是时间精力问题，一直也没成功。

最近，我在社交媒体上看到很多人借助 chatGPT 实现了自己的 chrome 插件，甚至是开发了自己的 APP，不少都上架了应用商店了。这就又让我眼馋和心动了，也想开始开发一个插件。

另一方面，我在使用 chatGPT 网页版的过程中，会收集一些好用的 prompt，比如“翻译大师”、“变量名取名大师”……但是啊，平时经常会发起一些临时性的对话，就是随便问一些东西。问完之后，就要删掉，以便控制对话数量不要膨胀太快。

问题是，现在想要删除 chatGPT 页面上的对话，还挺麻烦。得先点击相应的对话，进入到对话详情页，弹出删除图标，点击删除图标，再点击确定，最后才能删除。所以，想要一次删除多个对话就很繁琐。

还有一个可能需要用到批量删除对话的场景是：多人合用一个账号，删除对话是刚需，批量删除能节省很多时间。

基于以上的原因，我便开始愉快地和 GPT-4 结队编程，一起开发起批量删除 chatGPT 对话插件。

过程梳理

尝试梳理一下全过程，由于是第一次开发 Chrome Web Store 插件，并且以前从来没有写过前端代码，所以前后花了挺长时间。

原始总共有 3 个对话，本文会将其中的主要节点和对话展示出来，更详细地可以看原对话：

Bulk Delete ChatGPT(1)^[4]Bulk Delete ChatGPT(2)^[5]Bulk Delete ChatGPT(3)^[6]

尝试调用接口失败

在向 GPT-4 提问之前，我用 google 浏览器的 inspect 功能看了下 chatGPT 对话页面的接口调用情况。关于删除一个对话的过程如下：

用户手动点击某个对话，页面会调用一个接口，拿到这个对话的属性，核心的数据就是 Coversation ID。

响应为：

响应里面包含了所有的对话信息。

如果点击删除按钮，再点确定，页面会调一个 PATCH 方法，执行删除：

我一看，这不是挺简单嘛！

接着用 inspect 查看对话对应的 html 元素：

傻眼了，chatGPT 做了混淆，所以没办法知道某个对话的 Conversation ID。

但是别慌，这不是还能拿到标题嘛！刷新页面就会有另一个接口来获取所有的对话数据：