javascript - 为什么我的 Chrome 扩展内容脚本的运行时没有任何 onMessage 仅连接和发送消息

Question

我已经为此苦苦挣扎了好几天，我的扩展程序的内容脚本似乎缺少权限或其他东西，我搜索了 API 文档，但什么也没找到。

如果我使用以下代码从内容页面发送消息，而不是向内容页面发送消息，则消息传递有效:

从后台页面:

var messageCallback = function (e) {
    var nodeMessage = JSON.parse(e.data);

    switch (nodeMessage.ExecutionType) {
        case 0:
            chrome.tabs.create({ url: nodeMessage.Url }, function (tab) {

                //injects injected.js NOT messages.js
                injectCode(tab.id);

                chrome.tabs.sendMessage(tab.id,nodeMessage);
            });
        break;
//some other switch cases...

来自内容脚本:

chrome.runtime.onMessage.addListener(function (message) {
    console.log('Message received');

    var event = new CustomEvent("foo_receive", {
        detail: message,
        bubbles: true
    });

    console.log('Event sent');
    document.dispatchEvent(event);
});

我的 list 如下所示:

{
  "manifest_version": 2,

  "name": "extesnion_name",
  "short_name": "thing",
  "description": "long sentence",
  "version": "1.0.0",
  "icons": { "16": "icon16.png",
             "48": "icon48.png",
             "128": "icon128.png" },
  "permissions": ["background", "tabs", "<all_urls>" ],
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "content_scripts":[
      {
         "matches": ["<all_urls>"],
         "js": ["messages.js"],
      }
  ],
  "web_accessible_resources": ["injected.js"]
}

在 Chrome 控制台中显示以下内容:

内容脚本:

和背景页:

Answer 1

你还没有向我们展示，但我猜你的后台脚本已经展示了

function injectCode(tabId) {
    chrome.tabs.executeScript(tabId,{"file":"contentScript.js"});
}

问题是这个函数是异步的。浏览器不会等待它完成，而是继续执行后台脚本，该脚本将消息发送到不存在的内容脚本。然后 injectCode 完成，但为时已晚。

Here是一个很好的引用。简而言之，您需要使用callback选项，这样您最终会得到

chrome.tabs.executeScript(tabId,{"file":"contentScript.js"},function() {
    chrome.tabs.sendMessage(tabId,nodeMessage);
});

但现在您需要重做 injectCode 函数来跟踪 nodeMessage。