--- title: 实现一个设置页面 slug: Mozilla/Add-ons/WebExtensions/实现一个设置页面 translation_of: Mozilla/Add-ons/WebExtensions/Implement_a_settings_page ---
{{AddonSidebar}}

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

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

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

简单的 WebExtension

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

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

{

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

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

}

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

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

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

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

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

{{EmbedYouTube("E-WUhihF8fw")}}

添加设置页面

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

首先更新 "manifest.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"]

}

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

接下来，因为我们承诺提供"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>

这里定义了一个带有标记文字{{htmlelement("input")}}的 {{htmlelement("form")}} 和一个 提交 {{htmlelement("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);

它做了两件事:

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

因为 browser.storage.local.get() 在火狐52版本之前的一个漏洞 ,以下代码没法起作用。为了使它生效，onGot()中的 item.color 必须改为 item[0].color。

 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"按钮访问设置页面。

{{EmbedYouTube("ECt9cbWh1qs")}}

进一步了解