如何在頁面呈現之前切換用戶腳本中的CSS文件？

我正在嘗試爲Chrome編寫一個用戶腳本，爲特定網站交換特定的CSS文件。如何在頁面呈現之前切換用戶腳本中的CSS文件？

關於將CSS文件轉換爲另一個CSS文件的部分工作正常，問題是我無法在呈現頁面之前發生這種情況。當第一次渲染原始佈局時，這會導致網站非常醜陋的閃爍，然後很快被插入的新佈局取代。

我已經使用@run_at document_start讓我的用戶腳本在頁面呈現之前運行，但似乎並不正常。從我可以看到from the official Chrome documentation這應該被支持。

供參考，這是我的完整劇本：

// ==UserScript== 
// @name   name 
// @namespace  namespace 
// @version  0.1a 
// @description description 
// @include  http://example.com/* 
// @run_at document_start 
// ==/UserScript== 


var sheets = document.getElementsByTagName("link"); 

for (var i=0; i<sheets.length; ++i) { 
    if (sheets[i].href.indexOf('all.css') != -1) { 
     sheets[i].href = 'http://replacement.com/all.css'; 
    } 
}

我調查了一下再和管理，設置在我的腳本斷點（出於某種原因，劇本最初沒有出現在開發者工具）。在我的腳本開始處的中斷點處停留時，該站點已經完全加載了原始主題。所以看起來@run_at document_start指令不起作用，我的腳本在頁面加載後執行。雖然我不明白爲什麼會出現這種情況。

來源

2012-03-27 Mad Scientist

這可能是因爲它需要另一次異步往返才能下載css，這留下了循環窗口來呈現文檔。爲什麼不嘗試使用dataUri作爲潛在的同步選項來呈現新的CSS內容？（這你必須事先下載並緩存） – 2012-03-27 18:06:37

這在我的情況下似乎不是問題，我已經用更多的細節更新了我的問題。看來我的腳本沒有在正確的時間執行，出於某種原因'@run_at document_start'在我的情況下不起作用。 – 2012-03-27 18:46:11

我在文檔開始時嘗試了你的代碼，並且如預期的那樣沒有得到任何表單。這是預料之中的，因爲文檔說他們沒有構建DOM（所以這些鏈接不會有任何聯繫）。有一些樣式表可以看到，但不能通過內容腳本訪問，因爲跨域CSS或類似的東西。你可以通過注入一些代碼來獲得它們，但是不能從那個頁面上的另一個域獲得css文件（Reading documents CSS in Chrome Extension）。

有交換css文件壽和使用onBeforeLoad這就是事件的另一種方式....

function doBeforeLoad(event){ 
    if ((event.srcElement.type=="text/css") && (event.srcElement.href.indexOf('all.css') != -1) && (event.srcElement.href != 'http://replacement.com/all.css')) { 
     event.srcElement.href = 'http://replacement.com/all.css'; 
    } 
} 

document.addEventListener('beforeload', doBeforeLoad , true);

假如把它放在一個內容腳本，並在文件開始運行。

來源

2012-03-27 19:35:45 PAEz

謝謝，這個工程。雖然我還必須創建擴展而不是使用用戶腳本，但在頁面之前加載用戶腳本似乎不起作用。 – 2012-03-27 20:10:18

如何在頁面呈現之前切換用戶腳本中的CSS文件？

回答

相關問題