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

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

• javascript
• google-chrome
• google-chrome-extension

• 2 developer.chrome./extensions/tabs.html#method-executeScript – PAEz Commented Nov 30, 2012 at 15:40

1 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./trunk/extensions/content_scripts.html#registration.