在頁面加載Chrome擴展之前修改CSS？

Question

我想阻止一個特定的background-image顯示在頁面上，可能使用jQuery。但是，頁面和DOM在JS激活之前加載。

我想要做的是以下幾點：

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

我已經嘗試使用相同的JQuery的：

$(document).ready(function(){ 

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

}); 

然而，無論圖像後修改樣式表已經加載並顯示。

如果我在我的content scripts裏添加"run_at : "document_start"，CSS會被頁面的CSS覆蓋。

有沒有辦法阻止背景在開始加載前顯示？

Answer 1

我認爲在刪除$（document）.ready的那一刻，這個函數裏面的所有東西都在之後，頁面已經完成加載。

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。

Answer 3

由於這是一個Chrome擴展，不要害怕使用!important以確保您的CSS覆蓋頁面的CSS即使你"run_at : "document_start"：

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

這可能會或可能不會阻止圖像因爲它仍然被頁面的CSS引用，但它至少會阻止它立即顯示。儘管如此，您仍然需要進行自己的測試以確定Chrome是否仍會嘗試在網頁加載期間請求圖片。