How to change a webpage using google chrome script content before DOM processing?

Question

Using Chrome Content Scripting I want to delete several frames on a web page before their contents are loaded.

I found that using the run_at: document_start property in the extension shows that my javascript is executed right after the main page is requested and before the DOM is processed and images, iframes, etc. are loaded. Logically, at this moment, the DOM structure is not available, and I cannot change the page using commands, for example:

myelement=document.getElementById('iframeX'); myelement.parentNode.removeChild(myelement); 

How can I access and change the data of a reprogrammed page?

Answer 1

You need to run your content script on document_start and add a beforeload listener - you can use event.preventDefault to selectively block content from loading, and then delete the frame that tried to load the content:

  document.addEventListener('beforeload', function(event) { if (event.url.match('facebook')) { event.preventDefault(); $(event.target).remove(); } }, false); 

I talked about the equivalent approach to using the beforelload event for Firefox .

Answer 2

In the manifest. json for this should be content_scripts like:

 "content_scripts": [ { "matches": ["*://*/*"], "js": [ "scan.js" ], "run_at": "document_start", "all_frames" : true } ]