跨浏览器-在加载图像之前从页面中删除图像

Question

我正在使用Crossrider开发一个扩展，并希望在加载某些图像之前阻止它们。目前，我正在使用下面的代码在extension.js文件中进行尝试，但它只在它们加载后删除它们，并且不会捕获AJAX加载的图像。我如何使用Crossrider做到这一点？

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

Answer 1

这最好在后台范围内使用appAPI.webRequest.onRequest.addListener方法来捕获图像请求并在加载之前阻止它们。例如：

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 };
    }
  });
});

[披露：我是Crossrider的员工]