javascript - 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;
}