在Chrome扩展中加载页面之前修改CSS？

Question

我想阻止在页面上显示特定的background-image，可能使用jquery。但是，在激活JS之前加载页面和DOM。

我想做的是以下内容：

.pagelayout-login #page{
background: none;
}

我在JQuery中尝试使用相同的方法：

$(document).ready(function(){

$(".pagelayout-login #page").css("background","none");

});

但是，在加载并显示图像后，两者都会修改样式表。

如果我在"run_at : "document_start"中添加content scripts，则CSS会被页面的CSS覆盖。

有没有办法阻止背景在开始加载之前显示？

Answer 1

我认为当你删除$（文档）时，这会更容易。现在，在页面完成加载后，该函数内的所有内容都会运行。

Answer 2

您可以在开头添加CSS：

chrome.tabs.insertCSS(tab.id, {code:'my css code', allFrames:false, runAt:"document_start"});

或在最后添加一个脚本，如下所示：

chrome.tabs.executeScript(tab.id, {code:'my script code', allFrames:false, runAt:"document_end"});

使用CSS，你需要成为第一个，因为它是一个“级联风格”。 使用脚本，它必须是最后一次更改。

您可以尝试在CSS中添加！important。

Answer 3

由于这是Chrome扩展程序，因此即使您!important，也不要害怕使用"run_at : "document_start"来确保CSS覆盖网页的CSS：

.pagelayout-login #page{
background: none !important;
}

这可能会也可能不会阻止图片加载，因为它仍然被页面的CSS引用，但它至少会阻止它立即显示。您需要进行自己的测试，以确定Chrome是否仍会在页面加载期间尝试请求图像。