实现一个设置页面

这篇翻译不完整。请帮忙从英语翻译这篇文章

设置页面可以让用户查看,修改扩展的一些设置。

对于WebExtensions,设置通常使用 storage API 保存. 实现一个设置页面通常包含以下三步:

  • 制作一个HTML 文件用以显示并修改设置
  • 写一个包含于该HTML文件的脚本,其可以使设置页面存储与存储设备中并在用户修改后更新他。
  • 在manifest.json文件 options_ui 关键字中 设置HTML文件的路径。通过这种方式,该HTML将会被显示浏览器管理器里该插件名字和描述的旁边。

你也可以使用 runtime.openOptionsPage() 打开该页面。

一个简单的WebExtension

首先,我们写一个向用户访问的所有页面添加一个蓝色边框的扩展。

创建一个新的文件夹命名为“setting”,然后创建文件“manifest.json”它包含以下内容:

{

  "manifest_version": 2,
  "name": "Settings example",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["borderify.js"]
    }
  ],

  "applications": {
    "gecko": {
      "id": "settings-example@mozilla.org"
    }
  }

}

该扩展指示浏览器在用户访问的网站上加载一个名为"borderify.js“的Content Script。

注意我们也包含了 applications 关键字.  因为存在一个漏洞在我们包含了options_ui关键字后必须显式的设置一个add-on ID (仅仅在火狐中). 即使我们现在没有使用option_ui 关键字,我们会在下一个单元使用它,请查看 bug 1269545.

接下来,在"setting"目录下创建"borderify.js",然后给予他以下内容:

document.body.style.border = "10px solid blue";

这只是向网页加入了一一个蓝色边框

现在 安装该扩展 并测试它——打开任意一个网页:

添加设置页面

现在让我们创建一个设置页面来允许用户设置边框的颜色。

首先更新 "manifest.json" 使他拥有如下内容:

{

  "manifest_version": 2,
  "name": "Settings example",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["borderify.js"]
    }
  ],

  "applications": {
    "gecko": {
      "id": "settings-example@mozilla.org"
    }
  },

  "options_ui": {
    "page": "options.html"
  },

  "permissions": ["storage"]

}

我们加入了两个manifest 关键字:

  • options_ui: 设置了一个HTML来作为设置页面。
  • permissions: 我们使用 storage API 来保存设置, 所以我们需要请求权限来使用该API。

接下来,因为我们承诺提供"options.html",让我们来创建他,在"setting"目录创建一个该文件并具有以下内容:

<!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>

这里定义了一个带有标记文字<input><form> 和一个 提交 <button>. 也包含了一个名为"options.js"的脚本。

仍然在"settting"目录下创建 "options.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);

它做了两件事:

  • 当网页被加载它使用storage.local.get() 从存贮设备中获取了名为"color”的值.如果该值未被设置其为默认值blue。
  • 当用户点击提交按钮,使用storage.local.set() 存贮颜色值。

最后,更新"borderify.js" 来读取边框颜色:

因为 browser.storage.local.get() 在火狐52版本之前的一个漏洞 ,以下代码将不会工作. 为使其工作, onGot()中的item.color必须改为item.color[0]。

 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);

最后,完整的扩展看起来是这样:

settings/
    borderify.js
    manifest.json
    options.html
    options.js

现在:

  • 重新载入扩展
  • 加载一个网页
  • 打开设置页面并修改边框颜色
  • 重载网页查看变化。

在火狐中你可以通过访问"about:addons"点击扩展旁边的"Preferences"按钮访问设置页面。

更多

文档标签和贡献者

 此页面的贡献者: Hypophrenia
 最后编辑者: Hypophrenia,