diff options
Diffstat (limited to 'files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html')
| -rw-r--r-- | files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html b/files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html new file mode 100644 index 0000000000..8453fa87ee --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/implement_a_settings_page/index.html @@ -0,0 +1,204 @@ +--- +title: 实现一个设置页面 +slug: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page +original_slug: Mozilla/Add-ons/WebExtensions/实现一个设置页面 +--- +<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> |