0

Here is the code, in one of the most popular content blocking chrome extension. The app is supposed to block the download of the images and does a great job at that, but lets say I go visit a page with a 70MP image it still takes a while to finish loading the page, why?

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"});       
    }
});
iordanis
  • 1,284
  • 2
  • 15
  • 28

1 Answers1

3

The extension only intercepts requests of type "image" and "object". This means that it will only block loading images embedded on pages.

If you try to load an image directly using its URL (such as the one you provided in your comment http://www.conceptcarz.com/images/Jaguar/Jaguar-F-Pace-First-Edition-2015-Image-03.jpg), the image is considered to be the main document. This means that it is requested with a resourceType of "main_frame" and the extension will not block its loading. It will only hide it by inserting the "img{visibility: hidden;}" style to the simple HTML page that Chrome generates automatically for an image.

You can verify this by inspecting the network traffic in Chrome (Ctrl+Shift+I > Network at the top > Ctr+Shift + R). When an image is loaded directly, it is not listed in the Img section, but in the Doc section.

The extension could be modified to block loading images even when opened directly by adding an onBeforeSendHeaders listener and blocking all traffic based on the value of Content-Type header. I am not sure how such a feature could be useful though (except maybe to prevent unwated data usage).

Petr Srníček
  • 2,296
  • 10
  • 22
  • can you explain main_frame, sub_Frame etc? – iordanis May 29 '16 at 03:40
  • also, is it faster to load a page, if I do redirect or cancel: true, I also seen cancel: block, the documentation is really poorly can't find many resources :/ – iordanis May 29 '16 at 03:41
  • @Iordanis: I was not able to find any documentation of `resourceType` either. The documentation does not even mention [all possible values](https://code.google.com/p/chromium/codesearch#chromium/src/extensions/browser/api/web_request/web_request_api_helpers.cc&q=extensions/browser/api/web_request/web_request_api_helpers.cc&sq=package:chromium&l=54) I only rely on guesses: `main_frame` probably loads the main document. `sub_frame` probably loads iframes etc. – Petr Srníček May 29 '16 at 10:51
  • @Iordanis _"is it faster to load a page, if I do redirect or cancel: true, I also seen cancel: block"_ I don't think there is such a thing as `cancel:block`. You seem to be confusing `"blocking"` and `cancel: true` here. [See this answer](http://stackoverflow.com/a/18158416/5695459). Since the code above redirects to a `data:` URI with an embedded blank 1x1 image and does not lead to any network activity, the performance difference between this redirection and blocking the request completely using 'cancel: true' should be negligible. – Petr Srníček May 29 '16 at 11:01
  • sorry but can anyone help me https://stackoverflow.com/questions/57971048/how-to-call-creating-new-contact-api-after-chromeextension-oauth-succeed? – gumuruh Sep 17 '19 at 10:49