内容脚本未从后台脚本接收消息 (Mv3)

Question

我制作了这个简单的消息传递示例 chrome 扩展，其中一条消息应该从后台脚本发送到内容脚本。不幸的是，内容脚本似乎没有收到消息。

后台脚本：

// background.js

function sendMessage(tabId, hostname) {
    console.log("Sending message to tabId: ", tabId)
    chrome.tabs.sendMessage(tabId, {hostname: hostname}, (resp) => {console.log("response: ", resp)});
}

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.url) {
        console.log(changeInfo.url)
        var hostname = new URL(changeInfo.url).hostname;
        sendMessage(tabId, hostname)

    }
});

内容脚本：

// content.js

console.log("injected");

function logMessage(message) {
    console.log("Message from background: ", message)
}

chrome.runtime.onMessage.addListener(
    (request, sender, sendResponse) => {
        logMessage(request.hostname)
    }
);

清单 (v3):

// manifest.json

{
  "name": "Messaging test",
  "description": "",
  "version": "1.0",
  "manifest_version": 3,

  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["tabs"],
  "content_scripts": [
    {
      "matches": [
        "<all_urls>",
        "https://*/*",
        "http://*/*"
      ],
      "js": ["content.js"]
    }
  ]
}

我确保重新加载扩展程序并使用新选项卡进行测试。

这是后台脚本的开发控制台输出： dev console output of background script

这是内容脚本的开发控制台输出（注入 google.com）： dev console output of content script

因此，内容脚本被注入，但没有收到来自后台脚本的消息。我记得这是在 manifest v2 中工作的，所以我不确定出了什么问题。有什么想法吗？

Answer 1

content脚本运行 DOMCONTENTLOAD在默认负载之后，但是onUpdated事件在Tab开始加载a URL时会触发事件，因此，当称为sendMessage时，尚无内容脚本选项卡

一种解决方案是在选项卡开始加载之前使用 run_at 键启动内容脚本：

  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"],
    "run_at": "document_start"
  }],

另一种解决方案是反转通信方向，让内容脚本调用 sendMessage，而后台脚本 return onMessage 中的数据，参见 messaging。

内容脚本未从后台脚本接收消息 (Mv3)

Content script not receiving message from background script (Mv3)

javascript

google-chrome-extension