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

我试着使用内容脚本

manifest

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

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

content\u script.js

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

_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

    }

}

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

所以我尝试了

webNavigation

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

但上述措施也不起作用。页面加载之前，页面会发出警告

webnav

，但显示“无”无效

---

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

由于您不想删除数据而只是隐藏所有内容，请使用：

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

---

这将隐藏页面中的所有内容

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

使用@paragangil提到的

run_

将其包含在清单中

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

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

正如@Xan评论的
document.body
在加载
content_script.js
期间尚未构建，因此我们针对
标记现有答案在大多数情况下都是正确的，但我想给出更多关于所用方法含义的上下文。建议在准备就绪之前隐藏页面的方法是：

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 = '';
});

可见性：隐藏
vs
显示：无
您不应该使用
显示='none'
，而应该使用
可见性='hidden'
。首选
可见性：隐藏
而不是
显示：无
的原因是
可见性
不影响图元的任何标注属性。当一个元素被设置为
display:none
时，该元素及其所有子节点的宽度和高度都将为0。这可能会破坏依赖于涉及文档树中元素维度的计算的多个页面

切换
display:none
的另一个结果是，滚动位置和锚（
#id of something
）被破坏。浏览器将不再跳转到定位点或上一个滚动位置，而是在滚动位置（0,0）显示页面。这是极不可取的

document.body
vs。。。vs
document.documentElement
设置时，
document.body
不存在，因此无法使用
document.getElementsByTagName（'html'）[0]
可以工作，但可以更简洁地写成
document.documentElement
（=文档的根）

window.onload
vs
domcontentload
窗口。仅当所有资源（图像、帧等）完全加载时才会触发onload
。这可能需要一段时间，因此在触发
窗口.onload
事件之前隐藏整个页面是个坏主意

在大多数情况下，扩展只取决于文档结构，因此修改文档并在
DOMContentLoaded
事件中显示文档就足够了。
使用
而不是
*：//*/*/*
。然后只需使用
document.body.innerHTML=null
。我不想删除网站上的东西。我只想隐藏它，然后在代码运行后显示它。效果与
display=“none”
相同。我想实现的是，在页面加载并执行脚本之前，整个页面保持白色。不应尽可能多地显示任何元素。好的，然后在您的
清单中包含
运行时间
：
文档开始
。这将在页面加载之前插入您的内容脚本。@paragangil如果我没记错的话，
document.body
此时还没有构造。请注意，任何人使用这个，JSON中的
/
-样式的注释都是语法错误。它是用来突出显示的，但不要照样复制代码。