Chrome Extension: Blocking content from external domain being loaded into pages from specific domain

Question

I am building an extension for use on a social website that I do not control. That website allows users to insert content (images, flash etc...) from other domains. I want to block this.

I initially thought that firing jquery document.ready and removing content from html at that point would be fine because document ready fires when the dom is loaded but content has not been loaded. I just empty the necessary div elements in the hope that this would stop http requests from occurring. Unfortunately this technique does not work.

Then I discovered chrome.webRequest which seems like it might work. The difficulty I am having is making the extension specific only to the domain I am on. Chrome.webRequest can only be used in the background page and not in content scripts.

My initial manifest permissions looked liked this:

 "permissions": [
    "tabs",
    "http://www.example.com/*",
  ],

But then I logged the requests using chrome.webRequest.onBeforeRequest.addListener I noticed only the image requests for the site the extension is for were being logged. So I changed the permissions to this:

"permissions": [
    "tabs",
    "<all_urls>",
    "webRequest",
    "webRequestBlocking"
  ],

I can now see all the requests using chrome.webRequest.onBeforeRequest.addListener. However because this event is being fired in the background page it is firing for all and domains I visit in the browser. When I block the images from loading it is thus blocking all images on all sites loading.

The problem is that the object returned by chrome.webRequest.onBeforeRequest.addListener doesn't contain the url of the tab the user is currently on. Only the tabid. There is nothing in the request that I can see that I can detect which domain the current tab is on. I can obviously get the tab.url with the tab id using chrome.tabs.query but this is asynchronous as is the event onBeforeRequest listener.

This is the event listener code at the moment:

chrome.webRequest.onBeforeSendHeaders.addListener(

    function(details) {

    if(details.type == "image" && (details.url.indexOf("://www.example.com") == -1)){
    console.log(details.url);       
            //THIS LOGS ALL IMAGES LOADING EXCEPT THE SITE THE EXTENSION IS FOR 
            //BUT THE CANCEL ALSO CANCELS IMAGES LOADING ON ALL OTHER SITES.
            return {cancel: true};
    }

    },
    {urls: ["<all_urls>"]},
    ["blocking"]); 

So in a nutshell how do I only run the cancel code when the images that are loading (which can be an image from anywhere) are being loaded in to the site the extension is for?

And finally (if I can get this to work) does Firefox have a similar option to chrome.webrequest as I would like to build a Firefox addon equivalent.

Answer 1

Here you go man the solution is already there so don't accept this as solution but im posting here so its nice and big for all to see:

An example of nsIContentPolicy for firefox addon?