Question

我正在尝试修改图像的响应标头以节省带宽并改善响应时间。这些是我的文件：

的manifest.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多次触发，我可以看到新的标题。问题是，当我打开页面的chrome开发人员工具时，在网络选项卡中，我看到图像的相同原始标题。还要注意extraInfoSpec中的阻塞值，因此应该是同步的。有人会发生同样的事吗？

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

Answer 1

经过一些研究，结果证明我以前的答案是错误的。这实际上是一个Chrome错误 - Chrome的DevTools网络面板只会显示从服务器收到的实际标头。但是，您注入的标题仍然会产生预期效果。

其他扩展程序开发人员确定了问题here，并提供了指向Chrome defect report

的链接

Answer 2

这里有两个相关问题。

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

第二个（这实际上更重要！），修改缓存标题（例如Cache-control）对Chromium的缓存行为无影响，因为缓存指令已经存在在webRequest API收到标题通知时处理。

请参阅http://crbug.com/355232 - “在webRequest.onHeadersReceived中设置缓存标头不会影响缓存”

使用onHeadersReceived缓存所有图像

2 个答案: