使用onHeadersReceived缓存所有图像 [英] Cache all images with onHeadersReceived

问题描述

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

I'm trying to modify the response headers of the images to save bandwith and improve the response time.These are my files:

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中的阻塞值，因此应该是同步的.有人会发生同样的事情吗?

the console.log fires many times and i can see the new headers. The problem is that when I open the chrome developer tools of the page, in the network tab, i see the same original headers of the images. Also note the blocking value in the extraInfoSpec, so that's supposed to be synchronous. Does someone happen the same?

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

UPDATE Now I see the modified response headers in the network panel. But now I only see from images whose initiator is the webpage itself. The images whose initiator are jquery.min.js doesn't change the response headers

推荐答案

经过一些研究，结果证明我之前的答案是错误的.这实际上是一个Chrome错误-Chrome的DevTools网络面板将仅显示从服务器收到的 actual 标头.但是，您注入的标题仍将具有预期的效果.

After doing some research, it turns out my previous answer was wrong. This is actually a Chrome bug - Chrome's DevTools Network panel will only show the actual headers received from the server. However, the headers you've injected will still have the desired effect.

另一位扩展程序开发人员在此处并提供了指向 Chrome缺陷报告

Another extension developer identified the issue here and provided a link to the Chrome defect report

这篇关于使用onHeadersReceived缓存所有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！