Chrome Extension - Inject script at document-start and another at document-end on same content script

Question

I have this script that must be injected on document-start, before document.body exists (only head exists). This script hides some classes on the page via css styles before the body is created and add a centered div with a message after DOMContentLoaded, so the body exists. This script will not work if injected on document-body or document-end though :(

Besides this script I have another that will do some actions on the page, but that script needs document.body element, so it needs to be injected on document-end (document-body may work to).

Both scripts should run on the same content tab, one after the other.

The injection will be done on the background page, so how and where should I inject each script in the right place?

cloak.js

---

// must be injected at document-start to work
function ShowMsg()
{
 // show message after body created
 var el = document.createElement('div');
 el.setAttribute( 'id', 'out_div_msg' );
 el.setAttribute( 'style', 'position:absolute; width:200px; height:100px; left:50%; top:50%;'+
 ' visibility:hidden; z-index:999' );
 el.innerHTML = '<div id="in_div_msg" style="position:relative; width: 100%;height:100%; left:-50%; top:-50%;'+
 ' visibility:visible; border:1px solid;"><table border="0" width="100%" id="table1" cellspacing="0"'+
 ' cellpadding="0" height="100%" style="border-style: outset; border-width: 2px; padding: 5px;'+
 ' background-color: #C0C0C0"><tr><td align="center" style="font-family: Consolas; font-size: 12px;'+
 ' color: #000000">Do not close this window<br><br>It will close automatically when finnished</td>'+
 '</tr></table></div>';
 document.body.appendChild( el );
}
// inject style before body created
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerText = 
 ' .hot_news { display: none !important; }'+
 ' .bg-wall { display: none !important; }'+
 ' .cmenu { display: none !important;' + 
 ' body { background-color: #000000; }';
(document.head||document.documentElement).appendChild(s);
document.addEventListener("DOMContentLoaded", ShowMsg, false);

---

Thank you in advanced

• PAEz: developer.chrome.com/extensions/tabs.html#method-executeScript

Answer 1

Then why not split it into two separate content scripts?

cloak1.js

// must be injected at document-start to work
// inject style before body created
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.innerText = 
 ' .hot_news { display: none !important; }'+
 ' .bg-wall { display: none !important; }'+
 ' .cmenu { display: none !important;' + 
 ' body { background-color: #000000; }';
(document.head||document.documentElement).appendChild(s);

cloak2.js

// show message after body created
var el = document.createElement('div');
el.setAttribute( 'id', 'out_div_msg' );
el.setAttribute( 'style', 'position:absolute; width:200px; height:100px; left:50%; top:50%;'+
 ' visibility:hidden; z-index:999' );
el.innerHTML = '<div id="in_div_msg" style="position:relative; width: 100%;height:100%; left:-50%; top:-50%;'+
 ' visibility:visible; border:1px solid;"><table border="0" width="100%" id="table1" cellspacing="0"'+
 ' cellpadding="0" height="100%" style="border-style: outset; border-width: 2px; padding: 5px;'+
 ' background-color: #C0C0C0"><tr><td align="center" style="font-family: Consolas; font-size: 12px;'+
 ' color: #000000">Do not close this window<br><br>It will close automatically when finnished</td>'+
 '</tr></table></div>';
document.body.appendChild( el );

manifest.json

{
 ...
 content_scripts: [
 {
 "matches": [...], 
 "js": ["cloak1.js"], 
 "run_at": "document_start"
 }, 
 {
 "matches": [...], 
 "js": ["cloak2.js"], 
 "run_at": "document_end"
 }, 
 ], 
 ...
}

And it seems that your first script is used to inject CSS. Therefore, you can also inject CSS directly using "css": ["cloak.css"] instead of "js": ["cloak1.js"], where cloak.css contains those style declarations. CSS files are always injected "before any DOM is constructed or displayed for the page.", so you don't need the "run_at" field. For more information, see https://developer.chrome.com/trunk/extensions/content_scripts.html#registration.

• CLiFoS: I understand what you mean, but the code must be injected in the background. the code i pasted here is just one of the functionalities. the other code is different. But I got your point of view. @PAEz posted a comment that actually answered my question. I just cant accept it in a comment.