Question

以下是代码中最受欢迎的内容阻止Chrome扩展程序之一。该应用程序应该阻止图像的下载，并做得很好，但是让我说我去访问一个带有70万像素的页面，它还需要一段时间来完成加载页面，为什么？

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"类型的请求。这意味着它只会阻止加载嵌入页面的图像。

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

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

即使通过添加onBeforeSendHeaders侦听器并根据Content-Type标头的值阻止所有流量直接打开，也可以修改扩展名以阻止加载图像。我不确定这样的功能如何有用（除了可能防止未使用的数据使用）。

ChromeExtension阻止下载+加载图片

1 个答案: