javascript - Modify headers on onHeadersReceived

Question

In my chrome extension I need to add a line to header of every site browsed. In background.js file I add such code:

var responseListener = function(details){
    var rule = {
        "name": "Access-Control-Allow-Origin",
        "value": "*"
    };
    details.responseHeaders.push(rule);
    return {responseHeaders: details.responseHeaders};
};

 chrome.webRequest.onHeadersReceived.addListener(responseListener,
     {urls: [   "*://*/*" ] },
     ["blocking", "responseHeaders"]);

While debugging the handler is called and newly added header successfully passes any filters I have found upper in the stack. But it is not seen on network tab's Response headers section and does not effects any code. I use these permissions:

"tabs","<all_urls>", "http://*/*" ,"webRequest","webRequestBlocking", "webNavigation"

Is there a new policy or API changed which disallow to do such things or there is some bug in my 10 lines of a code?

Answer 1

The Network tab of the Chrome Developer tools does not show the modifications from extensions. See https://crbug.com/258064

If you wish to see whether your extension has successfully modified a request, visit chrome://net-internals/#events, click on a request of type URL_REQUEST and look for URL_REQUEST_DELEGATE entries, e.g. URL_REQUEST_FAKE_RESPONSE_HEADERS_CREATED (this is an example of a log entry generated via the chrome.declarativeWebRequest API) or "delegate_info = "extension [extension name]" (generated by chrome.webRequest).