我如何防止加载 <img> 通过内容脚本？

Question

I am developing a Chrome Extension for GMail. When I open a sent mail, if an image is attached, it is downloaded from server. I want to prevent browser hitting GET /url .

I have tried -

document.addEventListener("DOMSubtreeModified",function(){
    $("img-selector").remove();
},true);

I have also used mutation observer. Both methods remove the <img> from DOM, but I can still see browser hitting that image url in Network panel.

So, how can I prevent browser hitting the url, and removing the img? It needs to be done in Content Script. You can assume JQuery library is available.

Thanks in advance.

Answer 1

If you know the URL patterns in advance, I suggest to use the chrome.webRequest or chrome.declarativeWebRequest APIs to block the image. This can be done from the background / event page.

( this first revision of this answer showed an example of the "beforeload" event. However this event has been removed from Chrome 35, so I've deleted the example.)