Chrome扩展程序：重新加载后检测标头

Question

我需要从浏览器中检测请求/响应标头。我将这些标题存储在稍后将使用的临时变量中。

我还希望在重新加载选项卡中的页面时重置这些变量。

我想我通过指南和其他人的答案找出了命令。无论如何，我看到当我想检测页面的重新加载时，重新加载事件似乎在再次检索页面的一些请求标题后被触发。

以下是刷新页面后立即获得的示例：

这是我的代码：

/* Listener to the page for reloading */
chrome.tabs.onUpdated.addListener( function(tabId,changeInfo,tab){
    //Check changeInfo.url: check existence - if it does, then that means that the url was changed and thus not a refresh. 
    console.log(changeInfo)
    if (changeInfo.url === undefined) {
        //reset the variables for a certain tab id on its refresh
        if (changeInfo.status == 'loading') {
            console.log('Refresh happened for tab: '+ tabId)
            //global variables
            requestHeaders = {}
            responseHeaders = {}
        }
    }
});

/**
 * Stores HTTP request headers into an object with TabId and URI as key.
*/
chrome.webRequest.onBeforeSendHeaders.addListener(
    function(req){
        var tabId = req.tabId;
        /* header memorization */
        console.log( tabId, req.url  );

    });

我意识到这些调用是异步的并且要连接它们我应该在onBeforeSendHeaders的回调中调用tabs.onUpdated，但是在这种情况下我输了（就像我重置了其中一些因为某些标题似乎是在触发onUpdated事件之前收到的。

如何捕获页面加载时的所有HTTP请求？也就是说，有没有办法在页面开始接收之前附加标题捕获函数？

Answer 1

根本不要使用chrome.tabs事件。渲染（chrome.tabs）与获取资源（chrome.webRequest）完全无关。

选项卡的每组请求都以加载顶级框架开始。您可以通过检查req.type == 'main_frame'。

来检测此类请求

请注意，您的代码仅适用于一个标签。您应该使用tabId作为键将数据存储在字典中，并在触发chrome.tabs.onRemoved事件时删除字典的值。