javascript - Chrome 扩展程序可阻止图像的下载+加载

Question

这是最流行的内容阻止 Chrome 扩展之一中的代码。该应用程序应该阻止图像的下载，并且在这方面做得很好，但是假设我访问一个包含 70MP 图像的页面，它仍然需要一段时间才能完成页面加载，为什么？

if (!localStorage.on) {
    localStorage.on = '1';
}

if (localStorage.on == '1') {
    chrome.browserAction.setIcon({path: "images/icon19.png"});
} else {
    chrome.browserAction.setIcon({path: "images/icon19-disabled.png"});
}

chrome.browserAction.onClicked.addListener(function(tab) {
    if (localStorage.on == '1') {
        chrome.browserAction.setIcon({path: "images/icon19-disabled.png"});
        localStorage.on = '0';
    } else {
        chrome.browserAction.setIcon({path: "images/icon19.png"});
        localStorage.on = '1';
    }
});

chrome.webRequest.onBeforeRequest.addListener(function(details) {
    if (localStorage.on == '1') {
        return {redirectUrl: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg=="};
    }
}, {urls: ["http://*/*", "https://*/*"], types: ["image", "object"]}, ["blocking"]);

chrome.tabs.onUpdated.addListener(function() {
    if (localStorage.on == '1') {
        chrome.tabs.insertCSS(null, {code: "img{visibility: hidden;}", runAt: "document_start"});       
    }
});

Answer 1

该扩展仅拦截“image”和“object”类型的请求。这意味着它只会阻止加载嵌入页面的图像。

如果您尝试直接使用其 URL 加载图像(例如您在评论中提供的图像 http://www.conceptcarz.com/images/Jaguar/Jaguar-F-Pace-First-Edition-2015-Image-03.jpg )，则该图像将被视为主要文件。这意味着使用 "main_frame" 的资源类型请求它，并且扩展不会阻止其加载。它只会通过将 "img{visibility: hide;}" 样式插入 Chrome 自动为图像生成的简单 HTML 页面来隐藏它。

您可以通过检查 Chrome 中的网络流量来验证这一点(Ctrl+Shift+I > 顶部网络 > Ctr+Shift + R)。当直接加载图像时，它不会列在 Img 部分中，而是列在 Doc 部分中。

可以修改扩展程序，通过添加 onBeforeSendHeaders 监听器并根据 Content-Type header 的值阻止所有流量，即使直接打开，也可以阻止加载图像。我不确定这样的功能有何用处(除非可能是为了防止无用的数据使用)。