我和 GPT-4 一起開發(fā)了一個(gè) Chrome 插件，可以批量刪除 chatGPT 網(wǎng)頁版上的對(duì)話，廢話少說，先看效果：

• youtube[1]
• Github 地址[2]
• 插件地址[3]

背景

作為一名后端工程師，基本沒寫過啥前端代碼。但是自己獨(dú)立寫一個(gè)有 UI 界面的作品出來給用戶使用，一直是個(gè)夢(mèng)想。無奈動(dòng)手寫的成本太高，也嘗試過學(xué)習(xí)前端語言，但是時(shí)間精力問題，一直也沒成功。

最近，我在社交媒體上看到很多人借助 chatGPT 實(shí)現(xiàn)了自己的 chrome 插件，甚至是開發(fā)了自己的 APP，不少都上架了應(yīng)用商店了。這就又讓我眼饞和心動(dòng)了，也想開始開發(fā)一個(gè)插件。

另一方面，我在使用 chatGPT 網(wǎng)頁版的過程中，會(huì)收集一些好用的 prompt，比如“翻譯大師”、“變量名取名大師”……但是啊，平時(shí)經(jīng)常會(huì)發(fā)起一些臨時(shí)性的對(duì)話，就是隨便問一些東西。問完之后，就要?jiǎng)h掉，以便控制對(duì)話數(shù)量不要膨脹太快。

問題是，現(xiàn)在想要?jiǎng)h除 chatGPT 頁面上的對(duì)話，還挺麻煩。得先點(diǎn)擊相應(yīng)的對(duì)話，進(jìn)入到對(duì)話詳情頁，彈出刪除圖標(biāo)，點(diǎn)擊刪除圖標(biāo)，再點(diǎn)擊確定，最后才能刪除。所以，想要一次刪除多個(gè)對(duì)話就很繁瑣。

還有一個(gè)可能需要用到批量刪除對(duì)話的場(chǎng)景是：多人合用一個(gè)賬號(hào)，刪除對(duì)話是剛需，批量刪除能節(jié)省很多時(shí)間。

基于以上的原因，我便開始愉快地和 GPT-4 結(jié)隊(duì)編程，一起開發(fā)起批量刪除 chatGPT 對(duì)話插件。

過程梳理

嘗試梳理一下全過程，由于是第一次開發(fā) Chrome Web Store 插件，并且以前從來沒有寫過前端代碼，所以前后花了挺長(zhǎng)時(shí)間。

原始總共有 3 個(gè)對(duì)話，本文會(huì)將其中的主要節(jié)點(diǎn)和對(duì)話展示出來，更詳細(xì)地可以看原對(duì)話：

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

嘗試調(diào)用接口失敗

在向 GPT-4 提問之前，我用 google 瀏覽器的 inspect 功能看了下 chatGPT 對(duì)話頁面的接口調(diào)用情況。關(guān)于刪除一個(gè)對(duì)話的過程如下：

用戶手動(dòng)點(diǎn)擊某個(gè)對(duì)話，頁面會(huì)調(diào)用一個(gè)接口，拿到這個(gè)對(duì)話的屬性，核心的數(shù)據(jù)就是 Coversation ID。

響應(yīng)為：

響應(yīng)里面包含了所有的對(duì)話信息。

如果點(diǎn)擊刪除按鈕，再點(diǎn)確定，頁面會(huì)調(diào)一個(gè) PATCH 方法，執(zhí)行刪除：

我一看，這不是挺簡(jiǎn)單嘛！

接著用 inspect 查看對(duì)話對(duì)應(yīng)的 html 元素：

傻眼了，chatGPT 做了混淆，所以沒辦法知道某個(gè)對(duì)話的 Conversation ID。

但是別慌，這不是還能拿到標(biāo)題嘛！刷新頁面就會(huì)有另一個(gè)接口來獲取所有的對(duì)話數(shù)據(jù)：

每次拿 20 條對(duì)話，對(duì)話的 Title 和 Conversation ID 有對(duì)應(yīng)關(guān)系：

利用這個(gè)對(duì)應(yīng)關(guān)系，應(yīng)該可以根據(jù)對(duì)話的 Title 拿到對(duì)話的 Conversation ID，進(jìn)而調(diào)用接口刪除對(duì)話。

