Uncaught TypeError: Cannot read property 'sync' of undefined in chrome extension (manifest v3)

Question

I'm trying to integrate a switch toggle button into my Chrome extension (manifest version 3). Yet get an error.

The code basis for this is based on the following link: Chrome Extension set toggle switch state in all tabs

I get the following error message:

Uncaught TypeError: Cannot read property 'sync' of undefined at content.js:5

And yes, "storage" is set in the manifest.json and the extension was also reloaded and uninstalled as a test.

It seems that I generally cannot access chrome.storage there. Is it possibly because the content.js is injected? Or maybe do i need to use the message passing API for that purpose ?

popup.js

function setToggleState() {
    chrome.storage.sync.get('isExtensionActive', storage => {
        chrome.storage.sync.set({
            isExtensionActive: !storage.isExtensionActive,
        });
    });
}

document.addEventListener('DOMContentLoaded', function () {
    var toggleBtn = document.getElementById('toggle-btn');

    toggleBtn.addEventListener('click', function () {
        setToggleState();
        // here comes my code to set/toggle button text (on|off)
    });
})

inject.js

function injectScript(file_path, tag) {
    var node = document.getElementsByTagName(tag)[0];
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', file_path);
    node.appendChild(script);
}

injectScript(chrome.runtime.getURL('/components/content/content.js'), 'body');

content.js

chrome.storage.sync.get('isExtensionActive', storage => {
    toggleSomething(storage.isExtensionActive);
});

chrome.storage.onChanged.addListener(changes => {
    if (changes.isExtensionActive) {
        toggleSomething(changes.isExtensionActive.newValue);
    }
});

function toggleSomething(state) {
    console.log('new state:', state);
    document.body.className = "state_" + state;

    chrome.action.setBadgeText({
        text: (state ? 'off' : '')
    });
}

manifest.json

{
    "manifest_version": 3,
    "name": "example",
    "version": "0.0.1",
    "description": "example",
    "short_name": "example",
    "permissions": ["tabs", "activeTab", "declarativeContent", "storage", 
    "unlimitedStorage", "contextMenus", "alarms", "notifications"],
    "host_permissions": ["<all_urls>"],
    "content_scripts": [{
        "matches": ["https://example.com/*"],
        "css": ["/components/popup/popup.css", "/components/content/content.css"],
        "js": ["/components/popup/popup.js", "/components/content/inject.js"],
        "all_frames": true,
        "run_at": "document_end"
    }],
    "web_accessible_resources": [{
        "resources": ["/components/popup/popup.js", "/components/content/inject.js", 
"/components/content/content.css", "chrome-extension://EXAMPLE-ID/content.css", 
  "/components/content/content.js", "chrome-extension://EXAMPLE-ID/content.js"],
        "matches": ["<all_urls>"]
    }],
    "options_ui": {
        "page": "/components/options/options.html",
        "open_in_tab": false
    },
    "action": {
        "default_title": "example title",
        "default_popup": "/components/popup/popup.html",
        "default_icon": {
            "16": "icons/icon16.png",
            "19": "icons/icon19.png",
            "32": "icons/icon32.png",
            "48": "icons/icon48.png",
            "128": "icons/icon128.png"
        }
    }
}

Answer 1

add the "storage" permission:

{
  ...
,
  "permissions": ["storage"]
}