Chrome 扩展程序 - 打开没有图像的标签

Question

I have built a Chrome Extension that opens urls for html parsing in a new tab. Everything works fine but I'd like to optimize the loading speed by stripping images before the page is loaded.

So far I call the tab this way:

function CreateTab(createProperties, shop_list) {
  return new Promise((resolve, reject) => {
    chrome.tabs.create(createProperties, tab => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError));
      } else {
        chrome.tabs.executeScript(tab.id, {
          file: 'GetSource.js',
        }, async function(results) {
          my parsing code here
        }
      }
    }
  }
}

When executeScript is called, it's already too late, the page is there. Is there a way to execute a script before the page is loaded so that I can remove images before getting the html ?

Thanks Laurent

Answer 1

You can use chrome.webRequest API ( https://developer.chrome.com/extensions/webRequest ) with onBeforeRequest which fires when a request is about to occur. This event is sent before any TCP connection is made and can be used to cancel or redirect requests. Something like this should prevent .jpg images from loading:

chrome.webRequest.onBeforeRequest.addListener(
        function(details) {
          return {cancel: details.url.indexOf(".jpg") != -1};
        },
        {urls: ["<all_urls>"]},
        ["blocking"]);

Answer 2

Maybe somebody still need this.

From the chrome documentation : Chrome's Examples of webRequest Blocking

You can block multiple type of images using one listener.

chrome.webRequest.onBeforeRequest.addListener(
    function(details) { 
        return { cancel: true }; 
    },
    
    { 
        urls: ["*://*/*.jpg", "*://*/*.png", "*://*/*.gif", "*://*/*.ico"] 
    },
    
    ["blocking"]
);

You can modify the URL patterns as you need.

Don't forget to add webRequest and webRequestBlocking permissions in your manifest.json file.