files/zh-tw/mozilla/add-ons/webextensions/user_interface/sidebars/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

---
title: 側邊欄
slug: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars
tags:
  - 擴充套件
translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Sidebars
---
<div>{{AddonSidebar}}</div>

<div>
<p>側邊欄是一個顯示在瀏覽器視窗上、網頁旁邊的面板。瀏覽器提供能讓用戶看見目前可用的側邊欄並且擇一顯示的UI。例如，Firefox 有一個 "檢視 &gt; 側邊欄" 的選單。一次只能有一個側邊欄顯示，而那個側邊欄會顯示在所有的頁籤以及瀏覽器視窗。</p>

<p>瀏覽器可能包含了一些內建的側邊欄。例如，Firefox 包含了一個可以跟書籤互動的側邊欄：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="display: block; height: 423px; margin-left: auto; margin-right: auto; width: 350px;">在 manifest.json 裡用 <code>sidebar_action</code> 鍵可以替瀏覽器添加側邊欄。它會被列在內建的側邊欄旁邊，而用戶可以透過與內建側邊欄一模一樣的機制來打開它。</p>

<p>就像工具列按鈕一樣，你藉由HTML文件指定側邊欄的內容。當用戶打開側邊欄，側邊欄的文件會被讀取到每個開著的瀏覽器視窗。每個視窗都各自獲取文件的實例，當新的視窗被開啓，他們也會獲取自己的側邊欄實例。</p>

<p>你可以用{{WebExtAPIRef("sidebarAction.setPanel()")}}函數設置某個頁籤專屬的文件。側邊欄會透過{{WebExtAPIRef("windows.getCurrent()")}} API找出它隸屬的視窗 :</p>

<pre class="brush: js">// sidebar.js
browser.windows.getCurrent({populate: true}).then((windowInfo) =&gt; {
  myWindowId = windowInfo.id;
});</pre>

<p>如果側邊欄要在不同的視窗顯示不同內容這會很有用。範例請看 <a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">"annotate-page" 範例</a>。</p>

<p>側邊欄文件與後端腳本以及彈出視窗享有一樣的權限。他們可以透過{{WebExtAPIRef("runtime.getBackgroundPage()")}}直接讀取後端頁面（只要側邊欄隸屬於隱私模式的視窗），並且可以透過一些 messaging APIs 與內容腳本或原生應用互動，像是{{WebExtAPIRef("tabs.sendMessage()")}}與{{WebExtAPIRef("runtime.sendNativeMessage()")}}。</p>

<p>側邊欄文件會在瀏覽器視窗關閉或用戶關閉側邊欄時被卸載。這代表不像後端腳本，側邊欄文件並不總是保持讀入的狀態。但是不像工具列按鈕，他們可以在用戶與網頁互動時保持讀入。</p>

<p>當定義著側邊欄的套件被首次安裝時，側邊欄2會自動開啓。這是爲了幫助用戶瞭解這個套件包含了一個側邊欄。註：套件無法程式化地開啓側邊欄，側邊欄只能由用戶開啓。</p>

<h2 id="指定側邊欄">指定側邊欄</h2>

<p>要指定側邊欄，在 manifest.json 裡透過 <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/sidebar_action">sidebar_action</a></code> 鍵定義文件、標題以及圖示：</p>

<pre class="brush: json">"sidebar_action": {
  "default_title": "My sidebar",
  "default_panel": "sidebar.html",
  "default_icon": "sidebar_icon.png"
}</pre>

<p>你可以透過{{WebExtAPIRef("sidebarAction")}} API程式化地更改標題、面板以及圖示。</p>

<p>標題與圖示會在任一個瀏覽器提供的UI中顯示，像是 Firefox 裡的 "檢視 &gt; 側邊欄" 選單。</p>

<h2 id="側邊欄設計">側邊欄設計</h2>

<p>更多如何設計符合 Firefox 風格的側邊欄網頁細節，請查看文件<a class="grey-90 no-underline hover-no-underline" href="https://design.firefox.com/photon/index.html">光子設計系統</a>。</p>

<h2 id="範例">範例</h2>

<p>GitHub上的 <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> 程式庫包含了建立側邊欄的 <a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a> 範例。</p>
</div>