打开扩展程序的弹出窗口时，“无法建立连接”

Question

我正在开发我的第一个firefox扩展，并且遇到内容脚本和后台脚本之间的通信问题。

提到的插件的一般想法是，只要某个域中的站点完成了其所有内容的加载，便会在弹出窗口中检索其一些变量/对象并进行处理。网站加载完成后，我需要等待弹出窗口显示其内容，以确保其内容可供检索。一切正常，但是有时（很难在此处找到模式），我收到以下错误：

Error: Could not establish connection. Receiving end does not exist.

该错误最常发生在站点完成加载并尝试打开弹出窗口时。在网站加载过程中打开小狗时，一切正常（browser.tabs.onUpdated.addListener等待网站并启动通信）。我发现棘手的是在站点加载期间或加载完成后可以打开弹出窗口的情况。在站点加载期间打开时，它必须等待发送消息。如果在站点加载后打开，则无需任何检查即可开始通信。关键是弹出事件browser.tabs.onUpdated.addListener和browser.tabs.onActivated.addListener仅在打开弹出窗口时才处于活动状态。我想我需要一个独立于弹出窗口的监听器。

site.js

---

window.addEventListener('load', function() {
  var dataObject = {};
  browser.runtime.onMessage.addListener(request => {

    // dataObject  creation

    return Promise.resolve({ response: dataObject });
  });

  setTimeout(function() {}, 500);
});

popup.js

---

(function() {
    var responseObj = {};

    function onError(error) {
      console.log(`${error}`);
    }

    function sendMessageToTabs(tabs) {
      for (let tab of tabs) {
        browser.tabs
          .sendMessage(tab.id, { message: 'requestdata' })
          .then(response => {
            responseObj = response.response;

            // responseObj processing here

          })
          .catch(onError);
      }
    }

    function connectToContent() {
      browser.tabs
        .query({
          currentWindow: true,
          active: true,
          status: 'complete'
        })
        .then(sendMessageToTabs)
        .catch(onError);
    }

    browser.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      if (tab.status == 'complete' && tab.active) {
        connectToContent();
      }
    });

    browser.tabs.onActivated.addListener(connectToContent());

  })();