首發於公眾號 大遷世界，歡迎關注。? 每週7篇實用的前端文章 ?️ 分享值得關注的開發工具 ?分享個人創業過程中的趣事
曾經想過製作自己的Chrome擴充套件，卻因為覺得過程太複雜而打消了念頭嗎？
好訊息，事情並沒有你想象的那麼複雜！在接下來的幾分鐘裡，我們不僅將為你詳解Chrome擴充套件的基礎知識，還將手把手教你如何用五個簡單的步驟建立自己的擴充套件。
我們將構建什麼？
近年來，我們見證了人工智慧能力的飛速發展。儘管這些全新的數字助手為我們帶來了前所未有的便捷，但它們也隨之帶來了一個提醒：不要與它們分享敏感資訊。
不知道你如何看待這一點，但對我來說，我的手指動作通常比我的大腦快。為了預防可能的失誤，我們將為 ChatGPT 構建一個 “molly-guard” 。
如果你在疑惑什麼是 “molly-guard”，它最初是用來指一個放在按鈕或開關上的盾牌，以防止意外啟用。在我們的上下文中，它是一個數字守護者，確保我們不會過度分享資訊。
使用者可以指定他們認為敏感的單詞或短語列表。如果我們試圖向ChatGPT提交包含這些詞的資訊，擴充套件將立即啟動，禁用提交按鈕，並防止我們可能的疏忽。
什麼是Google Chrome擴充套件？
在我們開始之前，讓我們先明確一下 Chrome 擴充套件到底是什麼。Chrome 擴充套件是一小塊旨在增強或修改 Chrome 瀏覽體驗的軟體。擴充套件是用標準的網路技術——HTML，JavaScript和CSS——開發的，它們可以從簡單的工具（如顏色選擇器）到更復雜的工具（如密碼管理器）。
注：對於那些渴望更深入瞭解Chrome擴充套件的人，Google的官方文件是一份極其寶貴的資源。
值得注意的是，Google Chrome 擴充套件可以根據其預期的功能採取多種形式。有些有一個瀏覽器動作，透過位址列旁邊的圖示可見，以便快速訪問其功能。其他一些可能會在後臺默默執行，在所有網頁上或僅在特定網頁上，具體取決於它們的設計。
對於我們的教程，我們將專注於使用內容指令碼的擴充套件型別。該指令碼將允許我們與特定頁面的DOM進行互動和操作——在我們的情況下，即ChatGPT介面。
步驟1：建立擴充套件檔案
首先，我們需要為我們的Chrome擴充套件設定基本結構。我們的副檔名為chatgpt-mollyguard，將在一個專門的資料夾中進行組織。這個擴充套件目錄將包含所有必要的檔案，以使我們的 molly-guard 能夠順暢執行。
下面是一個細分：
- 資料夾：
chatgpt-molly-guard。這是我們擴充套件的根目錄，所有我們的檔案都將存放在這個資料夾裡。 - 檔案：
manifest.json。這是我們擴充套件的核心和靈魂，這個檔案包含有關擴充套件的後設資料，例如其名稱、版本和所需的許可權。最重要的是，它指定了在哪些網站上執行哪些指令碼。 - 檔案：
contentScript.js。顧名思義，這個JavaScript檔案包含內容指令碼。這個指令碼可以直接訪問網頁的內容，允許我們掃描敏感詞並根據需要修改頁面。 - 檔案：
wordsList.js。一個專門用於包含使用者指定的敏感詞或短語列表的JavaScript檔案。我們將這個檔案單獨出來，以便使用者可以輕鬆自定義他們的列表，而無需深入瞭解contentScript.js中的核心功能。 - 檔案：
styles.css。一個樣式表，用於為我們的擴充套件增加一些外觀效果。雖然我們的主要目標是功能性，但使我們的警告或提示看起來更好也無妨！ - 要開始：
- 在你的電腦上建立一個名為
chatgpt-molly-guard的新資料夾。 - 在這個資料夾內，建立上面列出的四個檔案。
- 有了這些檔案，我們就準備好開始填寫細節了。
在接下來的幾節中，我們將更深入地探討每個檔案，並概述其在擴充套件中的特定作用。
步驟2：建立 Manifest 檔案
Manifest 檔案是一個 JSON 檔案，它向瀏覽器提供了有關你的擴充套件的基本資訊。這個檔案必須位於擴充套件的根目錄中。
以下是我們的 manifest 結構。將這段程式碼複製到 manifest.json：
{
"manifest_version": 3,
"name": "ChatGPT Molly-guard",
"version": "1.0",
"description": "Prevents submission if specific words are typed into chat window",
"content_scripts": [
{
"matches": ["https://chat.openai.com/*"],
"css": ["styles.css"],
"js": ["wordsList.js", "contentScript.js"]
}
]
}
Manifest 檔案有三個必填欄位，分別是：manifest_version、name 和 version。其他都是可選的。
主要 Manifest 元素
manifest_version：一個整數，指定manifest檔案格式的版本。我們使用的是 Manifest V3，這是目前可用的最新版本。請注意，Google 正在積極淘汰 2023 年的 Manifest V2 擴充套件。name：一個簡短的純文字字串（最多 45 個字元），用於標識擴充套件。version：一個到四個用點分隔的整數，用於標識擴充套件的版本。description：一個純文字字串（不包含 HTML，最多 132 個字元），用於描述擴充套件。content_scripts：此鍵靜態地指定每次開啟與 URL 模式（由 matches 鍵指定）匹配的頁面時要使用的 JavaScript 或 CSS 檔案。這裡，我們說我們的指令碼應該執行在以https://chat.openai.com/開頭的任何 URL 上。
在上述欄位中，Google 將在 Chrome 的擴充套件管理頁面和 Chrome 網上商店中顯示你的擴充套件的名稱、版本和描述。
儘管我們的 manifest 是針對我們的需求進行了精簡，但還有許多其他欄位可以為你的擴充套件新增深度和功能。例如 action、default_locale、icons 等欄位提供了自定義選項、UI 控制和國際化支援。
要全面瞭解 manifest.json 檔案中的可用內容，請參閱 Google 的官方文件。
步驟3：建立 Content Script
Chrome 擴充套件中的 Content Script 是執行在網頁上下文中的 JavaScript 檔案。它們可以檢視和操作正在執行的頁面的 DOM，從而改變網頁的內容和行為。
這是我們的內容指令碼。將以下程式碼複製到 contentScript.js 檔案中：
const debounce = (callback, wait) => {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
};
function containsForbiddenWords(value) {
return forbiddenWords.some(word => value.toLowerCase().includes(word.toLowerCase()));
}
function updateUI(target) {
const containsForbiddenWord = containsForbiddenWords(target.value);
const sendButton = target.nextElementSibling;
const parentDiv = target.parentElement;
if (containsForbiddenWord) {
sendButton.disabled = true;
parentDiv.classList.add('forbidden-div');
} else {
sendButton.disabled = false;
parentDiv.classList.remove('forbidden-div');
}
}
document.body.addEventListener('keyup', debounce((event) => {
if (event.target.id === 'prompt-textarea') updateUI(event.target);
}, 300));
document.addEventListener('keydown', (e) => {
if (e.target.id === 'prompt-textarea' && e.key === 'Enter') {
if (containsForbiddenWords(e.target.value)) {
e.stopPropagation();
e.preventDefault();
}
}
}, true);讓我們一步一步來解析這個指令碼。
檔案的頂部宣告瞭一個 debounce 函式。我們將使用這個函式確保不會在使用者每次按鍵時都檢查禁止詞彙。那將是大量的檢查！相反，我們會等到使用者停止輸入後再執行操作。
接下來是一個 containsForbiddenWords 函式。顧名思義，該函式在傳遞給它的文字中包含任何禁用詞時返回 true。我們將兩個值都轉為小寫，以確保比較不區分大小寫。
updateUI 函式確定聊天框中是否存在任何禁用詞。如果存在，它會禁用傳送按鈕並向聊天框的父 div 新增一個 CSS 類（forbidden-div）。
指令碼最後註冊了兩個事件監聽器：
- 第一個觸發在
keyup事件上。它檢查修改的元素是否是我們的目標（聊天視窗），然後呼叫updateUI函式。 - 第二個事件監聽器監聽我們的目標上的
keydown事件。具體來說，它在文字區域中有一個禁用詞時，會阻止瀏覽器的預設操作（在這種情況下為表單提交）。
這有效地阻止了包含禁用詞的訊息被髮送。
值得注意的是，我們使用了事件委託，因為 ChatGPT 介面是一個單頁面應用（SPA）。在 SPA 中，使用者介面的部分會根據使用者互動動態替換，這可能會意外地解除繫結到這些元素的任何事件監聽器。
步驟4：新增樣式
雖然我們擴充套件的核心功能是防止特定的提交行為，但讓使用者能立即識別出為什麼他們的操作被阻止也非常重要。讓我們新增一些樣式，以提供視覺提示並增強使用者體驗。
下面是我們要使用的樣式規則。請將其新增到 styles.css 檔案中：
.forbidden-div {
border: 2px solid red !important;
background-color: #ffe6e6 !important;
}這樣，每當檢測到禁用詞時，輸入區域會立即顯示出醒目的紅色邊框和微妙的紅色背景。這立即引起了注意，並表明出現了問題。透過在父級 div 上切換一個類，我們可以輕鬆地開啟或關閉這一功能。
值得注意的是 !important 標誌。當你處理不屬於你的網頁時——比如在這種情況下與 ChatGPT——現有的樣式可能非常具體。為確保我們的樣式具有優先順序並被正確應用，!important 標誌會覆蓋由於現有樣式特異性而可能產生的任何潛在衝突。
步驟5：測試擴充套件
最後一步：填充我們的擴充套件應該監控的禁用詞列表。我們可以在 forbiddenWords.js 中新增這些詞：
const forbiddenWords = [
"my-company.com",
"SitePoint",
"Jim",
];現在我們的自定義 Google Chrome 擴充套件已經全部設定好了，是時候測試其功能，確保一切都按預期執行了。
- 開啟 Chrome 瀏覽器，然後在位址列中導航到
chrome://extensions/。 - 在頁面右上角開啟“開發者模式”開關。
- 點選現在可見的“載入未打包的擴充套件”按鈕。
- 導航到並選擇您的擴充套件目錄（在我們的例子中是
chatgpt-molly-guard），然後點選“選擇”。我們的擴充套件現在應該出現在已安裝擴充套件的列表中。
現在，為了測試功能，請導航到 ChatGPT，重新整理頁面，然後嘗試輸入您的限制詞，看看擴充套件是否按預期行為。
如果一切都按計劃進行，您應該會看到如下圖所示的情況。
如果您對擴充套件程式碼進行了任何更改——例如更新單詞列表——請確保點選擴充套件頁面上擴充套件卡片右下角的環形箭頭。這將重新載入擴充套件。然後，需要重新載入擴充套件正在針對的頁面。
進一步擴充
我們當前的基礎 Chrome 擴充套件已經滿足了其目的，但總有改進的空間。如果您渴望進一步完善擴充套件並擴充套件其功能，以下有一些建議。
單詞列表編輯的使用者介面
目前，我們的擴充套件依賴於預定義的受限單詞列表。實現一個使用者友好的介面將允許使用者動態地新增、刪除或修改單詞。這可以透過一個彈出 UI（瀏覽器操作）來完成，該 UI 在點選擴充套件圖示時開啟，使用者可以在其中管理他們的列表。您還需要將單詞持久化到儲存中。
處理滑鼠貼上事件
雖然我們的擴充套件檢測到按鍵操作，但使用者可以透過使用滑鼠的右鍵選單貼上敏感資訊來繞過這一點。為了堵住這個漏洞，我們可以新增一個用於貼上事件的事件監聽器（或者兩者都監聽輸入事件）。這將確保無論資訊是鍵入還是貼上的，過濾器都能保持強健。
情境性覆蓋
阻止某些詞可能有點過於籠統。例如，我可能想阻止提到“Jim”（我的名字），但沒有問題提到“Jim Carey”。為解決這個問題，考慮引入一個功能，該功能將在下一個提交事件發生之前禁用 molly-guard。
總結
如我們所見，構建自己的 Google Chrome 擴充套件並不是不可逾越的挑戰。我們從一個明確的目標開始：為 ChatGPT 建立一個保護層，確保敏感資訊保密。在本教程中，我們看到了如何透過少量的檔案和一些程式碼來實現一個功能強大且有用的瀏覽器擴充套件。
交流
首發於公眾號 大遷世界，歡迎關注。? 每週一篇實用的前端文章 ?️ 分享值得關注的開發工具 ❓ 有疑問？我來回答
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。