消息传递内容脚本在使用“webRequest.onBeforeRequest（）”作为触发器时起作用，但在使用“webRequest.onCompleted（）”时不起作用

问：

我完成了我的第一个扩展，它按照我的编程工作，但是完成后，我意识到我在它的设计中犯了一个错误，目前它旨在在事件发生之前提醒我（），我希望在事件发生并完成后收到警报（）。webRequest.onBeforeRequest()webRequest.onCompleted()

我尝试在其他地方进行更改和必要的调整，但它只是不断抛出错误。我尽可能多地删除了不相关的代码，以保持我的示例简短。我将不胜感激任何帮助。webRequest.onBeforeRequest()webRequest.onCompleted()

清单文件：

{
    "name": "shell",
    "manifest_version": 2,
    "version": "1.0",

    "background": {"scripts": ["background.js"]},
    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["content.js"]
        }
      ],
    "permissions": ["tabs","activeTab", "webRequest", "<all_urls>"]
}

内容.js文件：

"use strict";

browser.runtime.onMessage.addListener((request) => {
  console.log("Message from the background script:");
  console.log(request.greeting);
  return Promise.resolve({ response: "Hi from content script" });
});

background.js 文件：

activeTab = browser.tabs.query({currentWindow: true,active: true,})  //tabs.sendMessage must always send a message to a specific tab. Use this to get a tab
function onError(error){console.log("error")}
function sendMessageToTabs(activeTab) {
      browser.tabs.sendMessage(activeTab.tabId, { greeting: "Hi from background script" })
         .then((response) => {
            console.log("Message from the content script:");
            console.log(response.response); 
         })
         .catch(onError);
    }
// Trigger the messaging event when wiki/vihicle is visited
browser.webRequest.onBeforeRequest.addListener(sendMessageToTabs, {urls:["https://en.wikipedia.org/wiki/Vehicle"]});  

以上工作得很好，当我访问 wiki/vehicle 时，内容脚本会在控制台上响应后台脚本：

Message from the content script:
Hi from content script

我哪里出错了

但是当我尝试只返工 background.js 文件时，它使用 而不是 ，我的扩展停止工作。我收到错误：webRequest.onCompleted()webRequest.onBeforeRequest

Error: Type error for parameter tabId (Integer -1 is too small (must be at least 0)) for tabs.sendMessage.

重新设计的 background.js 文件是：

activeTab = browser.tabs.query({currentWindow: true,active: true,})  //tabs.sendMessage must always send a message to a specific tab. Use this to get a tab
function onError(error){console.log("error")}
function sendMessageToTabs(activeTab) {
      browser.tabs.sendMessage(activeTab.tabId, { greeting: "Hi from background script" })
         .then((response) => {
            console.log("Message from the content script:");
            console.log(response.response);     //response is the object passed back by the content script
         })
         .catch(onError);
    }
browser.webRequest.onCompleted.addListener(sendMessageToTabs, {urls:["https://en.wikipedia.org/wiki/Vehicle"]});   // this is used to trigger the messaging event

编辑1：

根据@wOxxOm建议，再次阅读文档后，我添加了文件如下所示的属性：types['main_frame']background.js

activeTab = browser.tabs.query({currentWindow: true,active: true,})  //tabs.sendMessage must always send a message to a specific tab. Use this to get a tab
function onError(error){console.log("error")}
function sendMessageToTabs(activeTab) {
      browser.tabs.sendMessage(activeTab.tabId, { greeting: "Hi from background script" })
         .then((response) => {
            console.log("Message from the content script:");
            console.log(response.response);     //response is the object passed back by the content script
         })
         .catch(onError);
    }
browser.webRequest.onCompleted.addListener(sendMessageToTabs, {urls:["https://en.wikipedia.org/wiki/Vehicle"], types['main_frame']});   // this is used to trigger the messaging event

但我仍然收到此错误：Error: Type error for parameter tabId (Integer -1 is too small (must be at least 0)) for tabs.sendMessage.