I tried using content scripts

manifest

"content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["js/content_script.js"]
    }
]

content_script.js

_ini();
function _ini(){
    document.body.style.display="none";
}

But it loads the page first and then it hides it.

So I tried webNavigation

chrome.webNavigation.onCommitted.addListener(function(details){
    alert('webnav');
    document.body.style.display="none";
});

But the above didnt work too. The page alerts webnav before page load but display none didnt work.

All I really need is to hide the entire site without showing the client any elements at all. Any ideas?

I tried using content scripts

manifest

"content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["js/content_script.js"]
    }
]

content_script.js

_ini();
function _ini(){
    document.body.style.display="none";
}

But it loads the page first and then it hides it.

So I tried webNavigation

chrome.webNavigation.onCommitted.addListener(function(details){
    alert('webnav');
    document.body.style.display="none";
});

But the above didnt work too. The page alerts webnav before page load but display none didnt work.

All I really need is to hide the entire site without showing the client any elements at all. Any ideas?

• javascript
• google-chrome-extension

• Use <all_urls> instead of *://*/*. Then simply use document.body.innerHTML=null. It will work. – PG1 Commented Jul 8, 2014 at 8:20
• @ParagGangil I dont want to remove the stuff of a site. I just want to hide it then display it after my code runs. – Joe Commented Jul 8, 2014 at 8:22

3 Answers 3

The existing answers are correct in most cases, but I want to give more context about the implications of the used methods. The remended method to hide the page until you are ready is:

manifest.json:

{
    ...
    "content_scripts": [{
        "matches": ["*://*/*"],
        "js": ["contentscript.js"],
        "run_at": "document_start"
    }],
    ...
}

contentscript.js

document.documentElement.style.visibility = 'hidden';
document.addEventListener('DOMContentLoaded', function() {
    // ... do something ... and then show the document:
    document.documentElement.style.visibility = '';
});

visibility:hidden vs display:none

You should not use display = 'none', but visibility = 'hidden', as suggested by Parag Gangli for. The reason for preferring visibility:hidden over display:none is that visibility does not affect any dimensional properties of an element. When an element is set to display:none, then the element and all of its descendant nods will have a width and height of 0. This could break several pages that rely on calculations involving the dimensions of an element in the document tree.

Another consequence of toggling display:none is that scroll positions and anchors (#id-of-something) are broken. The browser will no longer jump to the anchor or previous scroll position, but show the page at scroll position (0,0). This is highly undesirable.

document.body vs ... vs document.documentElement

document.body does not exist when "run_at": "document_start" is set, so it cannot be used. document.getElementsByTagName('html')[0] works, but can more concisely be written as document.documentElement (= the root of the document).

window.onload vs DOMContentLoaded

window.onload will only be triggered when all resources (images, frames, etc.) are fully loaded. This can take a while, so it is a bad idea to hide the whole page until the window.onload event is triggered.

In most cases, your extension only depends on the document structure, so modifying the document and showing the document at the DOMContentLoaded event suffices.

To hide everything before page load with Chrome Extension

Use run_at As @ParagGangil mentioned

Include it in manifest

"content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["content_script.js"],
        "run_at": "document_start" //<-This part is the key
    }
]

More on "run_at": "document_start"

And this should be inside content_script.js

_ini();

function _ini(){

    document.getElementsByTagName("html")[0].style.display="none";

    window.onload=function(){

        //do your stuff

        document.getElementsByTagName("html")[0].style.display="block"; //to show it all back again

    }

}

as @Xan mented document.body is not yet constructed during the load of content_script.js so we target the <html> tag

Since you don't want to delete the data and just hide everything, use :

document.body.style.visibility="hidden";

This will hide all the stuff from the page.