消息内容脚本在使用“webRequest.onBeforeRequest()”作为触发器时有效，但在使用“webRequest.onCompleted()”时无效

Question

我写完了我的第一个扩展，它按照我编程的方式工作，但是完成后，我意识到我在其设计中犯了一个错误，目前它的设计是在事件发生之前提醒我（

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

Content.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

我哪里出错了

但是当我尝试only修改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.

Answer 1

因此，在重新阅读了所有 wOxxOm 评论后，尤其是他的最后一条评论。我开始尝试随机 URL，例如 BBC 和麦当劳等。它们都有效。我什至不需要指定

type: ["main_frame"]

。我也在我的最终网站上尝试过，它也有效。 看来，我的失败归结为使用维基百科作为示例来测试我的代码，这是我最初选择唯一的 SO 的“可复制”示例约定。吸取教训。

最终的Background.js是：

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://final/web/site/here.com"]});  //This time it does not send `-1`

我只是想感谢w0xx0m，我怀疑如果没有他们的耐心与我来回，我可能会抓住，干杯