initial commit

6 files changed, 494 insertions, 0 deletions

diff --git a/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/author/index.html b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/author/index.html
new file mode 100644
index 0000000000..a99d8438e8
--- /dev/null
+++ b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/author/index.html
@@ -0,0 +1,44 @@
+---
+title: 作者
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/author
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/author
+---
+<div>
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">型別</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">強制</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">範例</th>
+   <td>
+    <pre class="brush: json no-line-numbers  language-json">
+<code class="language-json"><span class="key token">"author":</span> <span class="string token">"cool puppy"</span></code></pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>套件作者，用來顯示在瀏覽器的用戶介面中。如果有提供 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/developer">developer</a> 鍵而且裡面包含 "name" 屬性，那會覆蓋author鍵。不能指定多個作者。</p>
+
+<p>這是一個<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">可侷限的屬性</a>。</p>
+</div>
+
+<p> </p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: json no-line-numbers  language-json"><code class="language-json"><span class="key token">"author":</span> <span class="string token">"cool puppy"</span></code></pre>
+
+<h2 id="瀏覽器兼容">瀏覽器兼容</h2>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.author")}}</p>
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/background/index.html b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/background/index.html
new file mode 100644
index 0000000000..d02b6eb600
--- /dev/null
+++ b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/background/index.html
@@ -0,0 +1,93 @@
+---
+title: background
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/background
+tags:
+  - 擴充套件
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/background
+---
+<div>
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">型別</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">強制</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">範例</th>
+   <td>
+    <pre class="brush: json no-line-numbers  language-json">
+<code class="language-json"><span class="key token">"background":</span> <span class="punctuation token">{</span>
+  <span class="key token">"scripts":</span> <span class="punctuation token">[</span><span class="string token">"background.js"</span><span class="punctuation token">]</span>
+<span class="punctuation token">}</span></code></pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>用 <code>background</code> 鍵來引入一個或多個後端腳本，還有一個選擇性的套件後端頁面。</p>
+
+<p>後端腳本是用來放置一些需要維護長期狀態或是進行長期操作的程式碼，它麼的生命週期跟任何網頁或瀏覽器視窗是獨立的。</p>
+
+<p>後端腳本會在套件一被讀取就被讀入，一直到套件被禁用或移除才會卸載。只要你有請求對應的<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">權限</a>你可以在這個腳本裡使用任何擴充套件 APIs。</p>
+
+<p>更多細節，查看<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_pages">套件解析</a>的"後端頁面"章節。</p>
+
+<p><code>background</code> 鍵是一個物件，可能包含下列二屬性其中之一，兩者都是選擇性的：</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><code>"scripts"</code></td>
+   <td>
+    <p>一個字串組成的陣列，每個都是 JavaScript 原始碼的路徑。路徑是 manifest.json 檔案自身的相對路徑。這些是會被套件讀取的後端腳本。</p>
+
+    <p>腳本共用全局 <code>window</code>。</p>
+
+    <p>腳本根據陣列裡的順序讀入。</p>
+
+    <p><strong>註：Firefox 版本50以前有一個錯誤</strong> 當 Firefox 除錯器開啓時，腳本並不總是按照陣列裡的順序讀入。要解決這個錯誤，你可以用 <code>"page"</code> 屬性並且在頁面中透過 <code>&lt;script&gt;</code> 標籤讀入後端腳本。這個錯誤在 Firefox 50 被修正，從那開始腳本總是會依照陣列中的順序讀入。</p>
+
+    <div class="note">
+    <p><strong>註：</strong> 如果你想要用<code>&lt;script&gt;標籤</code>從遠端取得一個腳本（例如 <code>&lt;script src = "https://code.jquery.com/jquery-1.7.1.min.js"&gt;</code>），你必須要修改套件 manifest.json 中的 <code>content_security_policy</code> 鍵。</p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td><code>"page"</code></td>
+   <td>
+    <p>如果你指定 <code>"scripts"</code>，那麼爲了讓你的腳本執行一個空白頁面會被建立。</p>
+
+    <p>如果頁面中需要某些內容，你可以用 <code>"page"</code> 選項定義自己的頁面。</p>
+
+    <p>如果你用了這個屬性，你就不能透過 <code>"scripts"</code> 來指定後端腳本。但是你可以像一般的網頁一樣在頁面中引入你自己的腳本。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: json no-line-numbers  language-json"><code class="language-json">  <span class="key token">"background":</span> <span class="punctuation token">{</span>
+    <span class="key token">"scripts":</span> <span class="punctuation token">[</span><span class="string token">"jquery.js"</span><span class="punctuation token">,</span> <span class="string token">"my-background.js"</span><span class="punctuation token">]</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>讀取兩個後端腳本。</p>
+
+<pre class="brush: json line-numbers  language-json"><code class="language-json"><span class="key token">"background":</span> <span class="punctuation token">{</span>
+    <span class="key token">"page":</span> <span class="string token">"my-background.html"</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<p>讀取一個自訂的後端頁面。</p>
+
+<h2 id="瀏覽器兼容">瀏覽器兼容</h2>
+</div>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.background", 10)}}</p>
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html
new file mode 100644
index 0000000000..7a96adfecc
--- /dev/null
+++ b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.html
@@ -0,0 +1,88 @@
+---
+title: applications
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings
+tags:
+  - 擴充套件
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings
+---
+<div>
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">型別</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">強制</th>
+   <td>通常是不強制（請看<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID#When_do_you_need_an_add-on_ID">你什麼時候會需要 Add-on ID？</a>）。在 Firefox 48（桌面）前以及Android版Firefox 是強制的。</td>
+  </tr>
+  <tr>
+   <th scope="row">範例</th>
+   <td>
+    <pre class="brush: json no-line-numbers  language-json">
+<code class="language-json"><span class="key token">"applications":</span> <span class="punctuation token">{</span>
+  <span class="key token">"gecko":</span> <span class="punctuation token">{</span>
+    <span class="key token">"id":</span> <span class="string token">"addon@example.com"</span><span class="punctuation token">,</span>
+    <span class="key token">"strict_min_version":</span> <span class="string token">"42.0"</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="敘述">敘述</h2>
+
+<p><code>applications</code> 鍵包含了詳細描述特定應用的鍵。</p>
+
+<p>目前這只包含了一個鍵，<code>gecko</code>，它包含4個string參數：</p>
+
+<ul>
+ <li><code>id</code> 是套件ID。Firefox 48 以後爲選擇性，48前爲強制。需要什麼來指定 add-on ID 請查看<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID">套件與 Add-on ID</a>。</li>
+ <li><code>strict_min_version</code>：支持的最舊Gecko版本。在這個欄位版本號包含 "*" 是不合法的。預設是 "42a1"。</li>
+ <li><code>strict_max_version</code>： 支持的最新Gecko版本。如果套件安裝的 Firefox 版本超過這個版本號則套件會被禁用或不被允許安裝。預設爲 "*"，表示禁用最新支持版本檢查。</li>
+ <li><code>update_url</code> 是<a href="https://developer.mozilla.org/en-US/Add-ons/Updates">套件更新 manifest</a>。備：連結必須以 "https" 開頭。這個鍵用來自己管理套件更新（不透過套件管理器）。</li>
+</ul>
+
+<p>查看<a href="https://addons.mozilla.org/en-US/firefox/pages/appversions/">可用Gecko版本</a>。</p>
+
+<h3 class="highlight-spanned" id="套件ID格式"><span class="highlight-span">套件ID格式</span></h3>
+
+<p>套件ID格式必須是下列其中一種：</p>
+
+<ul>
+ <li><a href="https://en.wikipedia.org/wiki/Universally_unique_identifier" title="Generating_GUIDs">GUID</a></li>
+ <li>寫得像信箱地址的字串：<code class="plain">extensionname@example.org</code></li>
+</ul>
+
+<p>後者比較容易產生與操作。小心，在這裡使用真實信箱地址可能會引來垃圾信件。</p>
+
+<p>例如：</p>
+
+<pre class="brush:json;auto-links:false no-line-numbers  language-json"><code class="language-json"><span class="key token">"id":</span> <span class="string token">"extensionname@example.org"</span><span class="punctuation token">,</span>
+
+<span class="key token">"id":</span> <span class="string token">"{daf44bf7-a45e-4450-979c-91cf07434c3d}"</span></code></pre>
+
+<p> </p>
+
+<h2 id="範例">範例</h2>
+
+<p>包含所有可用鍵的範例。註：大多數套件會忽略 <code>strict_max_version</code> 和 <code>update_url</code>。</p>
+
+<pre class="brush: json no-line-numbers  language-json"><code class="language-json"><span class="key token">"applications":</span> <span class="punctuation token">{</span>
+  <span class="key token">"gecko":</span> <span class="punctuation token">{</span>
+    <span class="key token">"id":</span> <span class="string token">"addon@example.com"</span><span class="punctuation token">,</span>
+    <span class="key token">"strict_min_version":</span> <span class="string token">"42.0"</span><span class="punctuation token">,</span>
+    <span class="key token">"strict_max_version":</span> <span class="string token">"50.*"</span><span class="punctuation token">,</span>
+    <span class="key token">"update_url":</span> <span class="string token">"https://example.com/updates.json"</span>
+  <span class="punctuation token">}</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h2 id="瀏覽器兼容">瀏覽器兼容</h2>
+</div>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.browser_specific_settings")}}</p>
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html
new file mode 100644
index 0000000000..4a9b065496
--- /dev/null
+++ b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.html
@@ -0,0 +1,46 @@
+---
+title: homepage_url
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url
+tags:
+  - 擴充套件
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url
+---
+<div>
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">型別</th>
+   <td><code>String</code></td>
+  </tr>
+  <tr>
+   <th scope="row">強制</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">範例</th>
+   <td>
+    <pre class="brush: json no-line-numbers  language-json">
+<code class="language-json"><span class="key token">"homepage_url":</span> <span class="string token">"https://example.org/my-addon"</span></code></pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>套件首頁的URL。</p>
+
+<p>如果有 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/developer">developer</a> 鍵且它包含 "url" 屬性，這會覆蓋 homepage_url 鍵。</p>
+
+<p>這是一個<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json">可侷限的屬性</a>。</p>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: json no-line-numbers  language-json"><code class="language-json"><span class="key token">"homepage_url":</span> <span class="string token">"https://github.com/mdn/webextensions-examples/tree/master/beastify"</span></code></pre>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+</div>
+
+<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+
+<p>{{Compat("webextensions.manifest.homepage_url")}}</p>
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/index.html b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/index.html
new file mode 100644
index 0000000000..23eda6a41c
--- /dev/null
+++ b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/index.html
@@ -0,0 +1,113 @@
+---
+title: manifest.json
+slug: Mozilla/Add-ons/WebExtensions/manifest.json
+tags:
+  - Add-ons
+  - Extensions
+  - NeedsTranslation
+  - TopicStub
+  - WebExtensions
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json
+---
+<div>{{AddonSidebar}}</div>
+
+<p>manifest.json 是所有採用 WebExtension API 的擴充功能中、唯一一個必須包含的檔案。</p>
+
+<p>你可透過 manifest.json 為擴充功能指定名稱（name）、版本（version）這類的基本元資料（metadata），也可指定擴充功能的一些相關功能，例如像是背景腳本（background scripts）、內容腳本（content scripts）、瀏覽器動作（browser actions）等等。</p>
+
+<p>這是個採用 <a href="/en-US/docs/Glossary/JSON">JSON</a> 格式的檔案，但有個例外：它可接受含有 "<code>//</code>" 這種格式的註解文字。</p>
+
+<p>manifest.json 可採用的鍵值如下所列：</p>
+
+<div class="twocolumns">{{ ListSubpages ("/en-US/Add-ons/WebExtensions/manifest.json") }}</div>
+
+<div class="twocolumns"> </div>
+
+<p><code>"manifest_version"</code>、<code>"version"</code> 和 <code>"name"</code> 是一定要設定的鍵值。另外，如果有設定 "_locales" directory ，就一定要設定 <code>"default_locale"</code> ，否則就是這兩個鍵值都不做設定。 Google Chrome, 並不支援 <code>"applications"</code> ，但針對 Firefox 48 之前及 Android 的版本，則必須設置這個鍵值。</p>
+
+<p>你可透過擴充功能中的 JavaScript，藉由 {{WebExtAPIRef("runtime.getManifest()")}} 這個函式來存取擴充功能裡的 manifest ：</p>
+
+<pre class="brush: js">browser.runtime.getManifest().version;</pre>
+
+<h2 id="範例">範例</h2>
+
+<p>以下程式碼顯示的是一般 manifest 鍵值的基本語法。請注意，這個範例並不是讓你用來直接複製貼上的，你必須根據所開發的擴充功能，填入相應的鍵值、關於擴充功能的完整範例，請參見 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples">擴充功能範例</a>。</p>
+
+<pre class="brush: json">{
+  "applications": {
+    "gecko": {
+      "id": "addon@example.com",
+      "strict_min_version": "42.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["jquery.js", "my-background.js"],
+    "page": "my-background.html"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "commands": {
+    "toggle-feature": {
+      "suggested_key": {
+        "default": "Ctrl+Shift+Y",
+        "linux": "Ctrl+Shift+U"
+      },
+      "description": "Send a 'toggle-feature' event"
+    }
+  },
+
+  "content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
+
+  "content_scripts": [
+    {
+      "exclude_matches": ["*://developer.mozilla.org/*"],
+      "matches": ["*://*.mozilla.org/*"],
+      "js": ["borderify.js"]
+    }
+  ],
+
+  "default_locale": "en",
+
+  "description": "...",
+
+  "icons": {
+    "48": "icon.png",
+    "96": "icon@2x.png"
+  },
+
+  "manifest_version": 2,
+
+  "name": "...",
+
+  "page_action": {
+    "default_icon": {
+      "19": "button/geo-19.png",
+      "38": "button/geo-38.png"
+    },
+    "default_title": "Whereami?",
+    "default_popup": "popup/geo.html"
+  },
+
+  "permissions": ["webNavigation"],
+
+  "version": "0.1",
+
+  "web_accessible_resources": ["images/my-image.png"]
+}</pre>
+
+<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
+
+<p>若想對所有的 manifest 鍵值及其子健有個完整的概念，可參見 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">完整 manifest.json 瀏覽器相容表</a>。</p>
+
+<div class="hidden">此頁面的相容表是根據結構化資料所生成的。如果你想對該資料做出貢獻，可直接 check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 並以 pull request 的方式回饋給我們。</div>
+
+<p>{{Compat("webextensions.manifest")}}</p>
diff --git a/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html
new file mode 100644
index 0000000000..7a376817f1
--- /dev/null
+++ b/files/zh-tw/mozilla/add-ons/webextensions/manifest.json/options_ui/index.html
@@ -0,0 +1,110 @@
+---
+title: options_ui
+slug: Mozilla/Add-ons/WebExtensions/manifest.json/options_ui
+tags:
+  - 擴充套件
+translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/options_ui
+---
+<div>
+<div>{{AddonSidebar}}</div>
+
+<table class="fullwidth-table standard-table">
+ <tbody>
+  <tr>
+   <th scope="row" style="width: 30%;">型別</th>
+   <td><code>Object</code></td>
+  </tr>
+  <tr>
+   <th scope="row">強制</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">範例</th>
+   <td>
+    <pre class="brush: json no-line-numbers  language-json">
+<code class="language-json"><span class="key token">"options_ui":</span> <span class="punctuation token">{</span>
+  <span class="key token">"page":</span> <span class="string token">"options/options.html"</span>
+<span class="punctuation token">}</span></code></pre>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p>用 <code>options_ui</code> 鍵來定義套件的<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Options_pages">選項頁面</a>。</p>
+
+<p>選項頁面包含了套件的設定。用戶可以從套件管理員進入這個畫面，而你可以用{{WebExtAPIRef("runtime.openOptionsPage()")}}打開它。</p>
+
+<p>指定 <code>options_ui</code> 爲一個與套件打包在一起的HTML檔案路徑。就像一般的網頁一樣，HTML檔案可包含CSS與JavaScript檔案。跟普通頁面不同的是，它可以使用所有被<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">授權</a>的<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API">套件APIs</a>。 不過，它執行的作用域不同於你的後端腳本。</p>
+
+<p>如果你想在<strong>選項頁面</strong>與<strong>後端腳本</strong>的JavaScript裡<strong>共用</strong>資料或函數，你可以透過用{{WebExtAPIRef("extension.getBackgroundPage()")}}與後端腳本的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">Window</a> 關聯、用{{WebExtAPIRef("extension.getViews()")}}與任何套件內腳本的{{domxref("Window")}}關聯來實現。你也可以透過 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage">runtime.sendMessage()</a></code>、 <code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage</a></code>，跟（或）<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect">runtime.connect()</a></code>在選項頁面與後端的頁面的JavaScript之間溝通。<br>
+ 後者（或是<code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port">runtime.Port</a></code>）也可以用來在<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Background_scripts">後端腳本</a>與<strong><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts">內容腳本</a></strong>之間共用選項。</p>
+
+<p>一般要儲存選項頁面的選項變動時，你要可能會用 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/storage">storage API</a>、<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/sync">storage.sync</a>（如果你想要在所有用戶登入的瀏覽器實例之間同步設定的話），或者透過 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/local">storage.local</a> （如果設定是針對目前身份或機器）。而如果你希望你的<a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Background_scripts">後端腳本</a>（或<a href="https://developer.mozilla.org/en-US/docs/">內容腳本</a>）監聽該變化，你可以加上 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/onChanged">storage.onChanged</a> 監聽器。</p>
+
+<h2 id="語法">語法</h2>
+
+<p><code>options_ui</code> 鍵是一個包含了下列內容的物件：</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Name</th>
+   <th scope="col">Type</th>
+   <th scope="col">Description</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">browser_style</a></code></td>
+   <td><code>Boolean</code></td>
+   <td>
+    <p>可選，預設爲 <code>true</code>。</p>
+
+    <p>用這個來替你的頁面引入一個樣式表，使你的頁面與瀏覽器UI以及其他用 <code>browser_style</code> 的套件看起來一致。雖然它預設是<code>true</code>還是建議你加入這個屬性。</p>
+
+    <p>在 Firefox 裡，樣式表可以在 chrome://browser/content/extension.css 或 chrome://browser/content/extension-mac.css（OS X）查看。設定尺寸的時候注意到這個樣式表目前會做這個設定<code>box-sizing: border-box</code> （查看 <a href="https://developer.mozilla.org/docs/Web/CSS/box-sizing">box-sizing</a>）。</p>
+
+    <p><a class="external external-icon" href="https://firefoxux.github.io/StyleGuide/#/controls">Firefox風格指南</a>寫到一些你可以應用到彈出視窗裡面的元素上來變成特定樣式的class。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>open_in_tab</code></td>
+   <td><code>Boolean</code></td>
+   <td>
+    <p>可選，預設爲 <code>false</code>。</p>
+
+    <p>如果設爲 <code>true</code>，選項頁面會在普通的瀏覽器頁籤開啓而不是整合在瀏覽器的套件管理員裡。</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>page</code></td>
+   <td><code>String</code></td>
+   <td>
+    <p>強制。</p>
+
+    <p>包含選項頁面細項的HTML檔案路徑。</p>
+
+    <p>這個路徑是 manifest.json 的相對路徑。</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="範例">範例</h2>
+
+<pre class="brush: json no-line-numbers  language-json"><code class="language-json">  <span class="key token">"options_ui":</span> <span class="punctuation token">{</span>
+    <span class="key token">"page":</span> <span class="string token">"options/options.html"</span>
+  <span class="punctuation token">}</span></code></pre>
+
+<h2 id="瀏覽器兼容性">瀏覽器兼容性</h2>
+</div>
+
+
+
+<p>{{Compat("webextensions.manifest.options_ui")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles">Browser styles</a></li>
+</ul>