擴充功能是 HTML、CSS、JavaScript、圖片和其他網路平台使用的壓縮套件，可自訂 Google Chrome 瀏覽體驗。擴充功能是以網路技術建立，可使用瀏覽器提供給開放網路的 API。
擴充功能可提供各式各樣的功能。可以修改使用者所查看的網頁內容，以及與瀏覽器互動，或是擴充及變更瀏覽器本身的行為。
考慮擴充功能閘道，讓 Chrome 瀏覽器擁有最個人化的瀏覽器。
擴充功能檔案
擴充功能會因檔案類型和目錄數量而異，但全都必須具備 [manifest][docs-manifest]：有些是基本但實用的擴充功能，可能只是資訊清單及其工具列圖示。
資訊清單檔案 (標題為 manifest.json) 會向瀏覽器提供擴充功能的相關資訊，例如最重要的檔案和擴充功能可能使用的功能。
{
"name": "My Extension",
"version": "2.1",
"description": "Gets information from Google.",
"icons": {
"128": "icon_16.png",
"128": "icon_32.png",
"128": "icon_48.png",
"128": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background_script.js"]
},
"permissions": ["https://*.google.com/", "activeTab"],
"browser_action": {
"default_icon": "icon_16.png",
"default_popup": "popup.html"
}
}
擴充功能必須提供位於瀏覽器工具列中的圖示。工具列圖示可讓使用者輕鬆存取，並隨時掌握已安裝哪些擴充功能。多數使用者只要按一下圖示，即可與使用彈出式視窗的擴充功能互動。
這個 Google Mail Checker 擴充功能會使用瀏覽器動作：
這個 Mappy 擴充功能使用網頁動作和內容指令碼：
參照檔案
擴充功能的檔案可使用相對網址參照，就像一般 HTML 頁面中的檔案一樣。
<img src="images/my_image.png">
此外，每個檔案也可以透過絕對網址存取。
chrome-extension://EXTENSION_ID/PATH_TO_FILE
EXTENSION_ID 是絕對網址中，擴充功能系統為每個擴充功能產生的專屬 ID。如要查看所有已載入擴充功能的 ID，可前往 chrome://extensions 網址查看。PATH_TO_FILE 是檔案在擴充功能頂層資料夾下的位置，與相對網址相符。
處理未封裝的擴充功能時，擴充功能 ID 可能會變更。具體來說，如果擴充功能是從其他目錄載入，未封裝的擴充功能 ID 將會改變；封裝擴充功能後，ID 會再次變更。如果擴充功能的程式碼依賴絕對網址，便可使用 chrome.runtime.getURL() 方法，避免在開發期間以硬式編碼的方式編寫 ID。
架構
擴充功能的架構取決於其功能，但許多可靠的擴充功能都含有多個元件：
背景指令碼
背景指令碼是擴充功能的事件處理常式，其中包含擴充功能的重要瀏覽器事件事件監聽器。系統會暫停直到事件觸發，然後執行指示邏輯為止。有效的背景指令碼只會在需要時載入，並在閒置時卸載。
UI 元素
擴充功能的使用者介面應盡可能簡潔扼要。UI 應在不影響使用者體驗的情況下，自訂或改善瀏覽體驗。大多數擴充功能都具備瀏覽器動作或網頁動作，但可以包含其他形式的 UI，例如內容選單、使用網址列，或建立鍵盤快速鍵。
擴充功能 UI 頁面 (例如彈出式視窗) 可包含含有 JavaScript 邏輯的一般 HTML 網頁。擴充功能也可以呼叫 tabs.create 或 window.open() 顯示擴充功能中的其他 HTML 檔案。
採用頁面動作與彈出式視窗的擴充功能可以使用宣告式內容 API，在可向使用者顯示彈出式視窗時，在背景指令碼中設定規則。符合條件時，背景指令碼會與彈出式視窗通訊，讓使用者可以點選圖示。
內容指令碼
讀取或寫入網頁的擴充功能會使用內容指令碼。內容指令碼包含的 JavaScript，會在瀏覽器載入網頁的網頁內容中執行。內容指令碼讀取及修改瀏覽器造訪網頁的 DOM。
內容指令碼可使用 storage API 交換訊息及儲存值，藉此與父項擴充功能進行通訊。
選項頁面
就像擴充功能可讓使用者自訂 Chrome 瀏覽器，選項頁面也能讓您自訂擴充功能。這些選項可用來啟用功能，並讓使用者選擇與自身需求相關的功能。
使用 Chrome API
除了存取與網頁相同的 API 以外，擴充功能也可以使用擴充功能專屬的 API，與瀏覽器緊密整合。擴充功能和網頁都可以存取標準 window.open() 方法開啟網址，但擴充功能可以改用 Chrome API tabs.create 方法，指定要顯示哪個視窗網址。
非同步與同步方法
大部分的 Chrome API 方法都是非同步的：這些方法會立即傳回，無需等待作業完成。如果擴充功能需要知道非同步作業的結果，可以將回呼函式傳遞至該方法。系統會在方法傳回後執行回呼，但可能會在之後執行。
如果擴充功能需要將使用者目前所選取分頁導覽至新網址，則必須取得目前分頁 ID，然後將該分頁的網址更新為新網址。
如果 tabs.query 方法執行同步，看起來會像這樣。
//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();
此方法會失敗，因為 query() 為非同步。這個方法不會等待工作完成才會傳回，也不會傳回值。如果回呼參數在簽名中提供回呼參數，則該方法為非同步。
// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)
如要正確查詢分頁並更新其網址，擴充功能必須使用回呼參數。
//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();
在上述程式碼中，程式碼會按下列順序執行：1、4、2。系統會呼叫指定 query() 的回呼函式，然後執行第 2 行程式碼，但只有在目前所選分頁的相關資訊後才可使用。query() 傳回後有時會發生這個問題。雖然 update() 為非同步，但程式碼不會使用回呼參數，因為擴充功能不會對更新結果執行任何動作。
// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()
這個方法會同步傳回網址做為 string，且不會執行其他非同步作業。
更多詳細資料
詳情請參閱 Chrome API 參考文件，並觀看下列影片。
網頁之間的通訊
擴充功能中的不同元件往往需要相互通訊。不同的 HTML 網頁可透過 chrome.extension 方法 (例如 getViews() 和 getBackgroundPage()) 找到彼此。頁面參照其他擴充功能頁面後，第一個頁面可以叫用其他頁面上的函式並操控其 DOM。此外，擴充功能的所有元件都可以存取使用 storage API 儲存的值，並透過訊息傳遞通訊。
儲存資料與無痕模式
擴充功能可透過儲存空間 API、HTML5 Web Storage API，或是發出用於儲存資料的伺服器要求，藉此儲存資料。當擴充功能需要儲存內容時，首先請考量其是否來自無痕式視窗。根據預設，擴充功能不會在無痕式視窗中執行。
無痕模式會保證視窗不會留下任何軌跡。處理無痕式視窗中的資料時，擴充功能應遵循這個承諾。如果擴充功能通常會儲存瀏覽記錄，則不要儲存無痕式視窗的記錄。不過，擴充功能可以從任何視窗 (無論是否為無痕模式) 儲存偏好設定。
如要偵測視窗是否處於無痕模式，請查看相關 tabs.Tab 或 windows.Window 物件的 incognito 屬性。
function saveTabData(tab) {
if (tab.incognito) {
return;
} else {
chrome.storage.local.set({data: tab.url});
}
}
後續行動
閱讀總覽並完成「開始使用」教學課程後，開發人員應該可以開始自行編寫擴充功能了！歡迎運用下列資源深入探索自訂 Chrome 的世界
- 如要瞭解對擴充功能進行偵錯的選項，請參閱偵錯教學課程。
- Chrome 擴充功能可存取強大的 API，而且不侷限於開放網路可用的 API。chrome.* API 說明文件會逐一介紹各項 API。
- 擴充功能開發總覽提供數十個其他說明文件連結，方便您查看進階擴充功能建立功能的相關說明文件。