Here is my background script;

/**
 * CSS to hide everything on the page,
 */
const hidePage = `body > : {
    display: none;
  }`;


/**
 * When a tab is loaded, check if the plugin is on. If the plugin is on, check if the url matches the page.
 * If it does, block it
 */
browser.tabs.onActivated.addListener(function (activeInfo) {
    browser.storage.local.get("onOff")
        .then((result) => {
            if (Object.entries(result).length === 0 || !result.onOff.value) {
                return;
            }
            browser.tabs.query({ currentWindow: true, active: true }).then((tabs) => {
                let tab = tabs[0];
                console.log(tab.url);
                browser.tabs.insertCSS({code: hidePage})
            }, console.error)
        });
});

and here is my manifest.json

{

    "manifest_version": 2,
    "name": "Beastify",
    "version": "1.0",
  
    "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
    "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
    "icons": {
      "48": "icons/beasts-48.png"
    },
  
    "permissions": [
      "tabs",
      "activeTab",
      "storage"
    ],
  
    "browser_action": {
      "default_icon": "icons/beasts-32.png",
      "default_title": "BlockIt",
      "default_popup": "popup/blockit.html"
    },

    "background": {
      "scripts": ["background_scripts/blocker.js"]
    },
  
    "web_accessible_resources": [
      "beasts/frog.jpg",
      "beasts/turtle.jpg",
      "beasts/snake.jpg"
    ]
  
  }

There is some superfluous stuff there because I am building my add-on from a Firefox extension tutorial.

The exact code that is causing the Uncaught (in promise) Error: Missing host permission for the tab is

browser.tabs.insertCSS({code: hidePage})

line 23 of blocker.js

I believe I do have the correct permissions to insert css from this background script, so I cannot figure out why this error is occurring. I also tried to execute a content script instead of running the line above that is throwing the error, but that failed with the same error.

CodePudding user response：

activeTab works only when the user explicitly invokes your extension as described in the documentation for WebExtensions and Chrome extensions). Evidently, its name is highly misleading: it should have been something like activeTabWhenInvoked.

In order to access any tab without prior interaction with your extension you'll have to add broad host permissions in manifest.json:

  "permissions": ["<all_urls>"],

Now there's no need for activeTab, but you may still want to keep tabs permission for Firefox older than 86, see the note in the documentation.

P.S. It's better to remove the listener altogether when onOff is false so the extension doesn't run in vain. You can do it by using a global named function for the onActivated listener and observing the changes to onOff via browser.storage.onChanged event.