我使用GPT在15分鐘內(nèi)用零前端知識創(chuàng)建了一個名叫GitHub Searcher的Chrome擴展

　　沒有前端經(jīng)驗，使用GPT在15分鐘內(nèi)就開發(fā)了一個Chrome擴展程序，你敢信嗎?作者Lorain在dev.to上分享了他的開發(fā)經(jīng)驗。

　　作者稱他希望通過右鍵菜單直接在當前頁或新標簽頁搜索選中的文本在GitHub上的項目。但作者前端知識有限，便將想法描述給GPT，GPT快速生成了可工作的代碼，包括清單文件、背景腳本、右鍵菜單等。

　　提示如下:

　　我:通過按住鼠標并拖動鼠標來選擇網(wǎng)頁中的部分文本，這個操作叫什么?

　　GPT:在網(wǎng)絡瀏覽器中，通過按下并拖動鼠標左鍵來選擇一部分文本的操作通常稱為“文本選擇”或“文本拖動”。此操作允許用戶突出顯示網(wǎng)頁上的文本，以便進行復制、剪切或執(zhí)行搜索或翻譯等其他操作。這是閱讀網(wǎng)頁、復制信息或引用文本時的常見交互。

　　我:在瀏覽器中點擊鼠標右鍵打開菜單，這個操作叫什么?

　　GPT:在網(wǎng)絡瀏覽器中，通過鼠標右鍵單擊打開菜單的操作通常稱為“上下文菜單”操作，有時也稱為“右鍵菜單”。此菜單通常包含與您右鍵單擊的元素或區(qū)域相關的選項，允許您執(zhí)行各種操作，例如打開鏈接、保存圖像、復制文本等。此上下文菜單的內(nèi)容可能會有所不同，具體取決于您右鍵單擊的內(nèi)容和瀏覽器的設置。它提供了一種快速訪問常用功能的便捷方法。

　　我:在某些 Chrome 擴展程序中，右鍵菜單通常有一個子菜單，例如“圖像助手”，其中包含各種支持的操作，例如“從此頁面提取圖像”和“從此頁面下載圖像”。這些有官方術語嗎?

　　GPT:在 Chrome 擴展中，右鍵單擊菜單中的這些子菜單包含多個相關操作，通常稱為“上下文菜單子菜單”或“右鍵單擊子菜單”。這些子菜單允許擴展開發(fā)人員將擴展支持的不同功能組織到更大的選項組中，從而提供更多的功能選擇和改進的用戶體驗。在此子菜單中，每個選項通常代表擴展支持的特定操作或功能。在您提到的示例中，“圖像助手”子菜單包括“從此頁面提取圖像”和“從此頁面下載圖像”等操作。

　　值得注意的是，對此沒有官方標準術語，不同的擴展開發(fā)人員可能使用不同的術語來描述此功能。然而，一般來說，此類子菜單的目的是組織和呈現(xiàn)多個相關的操作選項。

　　我:我想開發(fā)一個名為“ghs”的 Chrome 擴展(GitHub Searcher)。該擴展的使用方法如下:用戶使用鼠標在網(wǎng)頁上選擇一些單詞或句子，這就是“文本選擇”操作。 用戶右鍵單擊鼠標打開上下文菜單，然后選擇名為“GitHub Searcher”的子菜單。該子菜單包含兩個選項:“當前選項卡”和“新選項卡”。 github.com/search?q={{ sample }}&type=repositories選擇文本后，單擊這兩個選項將在當前選項卡或新選項卡中打開 URL ，其中{{ }}代表所選文本。

　　這是一個實際的用例:在瀏覽網(wǎng)頁時，我選擇單詞“helloworld”，然后右鍵單擊并從“GitHub Searcher”子菜單中選擇“新選項卡”選項。然后瀏覽器應該打開一個新選項卡并訪問該 URLgithub.com/search?q=helloworld&type=repositories。

　　現(xiàn)在，我需要你的幫助來開發(fā)這個擴展。請列出每個步驟并在代碼中添加必要的注釋以幫助我理解它。

