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.

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

Storage API can be used in content scripts.
Don't get confused, it's not an issue here, as it is in another Question linked in comments as possible duplicate, which it's not.