webRequest API：如何获取新请求的requestId？ [英] webRequest API: How to get the requestId of a new request?

问题描述

chrome.webRequest API具有请求ID的概念（来源： Chrome webRequest文档）：
$ b

请求ID

每个请求由请求ID标识。此ID在浏览器会话和扩展的上下文中是唯一的。它在请求的生命周期中保持不变，并可用于匹配相同请求的事件。请注意，在HTTP重定向或HTTP身份验证的情况下，多个HTTP请求会映射到一个Web请求。

您可以使用它来关联甚至跨重定向请求。但是，如何通过 fetch 或 XMLHttpRequest ？

开始新的请求时，

到目前为止，我还没有找到比使用请求的URL作为新请求和requestId之间的初始链接的方法更好的方法。但是，如果有相同资源的重复请求，这是不可靠的。

问题：

• 如果您发出新请求（使用 fetch 或 XMLHttpRequest ），您如何可靠地访问requestId？


• 获取API或XMLHttpRequest API是否允许访问requestId？

我想要做的是使用webRequest API提供的功能修改单个请求，但我想确保不会意外修改其他未决请求。

解决方案

据我所知，在 fetch 或 XHMLHttpRequest API。我还没有意识到完全可靠的方法来获得requestId。

我最终做的是安装一个 onBeforeRequest 侦听器，存储requestId，然后立即再次删除侦听器。例如，它可能看起来像这样：

 函数makeSomeRequest（url）{
 
 let listener; 
 const removeListener =（）=> {
 if（listener）{
 chrome.webRequest.onBeforeRequest.removeListener（listener）; 
 listener = null; 
} 
}; 
 
 let requestId; 
 listener =（details）=> {
 if（！requestId&&urlMatches（details.url，url））{
 requestId = details.requestId; 
 removeListener（）; 
} 
}; 
 chrome.webRequest.onBeforeRequest.addListener（listener，{url：['< all_urls>']}）; 
 
 //安装其他侦听器，然后可以使用存储的requestId
 // ... 
 
 //最后，启动实际的请求，实例
 const promise = fetch（url）.then（doSomething）; 
 
 //并确保始终清理监听器
 promise.then（removeListener，removeLister）; 
} 
  

它并不完美，匹配URL是我留下的一个细节。您可以简单地比较 details.url 是否与 url 相同：

 函数urlMatches（url1，url2）{
 return url1 === url2; 
} 
  

请注意，不能保证您看到相同的网址，如果对 http：//some.domain.test 发出请求，您会看到 http：//some.domain.test/ （请参阅我的有关详细信息的其他问题）。或 http：// 可能已被替换为 https：// （这里我不确定，但它可能是因为其他扩展程序，例如 HTTPS Everywhere ）。

这就是为什么上面的代码只能被看作是想法的草图。在实践中，它似乎工作得很好，只要您不会向相同的URL发起多个请求。不过，我仍然有兴趣了解更好的解决问题的方法。

The chrome.webRequest API has the concept of a request ID (source: Chrome webRequest documention):

Request IDs

Each request is identified by a request ID. This ID is unique within a browser session and the context of an extension. It remains constant during the the life cycle of a request and can be used to match events for the same request. Note that several HTTP requests are mapped to one web request in case of HTTP redirection or HTTP authentication.

You can use it to correlate the requests even across redirects. But how do you initially get hold off the id when start a new request with fetch or XMLHttpRequest?

So far, I have not found anything better than to use the URL of the request as a way to make the initial link between the new request and the requestId. However, if there are overlapping requests to the same resource, this is not reliable.

Questions:

• If you make a new request (either with fetch or XMLHttpRequest), how do you reliably get access to the requestId?
• Does the fetch API or XMLHttpRequest API allow access to the requestId?

What I want to do is to use the functionality provided by the webRequest API to modify a single request, but I want to make sure that I do not accidentally modify other pending requests.

解决方案

To the best of my knowledge, there is no direct support in the fetch or XHMLHttpRequest API. Also I'm not aware of completely reliable way to get hold of the requestId.

What I ended up doing was installing a onBeforeRequest listener, storing the requestId, and then immediately removing the listener again. For instance, it could look like this:

function makeSomeRequest(url) {

  let listener;
  const removeListener = () => {
    if (listener) {
      chrome.webRequest.onBeforeRequest.removeListener(listener);
      listener = null;
    }
  };

  let requestId;
  listener = (details) => {
    if (!requestId && urlMatches(details.url, url)) {
      requestId = details.requestId;
      removeListener();
    }
  };
  chrome.webRequest.onBeforeRequest.addListener(listener, { urls: ['<all_urls>'] });

  // install other listeners, which can then use the stored "requestId"
  // ...

  // finally, start the actual request, for instance
  const promise = fetch(url).then(doSomething);

  // and make sure to always clean up the listener
  promise.then(removeListener, removeLister);
}

It is not perfect, and matching the URL is a detail that I left open. You could simply compare whether the details.url is identical to url:

function urlMatches(url1, url2) {
  return url1 === url2;
}

Note that it is not guaranteed that you see the identical URL, for instance, if make a request against http://some.domain.test, you will see http://some.domain.test/ in your listener (see my other question about the details). Or http:// could have been replaced by https:// (here I'm not sure, but it could be because of other extensions like HTTPS Everywhere).

That is why the code above should only be seen as a sketch of the idea. It seems to work good enough in practice, as long as you do not start multiple requests to the identical URL. Still, I would be interested in learning about a better way to approach the problem.

这篇关于webRequest API：如何获取新请求的requestId？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！