使用者介面元件

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

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

這些元素是叫用擴充功能功能的不同方式。您不需要逐一導入。事實上,有些用途並不是使用這類參數。舉例來說,較短的連結可以透過鍵盤快速鍵對顯示的網址執行操作,並以程式輔助方式將縮短的連結放到剪貼簿中。

動作

動作是指使用者點選擴充功能的動作圖示後會發生的情況。動作可以使用 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 網頁」或覆寫範例。

彈出式視窗

彈出式視窗是一種動作,可顯示視窗,讓使用者叫用多項擴充功能功能。使用者必須按一下動作圖示,才能開啟彈出式視窗。擴充功能無法以程式輔助方式開啟彈出式視窗。

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

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

側邊面板

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

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

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

工具提示

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

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

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

DevTools

您可以使用 DevTools Panels API 為開發人員工具新增自訂面板 (開發人員工具在開發人員工具中的分頁)。其他開發人員工具 API 可讓您監控視窗網路流量。此外,您也可以自訂開發人員工具的錄音工具面板。Chrome 開發人員工具本身的 Lighthouse 面板是以開發人員工具擴充功能的形式啟動。

通知

使用擴充功能 Notifications API 或網路平台 Notifications API,將訊息張貼至使用者的系統匣。

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

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

主題

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

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

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

與使用者互動的其他方式

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

無障礙功能

對於許多使用者來說,無障礙工具本質上就是使用者介面,而其相關功能通常對於不需要無障礙功能做為主要互動方式的使用者也很有用。瞭解開放擴充功能的基本概念。

國際化

以使用者慣用的語言與他們溝通。瞭解如何國際化介面