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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
|
---
title: 实现一个设置页面
slug: Mozilla/Add-ons/WebExtensions/实现一个设置页面
translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page
---
<div>{{AddonSidebar}}</div>
<p>设置页面可以让用户查看，修改扩展的一些设置。</p>
<p>对于WebExtensions，设置通常使用 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code> API 保存. 实现一个设置页面通常包含以下三步:</p>
<ul>
<li>制作一个HTML 文件用以显示并修改设置</li>
<li>写一个包含于该HTML文件的脚本，其可以使设置页面存储与存储设备中并在用户修改后更新他。</li>
<li>在manifest.json文件 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> 关键字中 设置HTML文件的路径。通过这种方式，该HTML将会被显示浏览器管理器里该插件名字和描述的旁边。</li>
</ul>
<div class="note">
<p>你也可以使用 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage()</a></code> 打开该页面。</p>
</div>
<h2 id="简单的_WebExtension">简单的 WebExtension</h2>
<p>首先，我们写一个向用户访问的所有页面添加一个蓝色边框的扩展。</p>
<p>创建一个新的文件夹命名为“setting”，然后创建文件“manifest.json”它包含以下内容:</p>
<pre class="brush: json">{
"manifest_version": 2,
"name": "Settings example",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["borderify.js"]
}
]
}</pre>
<p>该扩展指示浏览器在用户访问的网站上加载一个名为"borderify.js“的Content Script。</p>
<p>接下来，在"setting"目录下创建"borderify.js"，然后给予他以下内容:</p>
<pre class="brush: js">document.body.style.border = "10px solid blue";</pre>
<p>这只是向网页加入了一一个蓝色边框</p>
<p>现在 <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox">安装该扩展</a> 并测试它——打开任意一个网页:</p>
<p>{{EmbedYouTube("E-WUhihF8fw")}}</p>
<h2 id="添加设置页面">添加设置页面</h2>
<p>现在让我们创建一个设置页面来允许用户设置边框的颜色。</p>
<p>首先更新 "manifest.json" 使他拥有如下内容:</p>
<pre class="brush: json">{
"manifest_version": 2,
"name": "Settings example",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["borderify.js"]
}
],
"options_ui": {
"page": "options.html"
},
"permissions": ["storage"]
}
</pre>
<p>我们加入了两个manifest 关键字:</p>
<ul>
<li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code>: 设置了一个HTML来作为设置页面。</li>
<li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>: 我们使用 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code> API 来保存设置, 所以我们需要请求权限来使用该API。</li>
</ul>
<p>接下来，因为我们承诺提供"options.html"，让我们来创建他，在"setting"目录创建一个该文件并具有以下内容:</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>Border color<input type="text" id="color" ></label>
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>
</pre>
<p>这里定义了一个带有标记文字{{htmlelement("input")}}的 {{htmlelement("form")}} 和一个 提交 {{htmlelement("button")}}. 也包含了一个名为"options.js"的脚本。</p>
<p>仍然在"settting"目录下创建 "options.js"，并给予他以下内容:</p>
<pre class="brush: js">function saveOptions(e) {
e.preventDefault();
browser.storage.local.set({
color: document.querySelector("#color").value
});
}
function restoreOptions() {
function setCurrentChoice(result) {
document.querySelector("#color").value = result.color || "blue";
}
function onError(error) {
console.log(`Error: ${error}`);
}
var getting = browser.storage.local.get("color");
getting.then(setCurrentChoice, onError);
}
document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);
</pre>
<p>它做了两件事:</p>
<ul>
<li>当网页被加载它使用<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get">storage.local.get()</a></code> 从存贮设备中获取了名为"color”的值.如果该值未被设置其为默认值blue。</li>
<li>当用户点击提交按钮，使用<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set">storage.local.set()</a></code> 存贮颜色值。</li>
</ul>
<p>最后，更新"borderify.js" 来读取边框颜色:</p>
<div class="warning">
<p>因为 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/get">browser.storage.local.get()</a> 在火狐52版本之前的一个漏洞 ,以下代码没法起作用。为了使它生效，<code>onGot()中的 item.color 必须改为 item[0].color。</code></p>
</div>
<pre class="brush: js"> function onError(error) {
console.log(`Error: ${error}`);
}
function onGot(item) {
var color = "blue";
if (item.color) {
color = item.color;
}
document.body.style.border = "10px solid " + color;
}
var getting = browser.storage.local.get("color");
getting.then(onGot, onError);
</pre>
<p>最后，完整的扩展看起来是这样:</p>
<pre>settings/
borderify.js
manifest.json
options.html
options.js</pre>
<p>现在:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on">重新载入扩展</a></li>
<li>加载一个网页</li>
<li>打开设置页面并修改边框颜色</li>
<li>重载网页查看变化。</li>
</ul>
<p>在火狐中你可以通过访问"about:addons"点击扩展旁边的"Preferences"按钮访问设置页面。</p>
<p>{{EmbedYouTube("ECt9cbWh1qs")}}</p>
<h2 id="进一步了解">进一步了解</h2>
<ul>
<li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/options_ui">options_ui</a></code> 关键字文档</li>
<li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage">storage</a></code> API 文档</li>
<li>使用<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage">runtime.openOptionsPage()</a></code> 直接打开你的设置页面</li>
<li>另一个设置页面例子:
<ul>
<li><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a></li>
</ul>
</li>
</ul>
|
