Uncaught (in promise) Error: Missing host permission for the tab

user_14122919 0
Viewed 583

I have declared <all_urls> permission inside my manifest.json file and I'm using the tabs.insertCSS() to inject some css code inside a page when needed. I'm facing the error Uncaught (in promise) Error: Missing host permission for the tab in firefox extension debugger, how I can fix?

{
  "manifest_version": 2,
  "name": "myExtension",
  "description": "",
  "default_locale": "en",
  "permissions": [
    "<all_urls>",
    "tabs",
    "activeTab",
    "contextMenus",
    "notifications",
    "webRequest",
    "webRequestBlocking"
  ],
  "icons": {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png"
  },
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  }
}

background:

const checkRequest = (details) => {
  console.log(details)
  var blocked = ["https://www.example.com/", "https://www.example2.com/"]
  var isBlocked = blocked.includes(details.url)
  console.log(isBlocked)
  return { cancel: isBlocked }
}

const redirectAfterBlock = (details) => {
  console.log(details)
  if( details.error == "NS_ERROR_ABORT" ){
    browser.tabs.insertCSS({
      file: browser.runtime.getURL('content-replace.css')
    })
    console.log("blocked")
  }
}

browser.webRequest.onBeforeRequest.addListener( 
  checkRequest, 
{
  urls: ["<all_urls>"], 
  types: ["main_frame"]
},["blocking"])

browser.webRequest.onErrorOccurred.addListener( 
  redirectAfterBlock,
{  
  urls: ["<all_urls>"]
})
firefox-addon-webextensions css manifest
1 Answers

Looks like I fixed it by inserting my CSS in webRequest.onCompleted instead of onBeforeRequest:

browser.webRequest.onCompleted.addListener(
  function (details) {
    extensionApi.tabs
      .insertCSS(
        details.tabId, 
        { file: "content.css" }
      )
  },
  { urls: ["<all_urls>"] }
);

Downside is there's a flash of unstyled page.

user_733230
Related