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

Question

我尝试使用内容脚本

list

"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 但显示无效果。

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

Answer 1

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

list .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 与 display:none

您应该不使用display = 'none'，但是visibility = 'hidden'，as suggested by Parag Gangli for .首选 visibility:hidden 而不是 display:none 的原因是 visibility 不会影响元素的任何维度属性。当一个元素设置为 display:none 时，该元素及其所有后代节点的宽度和高度都将为 0。这可能会破坏依赖于涉及元素尺寸计算的多个页面在文档树中。

切换 display:none 的另一个结果是滚动位置和 anchor (#id-of-something) 被破坏。浏览器将不再跳转到 anchor 或上一个滚动位置，而是在滚动位置 (0,0) 显示页面。这是非常不受欢迎的。

document.body 对比 ... 对比 document.documentElement

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

window.onload 与 DOMContentLoaded

window.onload 只会在所有资源(图片、帧等)加载完毕时触发。这可能需要一段时间，因此在触发 window.onload 事件之前隐藏整个页面不是一个好主意。

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