How to fix TypeError: browser.storage is undefined in chrome/firefox web extension?

Question

Note - this question is based off of this question (although it's not necessary to read the previous question): How to set value of textarea in different HTML file?

I have the following code, which is supposed to add a value into the local storage of firefox/chrome and then change the extension's UI (the code will differ slightly based upon which browser is being used, as of now, the code is for a extension in firefox):

function createSummaryBox(summary) {
    console.log("Setting textarea content to: " + summary);
    const currentSummary = {
        currentSummary: summary
    }
    browser.storage.local.set(currentSummary);
    window.location.href = '../summary_page/summary_page.html';
}

However, I get the following error whenever this function is called:

ReferenceError: browser.storage is not defined

How can I fix this error? I read through the MDN documentation on this method, so I'm not sure what I'm missing.

Gala

To use this API you need to include the "storage" permission in your manifest.json file. - did you do that? – Evanston

Oh whoops, I thought the permission was only necessary if you were trying to have over 5mb of local storage. – Gala

You must've read some different documentation on MDN then, because I see no reference to "5mb" anywhere in the storage documentation – Evanston

The 5MB limit you are talking about is the limit to the data held in chrome.storage.local, which you can also remove by adding the "unlimitedStorage" permission. Also, the documentation you read is probably developer.chrome.com/extensions/storage. – Wilkens

Duplicate of #46081784 – Simonson

Possible duplicate of How to check for "undefined" in JavaScript? – Snorkel

Answer 1

as comments suggest, you need to declare permission.
In manifest.json add:

"permissions": [
    "storage"
],

or add it to any existing permissions:

"permissions": [
  "activeTab",
  "storage"
],

Mozilla doc page
Chrome doc page

There are some posts saying the Storage API can't be used in Content scripts.
It's not true, Storage API can be used in any context of an extension. Content script, background script even extension service worker.

What we discuss here is Extension Storage APIs, or in WebExtension's documentation referred to as just Storage APIs.
Object is browser.storage or chrome.storage.

There is also Web Storage APIs, which is using object window.localStorage.
These two gets confused quite often.
window.localStorage can still be used on Content Scripts, but it's using the site's space there, while the rest of the extension, background script, options, are in extension space. On different domain, e.g. moz-extension://16d036aa-383d-4819-b50d-eec09739ff02/ vs https://example.com/

Zacharie

Can't be used in background script too? – Myel

It can. I wrote "can be used in content script" which was a reaction to some posts claiming it can't be used in Content scripts. I edited the response now, as it was indeed confusing. – Zacharie