1 files changed, 94 insertions, 0 deletions
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/user_interface/index.html b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/index.html
new file mode 100644
index 0000000000..5c8e40bcdd
--- /dev/null
+++ b/files/zh-tw/mozilla/add-ons/webextensions/user_interface/index.html
@@ -0,0 +1,94 @@
+---
+title: 用戶介面
+slug: Mozilla/Add-ons/WebExtensions/user_interface
+tags:
+  - 擴充套件
+  - 用戶介面
+translation_of: Mozilla/Add-ons/WebExtensions/user_interface
+---
+<div>{{AddonSidebar}}</div>
+
+<p>套件APIs 提供了幾種介面來完成對用戶的功能。下方是那些介面的概述，每種用戶介面都有更詳細的資訊可以查閱。</p>
+
+<div class="note">
+<p>爲了使用這些UI元件在套件裡提供優秀的用戶體驗，建議閱讀<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_experience_best_practices">用戶體驗最佳實踐</a>文章。</p>
+</div>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">
+    <p>可用介面</p>
+   </th>
+   <th scope="col">敘述</th>
+   <th scope="col" style="width: 350px;">範例</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Browser_action">工具列按鈕</a></td>
+   <td>一個瀏覽器工具列上的按鈕，被點擊時會送出事件給套件。預設的情況下在所有頁籤都能看到此按鈕。</td>
+   <td><img alt="Example showing a toolbar button (browser action)." src="https://mdn.mozillademos.org/files/15751/browser-action.png" style="height: 364px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>附帶<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">彈出視窗</a>的工具列按鈕</td>
+   <td>一個按鈕上的彈出視窗，當按鈕被點擊時展開。彈出視窗被一個HTML文件來定義。</td>
+   <td><img alt="Example of the pop-up on a toolbar button" src="https://mdn.mozillademos.org/files/15753/popup-shadow.png" style="height: 624px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Page_actions">網址列按鈕</a></td>
+   <td>一個網址列上的按鈕，點擊時傳送事件給套件。預設的情況下，在所有的頁籤中此按鈕都會被隱藏。</td>
+   <td><img alt="Example showing an address bar button (page action) " src="https://mdn.mozillademos.org/files/15745/address_bar_button.png" style="height: 348px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td>附帶<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups">彈出視窗</a>的網址列按鈕</td>
+   <td>網址列按鈕上的一個按鈕，當按鈕被點擊時展開，彈出視窗被一個HTML文件來定義。</td>
+   <td><img alt="Example of a popup on the address bar button" src="https://mdn.mozillademos.org/files/15747/page_action_popup.png" style="height: 524px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items">快捷選單</a></td>
+   <td>在一個或多個瀏覽器快捷選單中的選單項目、核取方塊、選項按鈕。另外，選單可以透過增加分隔線來組成。當選單項目被點擊時傳送一個事件給套件。</td>
+   <td><img alt="Example of content menu items added by a WebExtension, from the context-menu-demo example" src="https://mdn.mozillademos.org/files/15756/context_menu_example.png" style="height: 942px; width: 864px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars">側邊欄</a></td>
+   <td>
+    <p dir="ltr">一個顯示在網頁旁邊的HTML文件，每頁可以顯示獨立的內容。側邊欄會在用戶安裝套件時打開，然後根據用戶對側邊欄的可視選項開關。側邊欄裡的用戶互動由它的HTML文件來控制。</p>
+   </td>
+   <td><img alt="Example of a sidebar" src="https://mdn.mozillademos.org/files/15755/bookmarks-sidebar.png" style="height: 846px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages">選項頁面</a></td>
+   <td>一個使你可以定義用戶能修改的偏好設定的頁面。用戶可以透過瀏覽器的套件管理畫面進到這裡。</td>
+   <td><img alt="Example showing the options page content added in the favorite colors example." src="https://mdn.mozillademos.org/files/15748/options_page.png"></td>
+  </tr>
+  <tr>
+   <td><a href="/Add-ons/WebExtensions/user_interface/Extension_pages">套件頁面</a></td>
+   <td>透過套件裡的網頁來在視窗或頁籤內提供表單、幫助訊息或任何需要的內容。</td>
+   <td><img alt="Example of a simple bundled page displayed as a detached panel." src="https://mdn.mozillademos.org/files/15752/bundled_page_as_panel_small.png" style="height: 432px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Notifications">通知</a></td>
+   <td>透過作業系統的機制顯示的短暫的通知。當用戶點擊通知或通知關閉時（不論自動關閉或用戶手動關閉）時傳送事件給套件。</td>
+   <td><img alt="Example of an extension triggered system notification" src="https://mdn.mozillademos.org/files/15754/notify-shadowed.png" style="height: 294px; width: 780px;"></td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Omnibox">網址列建議</a></td>
+   <td>當用戶輸入關鍵字時提供自訂的網址列建議。</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15749/omnibox_example_small.png" style="height: 464px; width: 700px;"></td>
+  </tr>
+  <tr>
+   <td><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/devtools_panels">開發者工具面板</a></td>
+   <td>一個包含相關HTML文件的頁籤顯示在瀏覽器的開發者工具裡。</td>
+   <td><img alt="Example showing the result of the firefox_code_search WebExtension's customization of the address bar suggestions." src="https://mdn.mozillademos.org/files/15746/developer_panel_tab.png" style="height: 224px; width: 700px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<p>下面是一些關於建立這些用戶介面的詳細教學：</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">在工具列加入一個按鈕</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page">建立設定頁面</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">擴充開發者工具</a></li>
+</ul>