使用者介面元件

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

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

這些元素是叫用擴充功能功能的不同方式。您不必全部導入。事實上,某些用途可能不會使用任何一個。舉例來說,較短的連結可透過鍵盤快速鍵對顯示的網址執行動作,並以程式輔助方式將縮短的連結放到剪貼簿中。

動作

使用者點選擴充功能的動作圖示時,系統會執行動作。一種動作可以使用 Action API 叫用擴充功能功能,也可以開啟彈出式視窗,讓使用者叫用多項擴充功能功能。請使用工具提示說明動作。

一個已固定的擴充功能和未固定的擴充功能。
圖 1:已固定 (左側) 和未固定 (右側) 的擴充功能。

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

動作圖示

擴充功能至少需要一個圖示才能代表。使用者點選圖示即可叫用動作,無論該動作是使用Action API 叫用擴充功能功能或開啟彈出式視窗,皆是如此。

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

此外,您可以為圖示加上「標記」標籤,以傳達擴充功能狀態等事項或使用者必須執行的操作。

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

徽章

標記是放置在動作圖示頂端的格式化文字,用於表示擴充功能狀態等項目或使用者必須執行的操作。您可以呼叫 chrome.action.setBadgeText()chrome.action.setBadgeBackgroundColor() 設定徽章文字與橫幅顏色。

沒有徽章和有徽章的擴充功能圖示。
圖 3:沒有標記的擴充功能圖示 (左側),且有徽章 (右側)。

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

指令

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

內容選單

當您以滑鼠點選 (通常稱為滑鼠右鍵) 時,系統會顯示內容選單。使用內容選單 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" 成員。

開發人員工具

您可以使用開發人員工具面板 API 在開發人員工具中新增自訂面板 (開發人員工具中呼叫的分頁)。其他開發人員工具 API 可讓您監控視窗網路流量。您也可以自訂開發人員工具的錄製器面板。Chrome 開發人員工具應用程式開啟了 Lighthouse 面板做為開發人員工具擴充功能。

通知

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

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

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

主題

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

範例主題。
圖 11:範例主題。

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

其他互動方式

本節將說明擴充功能可與使用者互動的其他方式。雖然基本擴充功能並非必要,但卻是擴充功能的重要部分。對於許多使用者而言,其中部分功能是使用擴充功能不可或缺的。

無障礙設定

對許多使用者來說,無障礙設計就是使用者介面,因此功能通常十分適合不需要存取性擴充功能的使用者使用。瞭解基本概念 讓擴充功能更易於存取

國際化

以慣用語言與使用者溝通。瞭解如何將介面拓展至國際