Removing images from a page before they load

Question

I'm developing an extension using Crossrider and want to block certain images before they load. Currently, I'm trying in the extension.js file using the code below, but it only removes them after they have loaded and does't catch AJAX loaded images. How can I do this with Crossrider?

appAPI.ready(function($) {
  $('img').remove();
});

Answer 1

This is best achieved in the background scope using the appAPI.webRequest.onRequest.addListener method to catch image requests and block them before they load. For example:

appAPI.ready(function() {
  // The list of image file types you wish to block
  var fileTypeBlockList = 'jpg|gif|svg';
  appAPI.webRequest.onRequest.addListener(function(details) {
    if (details.method == "GET" &&
        details.requestUrl.match(new RegExp('.'+fileTypeBlockList+'$','i')) {
      return { cancel: true };
    }
  });
});

[Disclosure: I am a Crossrider employee]