2

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?

Jo E.
  • 7,822
  • 14
  • 58
  • 94
  • Use `` instead of `*://*/*`. Then simply use `document.body.innerHTML=null`. It will work. – PG1 Jul 08 '14 at 08: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. – Jo E. Jul 08 '14 at 08:22

3 Answers3

9

The existing answers are correct in most cases, but I want to give more context about the implications of the used methods. The recommended 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.

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
7

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

Jo E.
  • 7,822
  • 14
  • 58
  • 94
  • 4
    Just a heads up for anyone using this, `//`-style comments in a JSON are a syntax error. It's here for highlighting, but don't copy the code as is. – Xan Jul 08 '14 at 09:21
1

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.

PG1
  • 1,220
  • 2
  • 12
  • 27
  • the effect is the same as `display="none"`. what I would like to achieve is the whole page remains white until the page has loaded and my script has been executed. no element should show up as much as possible. – Jo E. Jul 08 '14 at 08:38
  • 1
    OK, then include `run_at` : `document_start` in your `manifest`. This will inject your content script before page loads. – PG1 Jul 08 '14 at 08:46
  • 1
    @ParagGangil If I remember correctly, `document.body` is not yet constructed at that point.. – Xan Jul 08 '14 at 08:51