blob: 7a376817f1c6ab2304c80c41388ff36229ce5c49 (
plain)
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
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>
|