所以，我開始向 GPT-4 提出了我的需求：

GPT-4 馬上給出了回答：

20230430231303

注：為了行文簡(jiǎn)潔，我刪除了部分代碼。

這個(gè)回答非常全面，一個(gè) chrome 插件的基本文件都有了，像模像樣。

我按照 GPT-4 的回答，還別說，真地就開發(fā)出來了一個(gè)插件。并且加載插件之后，還真就出現(xiàn)了兩個(gè)按鈕。但是問題是按鈕上的文字是亂碼，按鈕也沒反應(yīng)：

20230430215308

按照回答進(jìn)行修改之后，按鈕上的文字正常了，但是點(diǎn)擊按鈕還是沒有響應(yīng)。

又經(jīng)過兩輪問答，按鈕終于有了響應(yīng)，可以正常在每個(gè)對(duì)話前加上復(fù)選框，但是點(diǎn)擊復(fù)選框之后，復(fù)選框就消失了。

又嘗試了兩輪修改，可以出現(xiàn)復(fù)選框了。我把修改后的代碼反饋給 GPT-4，以便讓它能跟蹤到我的最新進(jìn)展。順便一說，在和 GPT-4 結(jié)隊(duì)編程的過程中，我經(jīng)常這樣做。

然后 GPT-4 也記得它的任務(wù)，馬上就要進(jìn)行下一步了：

20230430220227

照做后，“復(fù)選框沒法選中，點(diǎn)擊復(fù)選框之后會(huì)進(jìn)入鼠標(biāo)所在的那個(gè)對(duì)話”。GPT-4 馬上意識(shí)到：

這是因?yàn)辄c(diǎn)擊復(fù)選框時(shí)，點(diǎn)擊事件冒泡到了對(duì)話元素，導(dǎo)致進(jìn)入對(duì)話。要解決這個(gè)問題，我們需要阻止點(diǎn)擊復(fù)選框時(shí)的事件冒泡。

它又給出了新的 js 代碼。我照做后，無法刪除對(duì)話。因?yàn)?GPT-4 前面告訴我的只是修改哪些地方，它默認(rèn)我使用的都是它給我的代碼，但“微調(diào)”一下太正常不過了。為了讓他更清楚當(dāng)前的狀況，我把當(dāng)前 js 代碼全部復(fù)制過來，讓它看應(yīng)該怎么辦。

GPT-4 接下來又給了一些修改，但是都不 work。我觀察到應(yīng)該是 Conversation ID 不對(duì)。

20230430220820

它構(gòu)造映射方式是手動(dòng)調(diào)用前面提到過的 conversations 接口。不太行，調(diào)用這個(gè)接口還得傳入 token，這個(gè)我還不知道怎么處理。

能不能直接拿頁面獲取好了的結(jié)果。所以我又提出了新的想法：

20230430221110

又經(jīng)過了多輪的對(duì)話，GPT-4 無法搞定構(gòu)造映射這個(gè)需求。我在經(jīng)過了一番折騰之后，也沒耐心了，直接想要 reset 掉構(gòu)造映射這一輪的對(duì)話，于是我又把當(dāng)前的代碼拋了出來：

20230430221438

GPT-4 這時(shí)提出換一種方法：

20230430224621

不過最終這個(gè)嘗試并沒有成功。

接下來，這個(gè)事情就擱置了幾天，暫時(shí)不知道該怎么推進(jìn)了。

模擬手動(dòng)點(diǎn)擊

有一天，我突然想到可以換一種思路，直接模擬頁面上的按鈕點(diǎn)擊。雖然這個(gè)方法看起來比較笨，但是實(shí)現(xiàn)起來比較簡(jiǎn)單，也更安全。

畢竟直接調(diào) chatGPT 的 API 接口，萬一官方不允許這樣做，把賬號(hào)封了就不好了。

20230430221931

這次就比較順利了。

過程中遇到的一些問題，GPT-4 馬上就能意識(shí)到錯(cuò)在哪里，并快速給出方案：

20230430222051

當(dāng)然，我自己也犯了一些錯(cuò)，我沒給全信息，但是 GPT-4 沒有任何抱怨：

20230430222246

