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

Question

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>"]
})

Answer 1

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.