Updating Web Extension When User Alters Preferences


(Martin Giger) #21

That’s window.localStorage.setItem().

no, the browser.storage.local API looks different. There isn’t a browser.localStorage. That’s my whole point. The APIs are very different for a kind of similar feeling function. See documentation that I have linked. Please.

There are code examples of that listener earlier in this thread.


(Matthew G. Saroff) #22

OK, so, if I have an object activeMenus: (or an array of objects, as is the case with the custom menus)

{
    "enablebbCode": true,
    "enableHTML": true,
    "enableVbulletin": true,
    "enableXHTML": true,
    "enableMarkDown": true,
    "enableCustom": true,
    "enableSymbol": false
}

The way that I have am currently saving it, retreiving it, and listening using the window.localStorage API is:

localStorage.setItem('activeMenus',JSON.stringify(activeMenus));

JSON.parse(localStorage.getItem('activeMenus'));

window.addEventListener("storage", generateMenu, false);

This has the disadvantages of being wiped if the user clears data, and also it requires variables to be stringified and parsed on storage and retrieval.

Using the browser.storage.local API, this would look like:

browser.storage.local.set(activeMenus)

browser.storage.local.get(activeMenus)

window.addEventListener(“storage”, generateMenu, false);
browser.addEventListener(“storage”, generateMenu, false);

And then the data would not be purged when the user clears their personal data, and as a bonus, I would not have to stringify and parse.

Am I correct in my reading of this?


(Martin Giger) #23

Probably not exactly like this, unless activeMenus is an object with the default values. Also note that this API is async.

No. Look at my previous post breaking down how the storages work or the documentation.


(Matthew G. Saroff) #24

My bad. Typo.

The second window.addEventListener(“storage”, generateMenu, false); should be a browser.addEventListener(“storage”, generateMenu, false);

Also, I understand that the browser.storage API is async, so there will be some .then statements or the equivalent in there.


(Martin Giger) #25

No. Read. The. Docs. Or. My. Posts.


(Matthew G. Saroff) #26

OK, I’ve read the docs, and posts, and I have a bit of code to test out, which works :

defaultMenuFromDisk = JSON.parse(localStorage.getItem('defaultMenu'));
customMenuFromDisk = JSON.parse(localStorage.getItem('customMenu'));
function menuFires (){
	console.log("listener fires");
}

browser.storage.onChanged.addListener(menuFires);

async function request() {
browser.storage.local.set({customMenuFromDisk});
await browser.storage.local.get(['customMenuFromDisk'], function(result) {  // this seems
       var cstmnudsk = result.customMenuFromDisk;   // a
		console.log (JSON.stringify(cstmnudsk,null,3)); //bit
		 }); //involved
}

request();

It appears to me that the 4 lines with the comments at the end, (the browser.storage.local.get stuff) which I need to do in order not to add another level to the array, is a bit involved.

Is there a clearer/more concise way of doing this?

The above code returns an object like this: (which is what I put in)

[
   {
      "menuId": "bbcwbx.custom.001",
      "menuTitle": "First custom menu",
      "parentId": "bbcwbx.custom",
      "menuArg": "Arg 1",
      "icons": ""
   },
.....
]

While a simpler code like this:

var cstmnudsk = await browser.storage.local.get(['customMenuFromDisk']);//, function(result) {
		console.log (JSON.stringify(cstmnudsk,null,3));

gives a result like this:

{
   "customMenuFromDisk": [
      {
         "menuId": "bbcwbx.custom.001",
         "menuTitle": "First custom menu",
         "parentId": "bbcwbx.custom",
         "menuArg": "Arg 1",
         "icons": ""
      },
.....
   ]
}

(Martin Giger) #27
const { customMenuFromDisk: cstmnudsk } = await browser.storage.local.get('customMenuFromDisk');
console.log(cstmnudsk);

(Matthew G. Saroff) #28

Looking through the docs for browser.storage data, it looks like one of two forms, browser.storage.local and browser.storage.sync, could be used.

Obviously, the latter would allow changes to be synced for someone who has a Firefox account, and some users might find this useful.

What are the pros and cons of local as versus sync?


(Martin Giger) #29

See this crucial paragraph of the sync docs:

The main use case of this API is to store preferences about your extension and allow the user to sync them to different profiles. You can store up to 100KB of data using this API. If you try to store more than this, the call will fail with an error message. The API is provided without any guarantees about uptime or performance.

So there are two main drawbacks to sync storage in return for its extra features:

  • Storage space
  • Read/write speed