seems to don't work

Hello all,

I would like to save a simple value. The following method gives me the following output:

        grade: sGrade
    }).then(() => {"grade").then(r => console.log(r)).catch(e => console.log(e));

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

  • Manjaro Linux
  • Firefox 85.0 (64-Bit)
  • Run the attached test extension with
    web-ext run (4.1 KB)

Screenshot of the storage inspector:

1 Like

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:

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

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:
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{a: 1});
  const {a} = await'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;
    await{grade: sGrade});
    const {a} = await'grade');


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:

So instead of:

    const {a} = await'grade');

Use the:

    const {grade} = await'grade');

But if needed, you can just keep it in the object:

    const x = await'grade'); 
    console.log(x.grade);  // as you can see, the "x" is a simple object with "grade" key
1 Like

The lines

const {a} = await‘grade’);

need to be replaced with either

const {grade} = await‘grade’);


const {grade: a} = await‘grade’);


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” :slight_smile:.

Anyway, when I open my extension tab and check the developer tools / Storage, I can’t see a storage at all :smiley:.

None of those are “”.

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:


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:

Well, this button does not exist in my Firefox. I am using the Firefox Developer Edition

I use Developer Edition as well. Is it the window opened through the “Inspect” button on the about:debugging page?