如何編寫 Chrome 擴展程序：帶有示例代碼的分步指南

已發表: 2022-04-10

瀏覽器擴展是一種很好的方式來充分利用您的編碼技能並構建一些允許您只需單擊幾下即可完成重複性任務的東西。如果您想實現這一目標，學習如何編寫 Chrome 擴展程序是一個很好的開始。

Google Chrome 為其擴展程序開發人員提供了許多不同的 API，例如添加新頁面、彈出窗口、創建通知、設置默認搜索引擎，甚至創建上下文菜單項（右鍵單擊時顯示的菜單在頁面上）。

從呈現“Hello World！”的擴展中，可能性是無限的。到允許您截取網頁屏幕截圖的擴展程序。

如何編寫 Chrome 擴展程序：結構

在我們繼續之前，您應該查看 Google Chrome 的開發人員文檔以了解一般的 Chrome 擴展程序開發。

此外，如果您想為 Chrome Web Store 編寫 Chrome 擴展程序，請查看他們的單一用途政策。

讓我們首先在您的設備上創建一個名為notify的新文件夾。此文件夾將包含將成為您的擴展的一部分的所有內容。

現在，您需要創建一個清單文件，其中將包含有關我們擴展的所有信息。創建一個名為manifest.json的文件並包含以下代碼：

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 代碼語言： JSON / JSON with Comments ( json )

如您所見，到目前為止，它僅包含有關您的擴展的元信息，例如其名稱、描述和版本。 manifest_version告訴 Chrome 您正在使用哪個版本的擴展 API。

加載擴展

準備好清單文件後，您可以在 Chrome 瀏覽器中加載擴展程序：

通過導航到chrome://extensions打開擴展管理頁面，或者您也可以從設置中的擴展菜單打開它。

在那裡，啟用開發人員模式並使用Load unpacked按鈕選擇您的擴展目錄。

看你的延伸！現在您的擴展程序已加載，您可以逐步改進它並觀察更改。

確保將擴展圖標添加到assets/icons/文件夾，否則將出現默認圖標。

添加彈出用戶界面

讓我們繼續向擴展中添加一些用戶界面，人們可以在其中與提供的選項進行交互。

有多種方法可以做到這一點，例如添加整個頁面，但彈出窗口通常是大多數擴展的方式。

要向擴展添加彈出窗口，您必須將其添加到您的manifest.json文件中：

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 代碼語言： JavaScript （ javascript ）

有了這個，你告訴擴展你的彈出的 HTML 文件的位置和默認圖標。這只是默認圖標，因為 API 允許您隨時更改圖標。例如，如果您創建一個 Google PageSpeed 測試，可以根據網頁排名在網站上顯示不同的圖標。

Google Chrome 擴展程序的彈出窗口

現在，您可以將彈出窗口的 HTML 代碼添加到文件中，就像我們在示例中所做的那樣：

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 代碼語言： HTML、XML （ xml ）

此 HTML 文件還鏈接到樣式表和腳本，以向我們的彈出窗口添加樣式和功能。

如果您跟隨，您可以從這裡獲取 CSS 代碼。我們將在本教程後面將 JavaScript 添加到文件中。

到目前為止，您已經創建了一個帶有彈出窗口的 Google Chrome 擴展程序，並且只用了幾行代碼。正如我們在開始時所說，創建 Google Chrome 擴展非常簡單！

在本教程中繼續前進，我們將向此擴展添加功能，並使其不僅僅是一個佔位符。

使用通知 API

正如擴展名所暗示的那樣，它是一個通知擴展，所以讓我們添加一些！

在使用某些 API 之前，您需要在manifest.json文件中為它們指定權限。這樣做的原因之一是讓您的擴展用戶在安裝它們之前知道您的擴展要求哪些權限。

對於通知，您可以這樣做：

 "permissions" : [ "notifications" ],
 代碼語言： JavaScript （ javascript ）

您還需要將服務工作者添加到擴展程序以發送通知。為此，您需要將其添加到清單中：

 "background" : { "service_worker" : "background.js" },
 代碼語言： JavaScript （ javascript ）

您需要通知 API 的服務工作者，因為它不能直接從popup.js文件中使用。

在background.js文件中，您需要添加以下代碼來發送通知：

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 代碼語言： JavaScript （ javascript ）

在這裡，我們使用onMessage事件偵聽器來獲取從彈出窗口推送通知的觸發器。

我們還使用create方法來創建新的通知。通知可以有多種類型，但這裡使用“基本”類型。您應該查看所有可用的選項。

