Save and restore webextensions options page

Question

I am new to programming and i am building a simple add-on for firefox but i am using web extensions, my options page has a few check box's

I need to save the values of these checkbox's and then restore them, Sample code is appreciated.

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

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

The code i got from Firefox's example works in saving value of one check box, but how do i save and restore all the values of different box ?

Related/possible duplicate [Completely lost on how to save Chrome extension popup window content](http://stackoverflow.com/questions/41284528/completely-lost-on-how-to-save-chrome-extension-popup-window-content). — Makyen, Jan 21 '17 at 07:31
It would help if you [edit] the question to add your *manifest.json* . — Makyen, Jan 21 '17 at 07:32
@Makyen its not a duplicate, but i will look into that post maybe i will find something useful, and my manifest json , don't have anything specifically its only asking for storage as permission. — Cyb3rHac3r, Jan 21 '17 at 08:40
OK I'll double check it within 24 hrs. I'm on someone else's computer right now. At any rate, it seems to work in this add-on: https://addons.mozilla.org/en-US/firefox/files/browse/570430/file/settings/options.js#top — Lori, Jan 31 '17 at 00:49

Lori · Accepted Answer · 2017-01-26T22:37:13.953

This is what I use. My add-on also uses only checkboxes in options. As in your example, the options are identified by element id, so including the HTML would be redundant. I have no save button; changes are recorded in realtime whenever options are checked or unchecked. It's largely copied from the online documentation for this feature. Note that this variant uses jQuery, though.

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

It's possible that, as @Mayken suggests, your problem might be with manifest.json. The example in the documentation instructs one to put options.html in a directory called settings, and declares this in manifest.json by setting options_ui.page to "options.html". I found I had to spell it out as "settings/options.html" to get it to work.

Thanks for this, i like your approach of saving in real time, but i get a error "SyntaxError: missing )" when i use your code — Cyb3rHac3r, Jan 22 '17 at 15:09
Hey @Lori Thanks for this, but i still get "SyntaxError: missing )" , and adding ) just keeps pops up a another error like a loop or something, I will keep trying to fix this but, would it be possible for you to test this code out once and see if there is something i am missing ? — Cyb3rHac3r, Jan 28 '17 at 07:19
Thanks mate, I finally got it to work, turns out it didn't work because jquery had to be included in the html as-well, Really appropriate the help. — Cyb3rHac3r, Jan 31 '17 at 04:44

Save and restore webextensions options page

1 Answers1