1 files changed, 55 insertions, 0 deletions
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/sidebars/index.html b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/sidebars/index.html
new file mode 100644
index 0000000000..923cd9d14f
--- /dev/null
+++ b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/sidebars/index.html
@@ -0,0 +1,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>