未捕获承诺错误：缺少该标签的主机权限

问题描述

我在<all_urls>文件中声明了manifest.json权限，并且在需要时使用tabs.insertCSS()在页面内注入了一些CSS代码。我在firefox扩展调试器中遇到错误Uncaught (in promise) Error: Missing host permission for the tab，该如何解决？

{
  "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
  }
}

背景：

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

解决方法

看起来我通过在 webRequest.onCompleted 而不是 onBeforeRequest 中插入我的 CSS 来修复它：

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

缺点是页面没有样式。