使用者介面元件

這是擴充功能中可用的使用者介面元素目錄。每個項目都包含:

  • 元素圖片 (如適用)。
  • 說明用途。
  • 相關介面元素 (如適用)。
  • 導入操作說明和程式碼範例的連結。

這些元素是叫用擴充功能的不同方式。您不必全部採用。事實上,部分用途可能完全不需要這些資訊。舉例來說,連結縮短器可以使用鍵盤快速鍵處理顯示的網址,並以程式輔助方式將縮短的連結放入剪貼簿。

動作

使用者點選擴充功能的動作圖示時,即為執行動作。動作可以使用 Action API 叫用擴充功能,也可以開啟快顯視窗,讓使用者叫用多項擴充功能。使用工具提示向使用者說明動作的用途。

已釘選和未釘選的擴充功能。
圖 1:已釘選 (左) 和未釘選 (右) 的擴充功能。

如要瞭解如何建構動作,請參閱「實作動作」或查看動作範例

動作圖示

擴充功能至少需要一個代表圖示。使用者點選圖示即可叫用動作,無論該動作是使用 Action API 叫用擴充功能,還是開啟快顯視窗

Google 字典擴充功能的圖示。
圖 2:Google 字典擴充功能的圖示 (紅色)。

您也可以在圖示中加入標籤 (在此稱為「徽章」),傳達擴充功能狀態或使用者必須執行的動作等資訊。

如要瞭解如何建構動作,請參閱「實作動作」或查看動作範例

徽章

徽章是格式化文字片段,會顯示在動作圖示上方,用來表示擴充功能狀態或使用者必須執行的動作。您可以呼叫 chrome.action.setBadgeText() 設定徽章文字,並呼叫 chrome.action.setBadgeBackgroundColor() 設定橫幅顏色。

沒有徽章和有徽章的擴充功能圖示。
圖 3:沒有徽章的擴充功能圖示 (左) 和有徽章的擴充功能圖示 (右)。

如要瞭解如何建構動作,請參閱「實作動作」或「喝水」範例。

指令

指令是可叫用擴充功能特性的按鍵組合。在 manifest.json 檔案中定義按鍵組合,並使用 Commands API 回應。如要瞭解如何實作指令,請參閱 API 參考資料chrome.commands範例。

內容選單

滑鼠的替代點擊 (通常稱為按右鍵) 會顯示內容選單。使用 Context Menus API 定義內容選單。

巢狀內容選單。
圖 4:內容選單和巢狀子選單。

如要瞭解如何實作內容選單,請參閱內容選單範例。

網址列

你可以使用 Chrome 多功能方塊與使用者互動。使用者在多功能方塊中輸入擴充功能定義的關鍵字時,擴充功能會控管使用者在多功能方塊中看到的內容。在 manifest.json 中定義關鍵字,並使用 Omnibox API 回應。

瀏覽器的多功能方塊。
圖 5:瀏覽器的多功能方塊。

如要瞭解如何覆寫網址列,請參閱「從網址列觸發動作」或「快速 API 參考資料」範例。

覆寫頁面

擴充功能可以覆寫下列其中一個 Chrome 內建頁面:

  • 記錄
  • 新分頁
  • 書籤
自訂記錄頁面範例。
圖 6:自訂記錄頁面範例。

如要瞭解如何覆寫 Chrome 網頁,請參閱「覆寫 Chrome 網頁」或「覆寫」範例。

彈出式視窗

彈出式視窗是一種動作,會顯示視窗,讓使用者叫用多項擴充功能。使用者點選動作圖示、使用鍵盤快速鍵或呼叫 chrome.action.openPopup() 時,即可開啟彈出式視窗。

彈出式視窗示例。
圖 7:彈出式視窗範例。

如要瞭解如何建構彈出式視窗,請參閱「新增彈出式視窗」。您也可以透過動作範例下載步驟。

側邊面板

使用者可以透過側邊面板,在網頁旁叫用擴充功能 (請參閱圖片)。側邊面板可以附加至單一分頁或整個視窗。側邊面板是使用 Side Panel API 控制。

定義字詞的字典擴充功能
圖 8:字典擴充功能定義「擴充功能」一詞。

如要瞭解如何建構側邊面板,請參閱側邊面板用途,或查看側邊面板範例。

工具提示

當使用者將滑鼠游標懸停在動作圖示上時,工具提示會顯示擴充功能的動作。根據預設,工具提示會顯示擴充功能的名稱。

動作圖示的工具提示範例。
圖 9:動作圖示的工具提示範例。

如要瞭解如何新增工具提示,請使用資訊清單檔案 "action" 鍵的 "default_title" 成員。

開發人員工具

您可以使用 DevTools Panels API,將自訂面板 (開發人員工具中的分頁標籤) 新增至開發人員工具。其他開發人員工具 API 可讓您監控視窗網路流量。您也可以自訂開發人員工具的記錄器面板。Chrome 開發人員工具的 Lighthouse 面板,最初就是開發人員工具擴充功能。

通知

使用擴充功能的 Notifications API 或網頁平台的 Notifications API,將訊息發布至使用者的系統匣。

Mac 上的擴充功能通知。
圖 10:Mac 上的擴充功能通知。

如要瞭解如何使用通知,請參閱「通知使用者」。

主題

主題是一種特殊擴充功能,可變更瀏覽器的外觀。主題的封裝方式與一般擴充功能相同,但不含 JavaScript 或 HTML 程式碼。

圖 11:主題範例。

如要瞭解如何建立主題,請參閱「什麼是主題?」。

與使用者互動的其他方式

本節說明擴充功能與使用者互動的其他方式。雖然基本擴充功能不一定需要這些檔案,但它們可能是擴充功能的重要部分。對許多使用者來說,這些功能是使用擴充功能時不可或缺的要素。

無障礙設定

對許多使用者來說,無障礙功能就是使用者介面,而這些功能通常對不需要無障礙功能的使用者也很有幫助,可做為與擴充功能互動的主要方式。瞭解如何讓擴充功能更容易存取

國際化

用使用者專屬的方式和他們溝通。瞭解如何將介面國際化