How to hide everything before page load with Chrome Extension

google-chrome-extension, javascript

Solution

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 commented `document.body` is not yet constructed during the load of `content_script.js` so we target the `<html>` tag

Problem

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?

Original source