Using DomNodeInserted to Rewrite HTML Before Finishing Downloading

Question

I feel that this will probably immediately become apparent to any non-amateur, but I have been at a standstill for several days.

I am writing a Chrome extension that runs a script at the start of a document. I want to rewrite the HTML code of specific DIVs as they are downloaded, but before they are displayed to the user (so that the user does not see the HTML code of the site before it is unceremoniously replaced by my custom HTML). The method I'm trying to use is as follows.

addEventListener('DOMNodeInserted', function(event){ if(event.relatedNode.innerHTML.indexOf("contentArea")>-1){ writeContentArea(); } }, false); function writeContentArea(){ var divtowrite = document.getElementById('contentArea'); include(divtowrite,"contentArea.html"); //my AJAX include function } 

Now the problem is that when the page loads and the JS is executed, the div will load before it is replaced. It's strange when I try this with another div, like a sidebar, it works as expected; that is, the div is replaced before it is displayed to the user. I cannot understand why it works for some divs and not for others.

I don’t know if this is really relevant, but on the Chrome side I have:

 chrome.tabs.getSelected(null, function(tab) { if(tab.url.indexOf("search.php") > -1){ chrome.tabs.executeScript(null, {file: "fhrun.js", allFrames: false, runAt: "document_start"} ); } }); 

Any ideas why this doesn't work, or the best method I should use? Thanks!!

Answer 1

Not sure if this is the approach you are looking for, but do you think that you click CSS to hide the content area at startup and set it to be visible in javascript after changing the content?

The CSS file will look like this:

 #contentArea { display:none; } 

or

 #contentArea { visibility:hidden; } 

and you will enter it using:

  chrome.tabs.insertCSS(null, {file: "youfile.css", allFrames: false, runAt: "document_start"}); 

Then change the content change function:

 function writeContentArea(){ var divtowrite = document.getElementById('contentArea'); include(divtowrite,"contentArea.html"); //my AJAX include function divtowrite.style.display = 'block'; }