側邊欄

側邊欄是瀏覽器視窗的側邊窗格,顯示在網頁旁邊。本文件介紹了側邊欄,包括如何指定、設計以及使用示例。

瀏覽器提供了一個使用者介面,允許使用者選擇要顯示的側邊欄。例如,Firefox 有“檢視”>“側邊欄”選單。每個瀏覽器視窗都可以顯示自己的側邊欄,該側邊欄在視窗中的所有標籤頁中都會顯示。

瀏覽器可能包含一些內建的側邊欄。例如,Firefox 包含一個用於與書籤互動的側邊欄。

Annotator sidebar with a box allowing the user to take notes about the page.

透過使用 `sidebar_action` manifest.json 鍵,擴充套件程式可以將其自己的側邊欄新增到瀏覽器中。它將與內建側邊欄一起列出,使用者將能夠使用與內建側邊欄相同的機制開啟它。

與瀏覽器操作彈出視窗一樣,側邊欄的內容指定為一個 HTML 文件。當用戶開啟側邊欄時,側邊欄文件將被載入到所有開啟的瀏覽器視窗中。每個視窗都有自己的文件例項。當開啟新視窗時,它們也會獲得自己的側邊欄文件。

可以使用 sidebarAction.setPanel() 函式為特定標籤頁設定文件。側邊欄可以使用 windows.getCurrent() API 來確定它屬於哪個視窗。

js
// sidebar.js
browser.windows.getCurrent({ populate: true }).then((windowInfo) => {
  myWindowId = windowInfo.id;
});

這在側邊欄希望為不同視窗顯示不同內容時很有用。有關示例,請參閱 “annotate-page”示例

側邊欄文件可以訪問與擴充套件的後臺指令碼和彈出指令碼相同的特權 JavaScript API 集合。它們可以透過 runtime.getBackgroundPage() 直接訪問後臺頁面(除非側邊欄屬於隱身模式視窗),並且可以使用訊息傳遞 API(如 tabs.sendMessage()runtime.sendNativeMessage())與內容指令碼或本機應用程式進行互動。

當瀏覽器視窗關閉或使用者關閉側邊欄時,側邊欄文件將被解除安裝。這意味著與後臺頁面不同,側邊欄文件不會一直載入,但與瀏覽器操作彈出視窗不同,當用戶與網頁互動時,它們會保持載入狀態。

當首次安裝定義側邊欄的擴充套件時,其側邊欄將自動開啟。這是為了幫助使用者瞭解該擴充套件包含側邊欄。

指定側邊欄

要指定側邊欄,請使用 `sidebar_action` manifest.json 鍵定義預設文件,以及預設標題和圖示。

json
"sidebar_action": {
  "default_title": "My sidebar",
  "default_panel": "sidebar.html",
  "default_icon": "sidebar_icon.png"
}

標題、面板和圖示可以使用 sidebarAction API 以程式設計方式更改。

標題和圖示會顯示給使用者,用於瀏覽器提供的任何列出側邊欄的 UI,例如 Firefox 中的“檢視 > 側邊欄”選單。

有關如何設計側邊欄網頁以匹配 Firefox 風格的詳細資訊,請參閱 Acorn 設計系統文件。

示例

GitHub 上的 webextensions-examples 儲存庫包含實現側邊欄的 annotate-page 示例。