chrome.webrequest.onCompleted 与 chrome.runtime.onMessage 比赛

Question

我有一个带有 background.js 的 Chrome 扩展程序，用于收集和存储有关页面的信息，

chrome.webRequest.onCompleted.addListener(
  function(details) {
  // compute a page hash etc, store it
  tabToHash[details.tabId] = hash;
  },
{
  urls: ['*://*/*.pdf'],
  types: ['main_frame']
}
);

并提供给请求它的扩展的任何其他部分（例如，内容脚本），

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.getInfo) {
      sendResponse({
        hash: tabToHash[sender.tab.id],
      });
    }
  });

现在在 onCompleted 完成之前触发 onMessage 会出现问题。

如何避免这种竞争情况？

---

编辑： 发送初始消息的内容脚本可能包含

chrome.runtime.sendMessage(
  {getInfo: true},
  function(response) {
  // do something with the response
  }
);

并且可以作为

插入manifest.json

"content_scripts": [
    {
      "matches": ["*://*/*.pdf"],
      "css": ["content.css"],
      "js": ["scripts/content.js"]
    }
  ]

Answer 1

• 通过添加
跟踪内容的加载状态

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    tabStatus[details.tabId] = 'loading';
  },
  {
    urls: ['*://*/*.pdf'],
    types: ['main_frame']
  }
);

和

tabStatus[details.tabId] = 'complete';

在chrome.webRequest.onCompleted.addListener

的结尾

• 有条件地延迟 onMessage 侦听器中的响应：

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.getInfo) {
      if (tabStatus[sender.tab.id] === 'complete') {
        // send immediately
        sendResponse({
          data: myData[sender.tab.id]
        });
      } else {
        // send later
        responseSender[sender.tab.id] = sendResponse;
        // returning `true` to indicate that we intend to send later,
        // cf. <https://developer.chrome.com/extensions/runtime#event-onMessage>
        return true;
      }
    }
  });

• 调用chrome.webRequest.onCompleted.addListener末尾存储的responseSender[sender.tab.id]:

if (responseSender[details.tabId]) {
  responseSender[details.tabId]({
    data: myData(details.tabId)
  });
  responseSender[details.tabId] = null;
}