google-chrome-extension - 使用 onHeadersReceived 缓存所有图像

Question

我正在尝试修改图像的响应 header 以节省带宽并缩短响应时间。这些是我的文件:

list .json

{
    "name": "Cache all images",
    "version": "1.0",
    "description": "",
    "background": {"scripts": ["cacheImgs.js"]},
    "permissions": [ "<all_urls>", "webRequest", "webRequestBlocking" ],
    "icons": {"48": "48.png"},
    "manifest_version": 2
}

cacheImgs.js

var expDate = new Date(Date.now()+1000*3600*24*365).toUTCString();
var newHeaders =
    [{name : "Access-Control-Allow-Origin", value : "*"},
    {name : "Cache-Control", value : "public, max-age=31536000"},
    {name : "Expires", value : expDate},
    {name : "Pragma", value : "cache"}];
function handler(details) {   
    var headers = details.responseHeaders;
    for(var i in headers){
        if(headers[i].name.toLowerCase()=='content-type' && headers[i].value.toLowerCase().match(/^image\//)){
            for(var i in newHeaders) {
                var didSet = false;
                for(var j in headers) {                                                                                               
                    if(headers[j].name.toLowerCase() == newHeaders[i].name.toLowerCase() ) {
                        headers[j].value = newHeaders[i].value;
                        did_set = true; break;
                    }
                }
                if(!didSet) { headers.push( newHeaders[i] ); } 
            }
            break;
        }
    }
    console.log(headers);
    return {responseHeaders: headers}
};
var requestFilter = {urls:['<all_urls>'], types: ['image'] };
var extraInfoSpec = ['blocking', 'responseHeaders'];

chrome.webRequest.onHeadersReceived.addListener(handler, requestFilter, extraInfoSpec);

console.log 多次触发，我可以看到新的 header 。问题是，当我打开页面的 chrome 开发人员工具时，在网络选项卡中，我看到了相同的图像原始标题。还要注意 extraInfoSpec 中的阻塞值，因此它应该是同步的。有人遇到同样的情况吗？

更新 现在我在网络面板中看到修改后的响应 header 。 但是现在我只能从发起者是网页本身的图像中看到。启动器为jquery.min.js的图片不会改变响应头

Answer 1

这里有两个相关的问题。

首先，开发人员工具中显示的 header 是从服务器接收到的 header 。扩展修改不会显示 ( http://crbug.com/258064 )。

其次(这实际上更重要!)，修改缓存 header (例如Cache-control)对 Chromium 的缓存行为没有影响，因为当 webRequest API 收到 header 通知时，已经处理了缓存指令。

参见 http://crbug.com/355232 - “在 webRequest.onHeadersReceived 中设置缓存 header 不会影响缓存”