在 Firefox 扩展中收到响应后使用 requestId 检索请求

Question

我正在使用 WebRequest 编写 Firefox 扩展。我的情况是，当我收到响应时，我想回头查找与此响应关联的请求以检索自定义请求 header。我现在的代码是这样的：

browser.webRequest.onBeforeSendHeaders.addListener(
    addCustomHeader, // here I add custom_header:value
    {urls: ["<all_urls>"]},
    ["blocking", "requestHeaders"]
  );

...
browser.webRequest.onHeadersReceived.addListener(
    process_response, // here I want to get back to the request and retrieve the custom header value
    {urls: ["<all_urls>"]},
    ["blocking", "responseHeaders"]
  );

custom_header 的值设置为全局变量，每个请求都会更改。当我收到 request_1 的响应时，我想从 process_response() 函数中的 request_1 中检索 header 值。但是，如果我直接使用该值，我发现它可能已被后续请求更改，例如 request_2 或 request_3.

我注意到响应有一个 requestId 属性，我想我可以用它来找到相应的请求。但是，我找不到任何告诉我如何操作的文档或示例。如果有任何提示，我将不胜感激！

Answer 1

使用全局地图变量：

const reqMap = (() => {
  const data = new Map();
  const MAX_AGE = 10 * 60e3; // 10 minutes 
  const cleanup = () => {
    const cutOff = performance.now() - MAX_AGE;
    data.forEach(({ time }, id) => time < cutOff && data.delete(id));
  };
  return {
    set(id, value) {
      cleanup();
      data.set(id, {value, time: performance.now()});
    },
    pop(id) {
      const {value} = data.get(id) || {};
      data.delete(id);
      return value;
    },
  };
})();

function onBeforeSendHeaders(details) {
  reqMap.set(details.requestId, {any: 'data'});
}

function onHeadersReceived(details) {
  const data = reqMap.pop(details.requestId);
  if (data) {
    // ............
  }
}

在 Firefox 扩展中收到响应后使用 requestId 检索请求

Retrieve a request using the requestId after the response is received in Firefox extension

google-chrome

firefox

google-chrome-extension

firefox-addon