Remember the state of a checkbox in a popup

Add-ons Development
#1

Hello,

I have got a quite simple addons published on AMO which essentially consists of a popup (.html, .js) containing a form with, among other things, a checkbox.

This checkbox is an option that the user can tick before submitting the form in order to change how the form is processed.

I would like to remember the state of that checkbox so that the user only has to click it once until s/he wants to change the option again.

Looking for a solution, I only stumbled upon docs about to achieve this with (dedicated) options page, which is not what I am looking for.

Would you have any pointer about how to store/get/set the state of a checkbox within the popup (without option page)?

Thank you in advance for your help.

Tim

#2

You could either set the attributes for default form autocompletion (but I am not sure if Firefox does that on extension pages) or (with JavaScript) detect changes to the checkboxes state, save it to browser.storage.local (or .sync) and restore it on page load.

#3

Thank you for your answer.

Could you please point me to some resources/examples about it please ?

#4

<input autocomplete> on MDN, e.g. try <input type=checkbox autocomplete=on>. Maybe that works and you are done.

Otherwise:
https://www.google.com/search?q=browser.storage.local

#5

The following example probably is more complicated than needed, because it’s my first extension that needs to do any storage or messaging.

I have some storage code in my background.js for user preferences (oPrefs object). popup.js sends a message requesting the user’s preferences (getSettings() function) and uses that data to set the state of controls on the popup’s Options tab (radio buttons, checkboxes, and a number input).

#6

Hello,

Thank you for you kind answers :slightly_smiling_face:

After looking at several examples and trying to dig into the doc, I gota say that I feel completely lost :slightly_frowning_face:

What is the difference between storage.local and storage.managed for instance ? Which one is better fitted for storing options across browser restart and why ?

#7

storage.managed is only relevant in e.g. enterprise settings, where the organization manages that storage (and the extension can set preferences based on that).

What you usually want to work with is either storage.local or storage.sync.
Both work basically the same, only that sync will be synced across all browsers signed in to the same account.
So sync is usually suited best for extension settings and local for cached stuff.