架構總覽

擴充功能是 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 擴充功能使用了瀏覽器動作：

Google Mail Checker 擴充功能的螢幕截圖

這個 Mappy 擴充功能使用網頁動作和內容 腳本：

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 就會 會在封裝擴充功能時再次變更。如果擴充功能的程式碼必須使用絕對網址， 可以使用 chrome.runtime.getURL() 方法，避免在測試期間以硬式編碼方式寫入 ID 。

架構

擴充功能的架構取決於其功能，但許多可靠的擴充功能都會 包括多個元件：

背景指令碼

背景指令碼是擴充功能的事件處理常式；包含事件監聽器 以表示對擴充功能而言重要的瀏覽器事件。會一直處於休眠狀態，直到觸發事件為止 就會執行指示的邏輯只在需要時載入有效的背景指令碼， 在閒置時卸載。

UI 元素

擴充功能的使用者介面應簡單明瞭，UI 應自訂或 在不干擾使用者的情況下，提供更棒的瀏覽體驗。多數擴充功能都有瀏覽器 動作或網頁動作，但可以包含其他形式的使用者介面 例如內容選單、使用網址列，或 鍵盤快速鍵。

彈出式視窗等擴充功能 UI 網頁，可包含導入 JavaScript 的一般 HTML 網頁。 邏輯。擴充功能也可以呼叫 tabs.create 或 window.open() 來顯示 擴充功能中是否有額外的 HTML 檔案

如果是使用網頁動作和彈出式視窗的擴充功能，可以使用宣告式 content API，在背景指令碼中設定規則，決定彈出式視窗出現的時機 使用者可使用的資源條件符合時，背景指令碼會與彈出式視窗通訊 讓使用者可以點選該圖示

包含頁面動作的瀏覽器視窗，其中顯示彈出式視窗

內容指令碼

讀取或寫入網頁的擴充功能會使用內容指令碼。 內容指令碼包含的 JavaScript 會在載入至網頁的環境下執行 。內容指令碼會讀取及修改瀏覽器所造訪網頁的 DOM。

顯示網頁動作和內容指令碼的瀏覽器視窗

內容指令碼可以透過交換訊息的方式與上層擴充功能通訊 並使用 storage API 儲存值。

顯示內容指令碼與父項擴充功能之間的通訊路徑

選項頁面

如同擴充功能可讓使用者自訂 Chrome 瀏覽器一樣，選項頁面一樣 可讓您自訂擴充功能這些選項可用來啟用功能，並允許使用者 選擇切合需求的功能

使用 Chrome API

除了能夠使用與網頁相同的 API 之外，擴充功能也可以使用 擴充功能專用的 API，可與瀏覽器緊密整合。擴充功能和 網頁皆可透過標準 window.open() 方法開啟網址，但擴充功能可以 使用 Chrome API 指定網址要顯示的視窗 tabs.create 方法。

非同步與同步方法

大部分 Chrome API 方法都不是非同步的：這些 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 儲存的值，並經由 訊息傳遞。

儲存資料和無痕模式

擴充功能可以使用 storage API (HTML5 網站儲存空間) 儲存資料 API，或提出能儲存資料的伺服器要求。啟動後 需要儲存內容，請先考慮使用無痕式視窗。根據預設 不會在無痕式視窗中執行。

無痕模式會承諾視窗不會留下任何追蹤。處理來自以下來源的資料時 無痕式視窗，擴充功能應遵循這項承諾如果擴充功能在一般情況下會儲存瀏覽紀錄 時一律不儲存無痕式視窗的記錄。但擴充功能可以儲存設定 由任何視窗、無痕模式或無痕模式接收的偏好設定

如要偵測視窗是否處於無痕模式，請查看相關項目的 incognito 屬性 tabs.Tab 或 windows.Window 物件。

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

後續行動

閱讀總覽並完成入門指南教學課程後， 開發人員應該準備開始編寫自己的擴充功能！深入瞭解 使用下列資源自訂 Chrome 瀏覽器