Hello all,
I would like to save a simple value. The following method gives me the following output:
Code
browser.storage.local.set({
grade: sGrade
}).then(() => {
browser.storage.local.get("grade").then(r => console.log(r)).catch(e => console.log(e));
})
Output
Unfortunately, I cannot see this value via DevTools. What is the reason for this?
What do you mean by that? You donât see it in the storage inspector?
Yeah right, the extension storage, local storage etc. are empty
All I can say is âworks for meâ.
storagelocal.zip (4.1 KB)
Screenshot of the storage inspector:
Okay, the code you just send here works for me too. Is it possible that I cannot access the storage via my JavaScript in the popup view?
popups have the same privileges as the background page. The only limitation is that they stop running when theyâre closed. So if you do something async (promises) and close the popup while thatâs still running thereâs no guarantee itâll complete.
What would be the best solution to make a settings page then?
I activated the option âDisable Popup auto-hideâ. My entries did not appear in the storage manager while my console output with .then was working fine.
I am developing the whole thing for a subject paper in computer science for my Abitur (Germany) and it will be open-source, so you can just find my code here: https://github.com/Th3Ph4nt0m/Pius-Addon
I would be really grateful if we could find a reasonable solution together.
The best way to do a settings page is probably options ui.
But in general, it would be to save settings on blur of the input or similar, instead of requiring a submit.
Unfortunately, this is not possible in this case. The Options UI is actually very unknown, so many will not find the settings. To keep the UX as good as possible, everything should be found in one place, preferably in the pop-up.
I also cannot save the values, for example, when entering them, as 3 dropdowns result in one entry at the end.
My code should be correct though, if Iâm not completely wrong. So I donât understand why the entries are not set.
So the line .then(r => console.log(r)) in
function onGradeSet(e) {
const sGrade = document.getElementById("grade").value;
console.log(sGrade)
browser.storage.local.set({
grade: sGrade
})
.then(r => console.log(r))
.catch(e => console.log(e))
if (sGrade === "10" || sGrade === "11" || sGrade === "12") {
document.getElementById("courses").style.visibility = "visible";
} else {
document.getElementById("courses").style.visibility = "hidden";
}
e.preventDefault();
}
results undefined. Does this mean there is no error, or is there a problem with the whole storage set function?
Set operation returns Promise<void>, so there is no reason to check the value, see the docs:
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set#return_value
Also you may want to use async/await instead of then, it makes the code much easier to read and write.
For example:
async function setSomeData() {
await browser.storage.local.set({a: 1});
const {a} = await browser.storage.local.get('a'); // getting back "a" using Destructuring assignment
console.log(a); // prints "1"
}
Okay thank you. My code is now this:
const sGrade = document.getElementById('grade').value;
console.log("1")
await browser.storage.local.set({grade: sGrade});
console.log("2")
const {a} = await browser.storage.local.get('grade');
console.log(a)
which results this output:
I have no idea what I am doing wrong here. The chrome api has a similar structure, so I only need to change browser to chrome. I have the same problem there.
Close, but not exactly, make sure to read more about Destructuring assignment:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
So instead of:
const {a} = await browser.storage.local.get('grade');
Use the:
const {grade} = await browser.storage.local.get('grade');
But if needed, you can just keep it in the object:
const x = await browser.storage.local.get('grade');
console.log(x.grade); // as you can see, the "x" is a simple object with "grade" key
The lines
const {a} = await browser.storage.local.get(âgradeâ);
console.log(a);
need to be replaced with either
const {grade} = await browser.storage.local.get(âgradeâ);
console.log(grade);
or
const {grade: a} = await browser.storage.local.get(âgradeâ);
console.log(a);
Okay, I was just stupid there, sorry. Now the value is logged, but it is still not visible in the Storage Inspector.
You are probably checking a wrong storage or wrong âcontextâ.
Note that âstorage.localâ is not âLocal storageâ 
.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Anyway, when I open my extension tab and check the developer tools / Storage, I canât see a storage at all 
.
None of those are âbrowser.storage.localâ.
However when I go to âabout:debuggingâ and click âInspectâ button next to my addon then in there I can see âExtension storageâ with my storage.
Anyway, when you need to check the storage, it may be faster to just open a console and execute:
await browser.storage.local.get()
Which will print all storage data.
Yeah, thatâs right. I am using the storage inspector via the âInspectâ from âDebug Addonsâ. As you can see here, the console output is correct, but the storage inspector remains empty, even after reloading it manually.
Note that you are in a Popup context - maybe if you switch to background script context it would help.
Just like with multiple iframes in the page you can switch your current âviewâ to display a specific âcontextâ, with the addon debugger you can also switch which part of your extension you want to debug. To do this, there is an icon in the upper right corner:
https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox#targeting_a_document
