如何使用 Chrome 扩展程序在页面加载之前隐藏所有内容

我尝试使用内容脚本

manifest

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

content_script.js

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

但它首先加载页面，然后隐藏它。

所以我尝试了webNavigation

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

但上面的方法并没有起作用。页面提醒webnav在页面加载之前但不显示任何内容不起作用。

我真正需要的是隐藏整个网站而不向客户显示任何元素。有任何想法吗？

现有的答案在大多数情况下都是正确的，但我想提供有关所用方法的含义的更多背景信息。在您准备好之前隐藏页面的推荐方法是：

清单.json：

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

内容脚本.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

你应该not use display = 'none', but visibility = 'hidden', 正如 Parag Gangli 所建议的。优先选择的理由visibility:hidden over display:none就是它visibility不影响元素的任何尺寸属性。当一个元素设置为display:none，那么该元素及其所有后代节点的宽度和高度将为 0。这可能会破坏依赖于涉及文档树中元素尺寸的计算的多个页面。

切换的另一个后果display:none是滚动位置和锚点（#id-of-something）已损坏。浏览器将不再跳转到锚点或上一个滚动位置，而是在滚动位置（0,0）处显示页面。这是非常不希望的。

document.body对...对document.documentElement

document.body不存在时"run_at": "document_start"已设置，因此无法使用。document.getElementsByTagName('html')[0]有效，但可以更简洁地写为document.documentElement（= 文档的根目录）。

window.onload vs DOMContentLoaded

window.onload仅当所有资源（图像、帧等）完全加载时才会触发。这可能需要一段时间，因此隐藏整个页面直到window.onload事件被触发。

在大多数情况下，您的扩展仅取决于文档结构，因此修改文档并在DOMContentLoaded事件就足够了。