接下來，又遇到了另一些問題，選中刪除按鈕、確認(rèn)按鈕并不容易。最終，GPT-4 通過相對(duì)位置（第一個(gè)是確認(rèn)，第二個(gè)是取消）來選擇按鈕：

20230430222600

搞定按鈕選擇問題后，已經(jīng)可以模擬點(diǎn)擊按鈕了，但隨后出現(xiàn)了一個(gè)大問題：

20230430224716

插件只能刪一個(gè)對(duì)話，且刪除后，頁面會(huì)自動(dòng)刷新，原來的 checkbox 就沒了。這時(shí)，我提出了新想法：

20230430223036

通過加延時(shí)（最終是通過檢測(cè)頁面上是否有復(fù)選框元素來判斷有沒有完成刷新），在頁面刷新后，又加上了復(fù)選框。但是之前選中的對(duì)話也沒了：

20230430223300

GPT-4 提出了要將之前選中的對(duì)話存起來，嘗試了但是沒有成功。

現(xiàn)在我們選中對(duì)話其實(shí)存的是 index，就是對(duì)話在左側(cè)頁面上的順序，第一個(gè)對(duì)話的 index 是 1，第二個(gè)對(duì)話的 index 就是 2。很遺憾，刪除了一個(gè)對(duì)話后，頁面會(huì)刷新，所有選中的對(duì)話的 index 都會(huì)變。所以不能簡(jiǎn)單地存儲(chǔ) index，還得對(duì) index 進(jìn)行加減操作，以便在頁面刷新后能正確選中上一輪中未被刪除的已經(jīng)選中過的對(duì)話。

經(jīng)過了多次探討，GPT-4 還是沒能解決。不過，它建議加一些調(diào)試日志，看一下點(diǎn)擊刪除后，index  會(huì)怎么變化。于是，沒學(xué)過前端的我，也開始上手調(diào)試代碼。

最終，我把 GPT-4 用循環(huán)實(shí)現(xiàn)的邏輯變成了用遞歸實(shí)現(xiàn)，最終比較絲滑地解決了問題。

20230430224146

過程中，也遇到了一些小問題。比如，當(dāng)我重復(fù)點(diǎn)擊“添加復(fù)選框”的按鈕時(shí)，它會(huì)在對(duì)話前添加多個(gè)復(fù)選框。GPT-4 拿到問題后，很快就給出了解決方案：

這個(gè)問題的原因是每次點(diǎn)擊 "添加復(fù)選框" 按鈕時(shí)，addCheckboxes 函數(shù)都會(huì)再次執(zhí)行，導(dǎo)致每個(gè)對(duì)話前都添加了新的復(fù)選框。為了解決這個(gè)問題，我們可以在 addCheckboxes 函數(shù)中檢查每個(gè)對(duì)話前是否已經(jīng)存在復(fù)選框，如果不存在，則添加復(fù)選框。

這樣，通過模擬頁面點(diǎn)擊來實(shí)現(xiàn)批量刪除對(duì)話的功能就實(shí)現(xiàn)了。

美化插件頁面

插件基本的功能完成后，就可以用 CSS 代碼來美化頁面。

20230430224355

當(dāng)然，我也可以“PUA”它頁面不好看，讓它重新給代碼：

20230430224813

總之就是不斷地進(jìn)行調(diào)試，來美化頁面效果。

最終的頁面效果是這樣的，咱也沒專業(yè)學(xué)過設(shè)計(jì)，所以就湊合看看：

上傳代碼到 github

至此，插件的功能就完成地差不多了。剩下的工作就是將代碼上傳到 Github 以及發(fā)布到 Chrome Web Store 了。當(dāng)然，Github 的 README 就不用自己寫了。畢竟整個(gè)過程 GPT-4 都全程參與，寫個(gè)說明文檔小菜一碟。

20230430225408

確定了 README 的內(nèi)容后，我還讓它給我翻譯成英文，同樣是簡(jiǎn)單得要命：

20230507201547

發(fā)布插件到 Chrome Web Store

因?yàn)槲沂堑谝淮伍_發(fā) Chrome Web 插件，具體的步驟還真不知道。這要是在以前，直接就是 google 搜出來一篇靠譜的前人文章，然后照著步驟做。雖然大概率也能達(dá)到目的，但是還得自己手動(dòng)甄別，極有的可能做法是一口氣打開 5 篇文章，然后選擇其中一篇看起來不錯(cuò)的，照著做。

