javascript - Chrome 扩展程序 : detect headers after reload

Question

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

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

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

以下是刷新页面后立即得到的示例:

这是我的代码:

/* 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 的回调中，但在这种情况下我输了(就像我重置缓冲区的情况一样)其中一些是因为某些 header 似乎是在 onUpdated 事件触发之前收到的。

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

Answer 1

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

对选项卡的每组请求都从加载顶级框架开始。您可以通过检查是否req.type == 'main_frame'来检测此类请求。

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