Firefox extension how to get extension storage value

Question

I created a temporary Firefox add-on which opens a new tab when an icon is clicked. I used the example provided in this link:

https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button

This works fine but the new tab opens to a fixed URL. So added a preferences page using the code provided in this link:

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Implement_a_settings_page

Now I'm able to save a URL in the preference page of the extension and the saved URL can be verified in the Extension Storage, here is an image showing it:

function openPage() {
    browser.tabs.create({
        url: "https://www.google.com"
    });
}

browser.browserAction.onClicked.addListener(openPage);

function onError(error) {
    console.log(`Error: ${error}`);
}

function onGot(item) {
    let preference_url = "https://www.google.com";
    if (item.preference_url) {
        preference_url = item.preference_url;
    }
    browser.storage.local.set({ type : preference_url });
}

let getting = browser.storage.sync.get("preference_url");
getting.then(onGot, onError);

On the third line I have url: "https://www.google.com" but I would like to use the value in the extension storage.

Just some sailboat · Accepted Answer · 2021-05-31T07:30:20.483

2

Since you have the onGot(item) function working. You should give your preference_url a name to be traced from.

As you can see, when you inspect the [ Extension Storage ]. The preference_url is stored in a key named as type.

So, you should give it a name like preferred_URL or other name for easy tracking.

function onGot(item) {
    let preference_url = "https://www.google.com";
    if (item.preference_url) {
        preference_url = item.preference_url;
    }
    browser.storage.local.set({ "preferred_URL" : preference_url });
}

Alright, it seems like a bit of work is needed before we can access the value of preferred_URL.

function openPage() {
  // <...>.storage.local.get is an async function,
  // we need wrap our function below it
  browser.storage.local.get(['preferred_URL'], function(result) {
    console.log(result);
    browser.tabs.create({
      // The key in result.key means the name of the "key" holding the value.
      "url": result.preferred_URL
    })
  });
}

edited May 31 '21 at 07:30

answered May 31 '21 at 04:16

Just some sailboat

321
2
10

Thank you (Just some sailboat). I really appreciate your help. I made the changes exactly as you suggested. Unfortunately it doesn't work. I see the following error at the bottom of the browser console which I hope will give a clue. "Type error for parameter createProperties (Error processing url: Expected string instead of {}) for tabs.create" – Andy Bajka May 31 '21 at 05:31
@AndyBajka Hmm that's strange. Is the `preference_url` showing up in the Extension Storage as normal? – Just some sailboat May 31 '21 at 05:49
Yes the Extension Storage has the correct value which I set in the preferences of the extension. – Andy Bajka May 31 '21 at 05:56
You might like to look at this link which describes the same issue. I tried implementing the first answer, but could not get it to work: https://stackoverflow.com/questions/55542155/unable-to-pull-data-from-browser-storage-local-get – Andy Bajka May 31 '21 at 05:58
@AndyBajka Alright I tried to replicate the issue, and this solution worked. Please check the updated answer. – Just some sailboat May 31 '21 at 07:07
The updated code now works perfectly, I really appreciate your time on this. – Andy Bajka May 31 '21 at 20:50

Firefox extension how to get extension storage value

1 Answers1