但現(xiàn)在不一樣了，只需用自然語言告訴 GPT-4，它會(huì)立即提供完整的步驟，關(guān)鍵是真的有用。很多事情，就是因?yàn)楦奖懔艘恍?，完成他的?dòng)力就更強(qiáng)了一些，最終做成的概率就更大了。

我甚至還詢問了 GPT-4 對(duì)這個(gè)擴(kuò)展的 Logo 有什么建議：

20230430230602

最終在 GPT-4 的幫助下，我成功地發(fā)布了插件[7]，現(xiàn)在可以直接安裝使用了。

啟發(fā)

從開始啟動(dòng)開發(fā)，到最終上架 Chrome Web Store，花費(fèi)了不少時(shí)間。過程中，我也學(xué)會(huì)了一些插件開發(fā)的技巧，這不，在這之后我又開發(fā)了個(gè) chrome 瀏覽器插件：Xargin Blog Archive[8]，這回就順暢很多了，當(dāng)然這是后話。

有幾點(diǎn)啟發(fā)，記錄在此，希望能對(duì)你有所幫助。

1. 和 GPT-4 對(duì)話可以用自然語言。這和我們用搜索引擎時(shí)的體驗(yàn)完全不一樣，搜索引擎是關(guān)鍵詞匹配，我們說得越多，反而匹配越困難。GPT-4 則不然，我們說的要求越具體，它的理解就可能越對(duì)，提供的代碼質(zhì)量就更高。
2. 可以用兩個(gè)對(duì)話來進(jìn)行一個(gè)任務(wù)。一個(gè)用 GPT-4，一個(gè)用 chatGPT。避免 GPT-4 的額度用完之后，得等待一段時(shí)間后才能再次進(jìn)行對(duì)話。注意：如果額度用完之后，還是繼續(xù)對(duì)話，那之后的模型就會(huì)變成 chatGPT，額度恢復(fù)后無法再次變回 GPT-4。
3. 當(dāng)陷入困境后，一定要提供更多信息。如果只是一味地說：不行，這不 work。僅管 GPT-4 會(huì)一次次地讓你嘗試其他方式，但是基本上都不 work。
4. 及時(shí)告訴 GPT-4 階段進(jìn)展。有時(shí)，我們會(huì)對(duì) GPT-4 提供的代碼做一些自己的修改，這個(gè)時(shí)候需要及時(shí)和他同步，這樣在后續(xù)的對(duì)話過程中才更能保持“默契”。

最后

本文講述了我在開發(fā)“Bulk Delete ChatGPT”這個(gè)插件的全過程，包括背景、實(shí)現(xiàn)過程、發(fā)布過程等，最后還總結(jié)出來幾點(diǎn)經(jīng)驗(yàn)。

總體上，整個(gè)開發(fā)過程很有意思。GPT-4 能讓不會(huì)寫前端代碼的后端工程師動(dòng)手開發(fā)一個(gè)純前端的插件，屬實(shí)厲害。盡管過程比較曲折，但是有了經(jīng)驗(yàn)以后，之后再做類似的事情肯定會(huì)更高效。最后，希望這篇文章也能給你帶來啟發(fā)。

參考資料

[1]youtube: https://www.youtube.com/watch?v=W2Hq6CQ3qv0

[2]Github 地址: https://github.com/qcrao/bulk-delete-chatGPT

[3]插件地址: https://chrome.google.com/webstore/detail/chatgpt-bulk-delete/effkgioceefcfaegehhfafjneeiabdjg

[4]Bulk Delete ChatGPT(1): https://sharegpt.com/c/HkdRNaZ

[5]Bulk Delete ChatGPT(2): https://sharegpt.com/c/NX96lCE

[6]Bulk Delete ChatGPT(3): https://sharegpt.com/c/4Xwwvyo

[7]插件: https://chrome.google.com/webstore/detail/chatgpt-bulk-delete/effkgioceefcfaegehhfafjneeiabdjg

[8]Xargin Blog Archive: https://chrome.google.com/webstore/detail/xargin-blog-archive/pokfcnejbacnbjbdodlklbafoienomda