現在create方法已經到位，您可以從popup.js文件中觸發它，如下所示：

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 代碼語言： JavaScript （ javascript ）

在這裡， sendMessage操作用於觸發通知。瞧！我們有一個觸發通知的擴展。

確保您使用的是最新版本的 Google Chrome，並已授予其觸發通知的權限。簡而言之，不要像我一樣花費數小時試圖弄清楚為什麼沒有出現通知。

添加上下文菜單項

如介紹中所述，上下文菜單是右鍵單擊時出現的菜單：

您的擴展程序可能有上下文菜單項可能有很多原因。一個突出的例子是用光標選擇一些文本，然後在谷歌上搜索。

您可以根據需要向上下文菜單添加任意數量的項目，但如果您的擴展程序添加了多個項目，它們將折疊在一個父項目下。

為此，您還需要向清單文件添加權限：

 "permissions" : [ "contextMenus" , "notifications" ],
 代碼語言： JavaScript （ javascript ）

現在您已經添加了contextMenus的權限，您可以將其添加到您的background.js文件中：

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 代碼語言： JavaScript （ javascript ）

上面的代碼還包括上一步中用於觸發通知的代碼，該通知現在被抽像到notify函數中，以便可以重用。

contextMenus.create操作用於將項目添加到上下文菜單。它與onInstalled掛鉤，因為它只需要初始化一次。

之後，與上一步類似，我們使用contextMenus.onClicked來捕獲點擊並觸發通知。

它可以是一個非常漂亮的方式來捆綁你的擴展的功能。如果您環顧瀏覽器上正在使用的擴展程序，您會發現許多擴展程序巧妙地利用此空間來增強其擴展程序的體驗。

使用 storage API 存儲數據

現在您的擴展程序有一些功能可以展示，讓我們看一下存儲 API。當您想將一些用戶數據存儲到您的擴展程序時，存儲 API 很有用。

Storage API 有兩種類型：本地和同步。顧名思義，本地存儲保存在您的瀏覽器中並保持在本地。相比之下，同步存儲允許使用同一 Google 帳戶在瀏覽器之間同步數據。出於我們的目的，我們使用本地存儲。

首先，您需要在清單文件中添加存儲權限：

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 代碼語言： JavaScript （ javascript ）

在此之後，您可以使用 storage、 storage.local.get和storage.local.set方法來檢索或保存數據。

您可以將以下代碼添加到您的popup.js文件中：

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 代碼語言： JavaScript （ javascript ）

這段代碼做了兩件事：

當我們打開彈出窗口或存儲值更改時，它會更新彈出窗口中的通知計數。為了監聽存儲變化，使用storage.onChanged 。
在某種程度上，當用戶單擊重置按鈕時，我們會清除存儲空間。

上面的代碼完成了獲取最新計數並更新它的工作。現在設置數據仍然存在。為此，您可以使用以下命令更新我們的notify功能：

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 代碼語言： JavaScript （ javascript ）

在這裡，我們獲取最新的存儲數據，然後用最新的計數更新它。

同樣，您可以使用chrome.storage.sync API 在瀏覽器之間同步選項。

分發擴展

恭喜！你已經做到了！您已成功創建了一個 Google Chrome 擴展程序，該擴展程序使用了 Google Chrome 體驗的許多不同部分，包括：

彈出窗口
通知 API
上下文菜單
存儲 API

如果您想查看此擴展的代碼，可以在此 Notify GitHub 存儲庫中獲取。

我們都喜歡炫耀我們為世界所做的偉大工作。擴展完成後，您可以將其提交到 Chrome 網上應用店以供其他 Chrome 用戶下載。

如果您想探索 Google Chrome 為擴展開發者提供的其他選項，我們建議您查看官方文檔。

我希望這篇文章在教你如何編寫 Chrome 擴展方面發揮了作用。 我們很高興看到您可以創建什麼，因此請在下面的評論部分中告訴我們您使用 Google Chrome 擴展程序開發的冒險經歷。

您也可能對。。。有興趣：

18 家適用於 Web 開發、設計、營銷等的最佳 WordPress 代理商
目前市場上 15 款最佳網站設計軟件
比較和測試的 9 個最佳網站構建器解決方案

如何創建 Google #Chrome #extension：初學者分步指南

點擊推文

…

不要忘記加入我們關於加快 WordPress 網站速度的速成課程。通過一些簡單的修復，您甚至可以將加載時間減少 50-80%：

Chris Fitzgerald 和 Karol K. 的佈局和演示。