Merge pull request #32 from fiji-flo/unslugging-zh-cn

Unslugging zh cn

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": ["&lt;all_urls&gt;"],
+      "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": ["&lt;all_urls&gt;"],
+      "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">&lt;!DOCTYPE html&gt;
+
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+
+    &lt;form&gt;
+        &lt;label&gt;Border color&lt;input type="text" id="color" &gt;&lt;/label&gt;
+        &lt;button type="submit"&gt;Save&lt;/button&gt;
+    &lt;/form&gt;
+
+    &lt;script src="options.js"&gt;&lt;/script&gt;
+
+  &lt;/body&gt;
+
+&lt;/html&gt;
+</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>