新选项卡上的 Chrome.runtime.onMessage.addListener 未收到来自 popup.js 的消息答案

【问题标题】：Chrome.runtime.onMessage.addListener on new tab not receiving message from popup.js新选项卡上的 Chrome.runtime.onMessage.addListener 未收到来自 popup.js 的消息
【发布时间】：2015-06-11 02:27:14
【问题描述】：

我在 popup.js 中有以下代码，它响应按钮按下以获取所有选项卡，创建一个新选项卡 (template.html)，并将选项卡作为数组发送到新选项卡。稍后我会删除当前的标签页并在一页上显示链接以节省空间（这就是扩展的想法）。

function saveAll() {
  var openTabs = [];

  chrome.tabs.query({}, function(tabs) {
    for (var i = 0; i < tabs.length; i++) {
      openTabs[i] = tabs[i];
    }

    createSavedPage(openTabs);
  });
}

function createSavedPage(tabsToSave) {
  chrome.tabs.create({
      "url": chrome.extension.getURL("template.html"),
      "active": false
    },
    function(tab) {
      sendListToPage(tab, tabsToSave);
    }
  );
}


function sendListToPage(tab, tabsArray) {
  chrome.tabs.sendMessage(tab.id, {
    "action": "fill-list",
    "data": tabsArray
  });
}


var saveAllButton = document.getElementById("select-all-tabs");
saveAllButton.addEventListener("click", saveAll);

创建的选项卡包含一个 template.js 文件：

function fillList(array) {
  var list = document.getElementById("link-list");
  for (var item in array) {
    //Something
  }
}

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {

    if (request.action == "fill-list") {
      var data = request.data;
      fillList(data);
    }
  }
);

当我创建新标签时，消息是从扩展程序发送的，但从未收到。是什么导致了这个问题？

【问题讨论】：

可能消息发送时新标签的监听器尚未创建。

标签： javascript google-chrome google-chrome-extension tabs

【解决方案1】：

我还认为消息是在创建的选项卡完全加载之前发送的。所以我通过添加一个 chrome.tabs.onUpdated 监听器更改了 popup.js：

function createSavedPage(tabsToSave) {
  chrome.tabs.create({
      "url": chrome.extension.getURL("template.html"),
      "active": false
    },
    function(tab) {
      chrome.tabs.onUpdated.addListener(function(tabId, info)       {
        if (tabId == tab.id && info.status == "complete")
          sendListToPage(tab, tabsToSave);
      });
    }
  );
}

而且它似乎解决了这个问题。还有更好的方法吗？

【讨论】：