　　GPT:開發(fā) Chrome 瀏覽器擴展涉及幾個步驟。我將列出每個步驟并向代碼添加注釋以幫助您理解它。

　　第1步:創(chuàng)建擴展目錄和清單文件

　　首先，您需要為您的擴展創(chuàng)建一個本地目錄，并manifest.json在該目錄中創(chuàng)建一個清單文件 ( )。清單文件用于定義擴展的基本信息、權限和功能。 //manifest.json{

　　第2步:創(chuàng)建擴展圖標

　　將擴展圖標 (icon.png) 添加到擴展目錄。該圖標代表您的分機。

　　第3步:創(chuàng)建上下文菜單

　　在background.js文件中，創(chuàng)建上下文菜單，以便用戶可以右鍵單擊選定的文本來打開擴展的子菜單。這是一個示例background.js文件: //background.jschrome.contextMenus.create({

　　第四步:創(chuàng)建擴展彈出頁面

　　創(chuàng)建一個彈出頁面 (popup.html)，當用戶單擊擴展圖標時，該頁面將顯示信息或設置。您可以根據(jù)需要自定義此頁面。

　　第5步:加載擴展

　　最后，在 Chrome 瀏覽器中加載您的擴展程序: 打開Chrome瀏覽器，進入擴展程序管理頁面(chrome://extensions/)。 啟用“開發(fā)者模式”。 單擊“加載解壓”按鈕并選擇您的擴展目錄。

　　完成這些步驟后，當用戶選擇文本并右鍵單擊時，您的擴展應該能夠顯示“GitHub Searcher”子菜單，并且當“當前選項卡”或“新選項卡”時，它應該打開相應的 GitHub 搜索頁面被選中。

　　請注意，這是一個基本示例，您可以根據(jù)需要進一步擴展和自定義擴展程序的界面。另外，請確保您遵循 Chrome 網(wǎng)上應用店的發(fā)布指南和最佳實踐。成功發(fā)布后，用戶可以從 Chrome 應用商店安裝并使用您的擴展程序。

　　GPT生成的代碼基本實現(xiàn)了搜索功能，僅需解決一些小問題如補充彈出頁面。這顯示GPT可以幫助開發(fā)者快速實現(xiàn)想法，節(jié)省開發(fā)時間，即使對領域不熟悉。通過與GPT的互動對話，開發(fā)者可以將想法轉化為可執(zhí)行的代碼。本次開發(fā)經(jīng)驗令人鼓舞，顯示GPT的潛力。

　　以下是GitHub Searcher的詳細介紹:

　　GitHub Searcher(GHS)是一個方便實用的Chrome瀏覽器擴展，它能讓你從任意網(wǎng)頁上選擇的文本快速地在GitHub上進行代碼搜索，大大提高軟件開發(fā)和技術研究的效率。

　　GHS擴展的核心優(yōu)勢在于它打通了瀏覽器界面和GitHub的關聯(lián)，讓原本需要多步操作的代碼搜索行為變得簡單方便。只需在任意網(wǎng)頁上選擇關鍵詞、代碼片段或函數(shù)名，右鍵通過GHS擴展菜單選擇在當前頁面或新頁面進行GitHub搜索，就可以快速定位到相關開源代碼倉庫或項目文件。

　　GHS擴展最大限度地節(jié)省開發(fā)人員的時間成本，不需要在瀏覽器界面和GitHub網(wǎng)站間來回切換，也不需要重新組織搜索關鍵詞，直接從選中的文本激活GitHub代碼搜索，大大提升代碼編寫和技術調(diào)研的效率。這對經(jīng)常需要查閱技術文檔的開發(fā)者來說，無疑是極大的便利。

　　GHS擴展還具備輕量級的優(yōu)勢，安裝簡單方便，對系統(tǒng)資源消耗非常小，不會產(chǎn)生明顯的性能負擔，可以無縫集成到開發(fā)者的工作流程中。總體來說，GHS是增強開發(fā)效率的絕佳工具，對于經(jīng)常在GitHub上搜索代碼的技術人員來說是必備的 Chrome擴展。