Question

我是编程新手，我正在为firefox构建一个简单的附加组件，但我使用的是网络扩展，我的选项页面有几个复选框

我需要保存这些复选框的值，然后将其恢复，我们非常感谢示例代码。

＆＃13;

function saveOptions(e) {
  e.preventDefault();
  browser.storage.local.set({
    box1: document.querySelector("#box1").checked
  });
}

function restoreOptions() {

	var getting = browser.storage.local.get("box1");

  function setCurrentChoice(result) {
    document.querySelector("#box1").checked = result.box1 || false
  }

  function onError(error) {
    console.log(`Error: ${error}`);
  }

  

  getting.then(setCurrentChoice, onError);

}

document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);

＆＃13;

<form>
<p><label>Box1<input id="box1" type="checkbox" /></label></p>
<p><label>Box2<input id="box2" type="checkbox" /></label></p>
<p><label>Box3<input id="box3" type="checkbox" /></label></p>
<p><label>Box4<input id="box4" type="checkbox" /></label></p>
<p><label>Box5<input id="box5" type="checkbox" /></label></p>
<p><button type="submit">Save</button></p>
</form>
<script src="options.js"></script>

＆＃13;

我从Firefox的示例中获得的代码可以保存一个复选框的值，但是如何保存和恢复不同框的所有值？

Answer 1

这就是我使用的。我的插件也只使用选项中的复选框。在您的示例中，选项由元素ID标识，因此包含HTML将是多余的。我没有保存按钮;无论何时选中或取消选中选项，都会实时记录更改。它主要是从此功能的在线文档中复制而来。请注意，此变体使用jQuery。

// see https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Implement_a_settings_page

// if one of the checkboxes is clicked, store the new value of the
// corresponding parameter:
$("input").click(function () {
  var setting = {};
  setting[$(this).attr("id")] = $(this).get(0).checked;
  chrome.storage.local.set(setting);
});

function restoreOptions() {
 // For each checkbox, see if stored value of setting has changed
 $("input").each(function () {
   var id = $(this).attr("id");
   chrome.storage.local.get(id, function (setting) {
     if (Object.keys(setting).length) {
      $("#"+id).get(0).checked = setting[id] ? "checked" : undefined;
     }
     else {
      // This block runs only the first time the settings page is opened.
      init = {};
      init[id] = true;
      chrome.storage.local.set(init);
     }
   });
 });
}

document.addEventListener("DOMContentLoaded", restoreOptions);

正如@Mayken建议的那样，你的问题可能在于manifest.json。 The example in the documentation指示one将options.html放在名为settings的目录中，并通过将options_ui.page设置为"options.html"在manifest.json中声明。我发现我必须将其拼写为"settings/options.html"以使其发挥作用。

保存并恢复webextensions选项页面

1 个答案: