你是否曾考慮過創(chuàng)建自己的 Chrome 插件，但又撓頭毫無思路？那么在接下來的幾分鐘里，我不僅會(huì)介紹 Chrome
瀏覽器擴(kuò)展的基本知識(shí)，還會(huì)指導(dǎo)你通過五個(gè)簡(jiǎn)單的步驟來制作自己的擴(kuò)展。知道怎么做嗎？讓我們一探究竟！
要做一個(gè)什么插件
今年我們見證了人工智能能力的爆炸式增長(zhǎng)。雖然chatgpt能提供前所未有的幫助，但它們也提醒我們：不要與它分享敏感信息。
我不知道你怎么想，但很多時(shí)候，我的手指比我的大腦還快。因此，為了防止可能出現(xiàn)的失誤，要為 ChatGPT 建立一個(gè) “molly-guard”。
如果你正在撓頭想知道什么是 “molly-guard”，它最初指的是放在按鈕或開關(guān)上的防護(hù)罩，以防止意外啟動(dòng)。在我們的語境中，它是確保我們不會(huì)泄密的數(shù)字守護(hù)者。
用戶可以指定他們認(rèn)為敏感的單詞或短語列表。如果我們?cè)噲D向 ChatGPT 提交包含這些字詞的信息，擴(kuò)展程序就會(huì)立即行動(dòng)，禁用提交按鈕，使我們免于潛在的疏忽。
要學(xué)習(xí)本教程，你需要一個(gè) ChatGPT 賬戶。
本教程的代碼可在 GitHub 上獲取
什么是谷歌瀏覽器擴(kuò)展？
在開始之前，讓我們先弄清楚什么是 Chrome 瀏覽器擴(kuò)展。Chrome 瀏覽器擴(kuò)展是一個(gè)小軟件，旨在增強(qiáng)或修改 Chrome 瀏覽器的瀏覽體驗(yàn)。擴(kuò)展使用標(biāo)準(zhǔn)的網(wǎng)絡(luò)技術(shù)（HTML、JavaScript 和 CSS）開發(fā)，既有簡(jiǎn)單的工具（如顏色選擇器），也有復(fù)雜的工具（如密碼管理器）。許多擴(kuò)展都可以在 Chrome 網(wǎng)上商店下載。
注：對(duì)于希望深入了解 Chrome 瀏覽器擴(kuò)展的用戶，谷歌的官方文檔是非常寶貴的資源。
值得注意的是，谷歌 Chrome 瀏覽器擴(kuò)展程序可以根據(jù)其預(yù)期功能采取不同的形式。有些具有瀏覽器操作功能，在地址欄旁邊有一個(gè)圖標(biāo)，可以快速訪問其功能。其他擴(kuò)展則可能在后臺(tái)悄無聲息地運(yùn)行，跨越所有網(wǎng)頁或僅在特定網(wǎng)頁上運(yùn)行，這取決于它們的設(shè)計(jì)。
在本教程中，我們將重點(diǎn)介紹使用內(nèi)容腳本的擴(kuò)展類型。該腳本允許我們與特定頁面的 DOM 進(jìn)行交互和操作，在我們的例子中就是 ChatGPT 界面。
第 1 步：創(chuàng)建擴(kuò)展文件
首先，我們需要為 Chrome 瀏覽器擴(kuò)展設(shè)置基本結(jié)構(gòu)。我們的擴(kuò)展名為 chatgpt-mollyguard，將放在一個(gè)專用文件夾中。該擴(kuò)展目錄將包含所有必要文件，使我們的 molly-guard 順利運(yùn)行。
下面是詳細(xì)說明：
- 文件夾：chatgpt-molly-guard。這是我們擴(kuò)展的根目錄。我們的所有文件都將放在這個(gè)文件夾中。
- 文件：manifest.json。這是我們擴(kuò)展的核心和靈魂。該文件包含擴(kuò)展的元數(shù)據(jù)，如名稱、版本和所需權(quán)限。最重要的是，它指定了在哪些網(wǎng)站上運(yùn)行哪些腳本。
- 文件：contentScript.js。顧名思義，這個(gè) JavaScript
文件包含內(nèi)容腳本。該腳本可直接訪問網(wǎng)頁內(nèi)容，允許我們掃描敏感詞并根據(jù)需要修改頁面。 - 文件：wordsList.js。這是一個(gè) JavaScript
文件，專門用于包含用戶指定的敏感詞或短語列表。我們將其分開，方便用戶自定義列表，而無需深入研究 contentScript.js
中的核心功能。 - 文件：styles.css。為我們的擴(kuò)展添加一些特色的樣式表。雖然我們的主要目標(biāo)是功能性，但讓警告或提示看起來更美觀！
1.在電腦上新建一個(gè)文件夾，命名為 chatgpt-molly-guard。
2.在這個(gè)文件夾中，創(chuàng)建上面列出的四個(gè)文件。
3.文件準(zhǔn)備好后，我們就可以開始填寫細(xì)節(jié)了。
在接下來的章節(jié)中，我們將深入研究每個(gè)文件，并概述其在擴(kuò)展中的具體作用。
第 2 步：創(chuàng)建任務(wù)文件
manifest.json是一個(gè) JSON 文件，用于向?yàn)g覽器提供有關(guān)擴(kuò)展的基本詳細(xì)信息。該文件必須位于擴(kuò)展的根目錄中。
下面是我們的清單結(jié)構(gòu)。將此代碼復(fù)制到 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.json有三個(gè)必填字段，即：manifest_version、name 和 version。其他都是可選項(xiàng)。
關(guān)鍵要素
關(guān)鍵清單元素
- manifest_version：一個(gè)整數(shù)，指定清單文件格式的版本。我們使用的是最新版本的 Manifest V3。請(qǐng)注意，谷歌將在
2023 年逐步淘汰 Manifest V2 擴(kuò)展。 - name：一個(gè)簡(jiǎn)短的純文本字符串（最多 45 個(gè)字符），用于標(biāo)識(shí)擴(kuò)展。
- version：一至四個(gè)以點(diǎn)分隔的整數(shù)，用于標(biāo)識(shí)擴(kuò)展的版本。 description：描述擴(kuò)展的純文本字符串（無 HTML，最多 132
個(gè)字符）。 - content_scripts：此關(guān)鍵字用于指定靜態(tài)加載的 JavaScript 或 CSS 文件，在每次打開與 URL 模式（由
matches 關(guān)鍵字指定）匹配的頁面時(shí)使用。在此，我們表示腳本應(yīng)在以 chat.openai.com/ 開頭的任何 URL 上運(yùn)行。 - 在上述字段中，Google 會(huì)在 Chrome 瀏覽器的擴(kuò)展管理頁面（）和 Chrome 網(wǎng)上商城顯示擴(kuò)展時(shí)使用名稱、版本和描述。
雖然我們的manifest_version已根據(jù)需要進(jìn)行了精簡(jiǎn)，但許多其他字段可以為擴(kuò)展增加深度和功能。諸如 action、default_locale、icon 等字段可提供自定義選項(xiàng)、用戶界面控制和國(guó)際化支持。
如需全面了解 manifest.json 文件中的可用內(nèi)容，請(qǐng)查閱 Google 官方文檔。
第 3 步：創(chuàng)建內(nèi)容腳本
Chrome 瀏覽器擴(kuò)展中的內(nèi)容腳本是在網(wǎng)頁上下文中運(yùn)行的 JavaScript 文件。它們可以查看和操作所運(yùn)行頁面的 DOM，從而修改網(wǎng)頁的內(nèi)容和行為。
這就是我們的內(nèi)容腳本。將以下代碼復(fù)制到 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);
在文件頂部，我們聲明了一個(gè)防抖函數(shù)。用它來確保不會(huì)在用戶每次按鍵時(shí)都檢查是否有禁用詞。那樣會(huì)有很多檢查！相反，我們會(huì)等到用戶停止鍵入后再做任何事情。
接下來是 containsForbiddenWords 函數(shù)。顧名思義，如果傳入的文本中包含任何禁用詞語，該函數(shù)將返回 true。我們對(duì)兩個(gè)值都使用了小寫，以確保比較不區(qū)分大小寫。
updateUI 函數(shù)將確定聊天框中是否存在任何禁用詞語。如果有，它會(huì)禁用發(fā)送按鈕，并在聊天框的父 div 中添加 CSS 類 (forbidden-div)。在下一步中利用它為用戶提供視覺警告提示。
最后，腳本注冊(cè)了兩個(gè)事件監(jiān)聽器：
第一個(gè)被設(shè)置為在按鍵事件中觸發(fā)。它會(huì)檢查修改后的元素是否是目標(biāo)（聊天窗口），然后調(diào)用 updateUI 函數(shù)。由于使用了防抖功能，該函數(shù)不會(huì)持續(xù)運(yùn)行，只會(huì)在輸入過程短暫停頓后運(yùn)行。
第二個(gè)事件監(jiān)聽器正在監(jiān)聽目標(biāo)上的按鍵事件。具體來說，它正在監(jiān)聽 Enter 鍵的按下，如果在文本區(qū)域出現(xiàn)禁用單詞時(shí)按下 Enter 鍵，就會(huì)阻止瀏覽器的默認(rèn)操作（在本例中是表單提交）。
通過禁用發(fā)送按鈕和攔截并阻止回車鍵的按下，這樣就能有效阻止含有禁用詞的郵件發(fā)送。
我們使用了事件委托，因?yàn)?ChatGPT 界面是一個(gè) SPA。在 SPA 中，用戶界面的片段會(huì)根據(jù)用戶交互動(dòng)態(tài)替換，這可能會(huì)無意中分離綁定到這些元素的任何事件偵聽器。通過將事件偵聽器錨定到更廣泛的 DOM 并有選擇性地針對(duì)特定元素，我們可以規(guī)避這個(gè)問題。
步驟 4：添加一些樣式
雖然我們擴(kuò)展的核心功能是阻止某些提交，但重要的是讓用戶能夠立即識(shí)別他們的操作被阻止的原因。讓我們添加一些樣式來提供視覺提示，增強(qiáng)用戶體驗(yàn)。
下面是我們使用的規(guī)則。將其添加到 styles.css 文件中：
.forbidden-div {
border: 2px solid red !important;
background-color: #ffe6e6 !important;
}
只要檢測(cè)到禁用詞，就會(huì)在輸入?yún)^(qū)域添加醒目的紅色邊框和細(xì)微的紅色背景。這將立即引起注意，并表明情況不對(duì)。通過切換父 div 上的類，我們可以輕松地打開或關(guān)閉該功能。
重要標(biāo)記也值得注意。在處理不屬于自己的網(wǎng)頁時(shí)，比如本例中的 ChatGPT，現(xiàn)有的樣式可能非常特殊。為了確保我們的樣式優(yōu)先并被正確應(yīng)用，!!important 標(biāo)記會(huì)覆蓋由于現(xiàn)有樣式的特殊性而導(dǎo)致的任何潛在沖突。
步驟 5：測(cè)試擴(kuò)展
有最后一步：填充我們的擴(kuò)展應(yīng)該監(jiān)控的禁用詞列表。我們可以在 forbiddenWords.js 中添加這些內(nèi)容：
const forbiddenWords = [
"政治",
"股票",
"Jim",
];
現(xiàn)在，我們的自定義 Google Chrome 瀏覽器擴(kuò)展已全部設(shè)置完畢，是時(shí)候測(cè)試其功能并確保一切正常。
打開 Chrome 瀏覽器，在地址欄中導(dǎo)航到。
打開右上角的 "開發(fā)者模式 "切換開關(guān)。
單擊 "加載解壓縮 "按鈕，現(xiàn)在該按鈕將可見。
導(dǎo)航并選擇擴(kuò)展的目錄（本例中為 chatgpt-molly-guard），然后單擊 “選擇”?，F(xiàn)在我們的擴(kuò)展應(yīng)該會(huì)出現(xiàn)在已安裝的擴(kuò)展列表中。
現(xiàn)在，要測(cè)試功能，請(qǐng)導(dǎo)航到 ChatGPT，刷新頁面并嘗試輸入限制詞語，看看擴(kuò)展是否按預(yù)期運(yùn)行。
如果一切按計(jì)劃進(jìn)行，你應(yīng)該會(huì)看到下圖所示的內(nèi)容。
如果您對(duì)擴(kuò)展代碼進(jìn)行了任何更改，例如更新了單詞列表，請(qǐng)務(wù)必點(diǎn)擊擴(kuò)展頁面上擴(kuò)展卡右下角的圓形箭頭。這將重新加載擴(kuò)展。然后，你需要重新加載擴(kuò)展所針對(duì)的頁面。
更進(jìn)一步
我們目前的 Chrome 瀏覽器基本擴(kuò)展功能已達(dá)到預(yù)期目的，但仍有改進(jìn)的余地。如果你渴望進(jìn)一步完善擴(kuò)展功能并擴(kuò)展其功能，下面有一些建議。文章來源：http://www.zghlxwxcb.cn/news/detail-690787.html
- 編輯單詞列表的用戶界面
目前，我們的擴(kuò)展依賴于預(yù)定義的限制詞語列表。實(shí)施一個(gè)用戶友好型界面可以讓用戶隨時(shí)動(dòng)態(tài)添加、刪除或修改單詞。這可以通過點(diǎn)擊擴(kuò)展圖標(biāo)時(shí)彈出的用戶界面（瀏覽器操作）來實(shí)現(xiàn)，用戶可以在該界面上管理自己的列表。您還需要將單詞持久保存到存儲(chǔ)器中。 - 處理鼠標(biāo)粘貼事件
雖然我們的擴(kuò)展會(huì)檢測(cè)按鍵，但用戶可以通過使用鼠標(biāo)右鍵菜單粘貼敏感信息來繞過這一點(diǎn)。為了堵住這個(gè)漏洞，我們可以為粘貼事件添加一個(gè)事件監(jiān)聽器（或者將兩者合并為輸入監(jiān)聽器）。這將確保無論是輸入還是粘貼信息，過濾器都能保持穩(wěn)健。 - 上下文覆蓋 阻止某些術(shù)語可能有點(diǎn)過于籠統(tǒng)。例如，我可能想阻止提及 “Jim”，但提及 "Jim Carey
"卻沒有問題。要解決這個(gè)問題，可以考慮引入一項(xiàng)功能，在下一次提交事件發(fā)生之前禁用 “molly-guard”。
結(jié)論
正如我們所發(fā)現(xiàn)的，創(chuàng)建自己的 Google Chrome 瀏覽器擴(kuò)展并不是一件讓你撓頭很難的事情。我們一開始就有一個(gè)明確的目標(biāo)：為 ChatGPT 創(chuàng)建一個(gè)保護(hù)層，確保敏感信息的機(jī)密性。在本教程中，我們看到了如何通過少量文件和代碼來創(chuàng)建一個(gè)功能實(shí)用的瀏覽器擴(kuò)展。
對(duì)于那些渴望深入學(xué)習(xí)的人來說，谷歌的 Chrome 瀏覽器擴(kuò)展官方文檔是一個(gè)很好的起點(diǎn)。此外，Chrome 瀏覽器擴(kuò)展遷移指南還提供了關(guān)于向 Manifest V3 過渡的見解，鑒于 Manifest V2 即將于 2023 年淘汰，這一點(diǎn)至關(guān)重要。文章來源地址http://www.zghlxwxcb.cn/news/detail-690787.html
到了這里，關(guān)于還在苦惱如何開發(fā)一個(gè)Chrome插件嗎？十分鐘帶你實(shí)現(xiàn)一個(gè)實(shí)用小插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
