如何在我的內容腳本完成DOM更改之前隱藏頁面？

我使用的內容腳本基本上是通過文檔，拉出數據，然後用不同的佈局但相同的信息重建頁面的大塊。所以這是一個特殊網站的「preffity」擴展，看起來很糟糕。如何在我的內容腳本完成DOM更改之前隱藏頁面？

事情是，Chrome繼續前進，並在內容腳本完成該過程之前呈現該頁面，因此在某些頁面加載時，您可以在用較好的一個替換之前看到原始頁面閃爍幾幀。

瀏覽器不會立即開始渲染。你很少看到沒有應用CSS的網站，因爲「它沒有及時完成」。有沒有辦法讓渲染等待內容腳本呢？我不需要幾百毫秒，只有幾個毫秒。

來源

2013-02-26 user2097279

如果您使用css並通過manifest添加它，請嘗試將其添加到內容腳本字段：''run_at「：」document_start「'。 – BeardFist 2013-02-26 21:49:03

@BeardFist，通過清單添加的CSS文件總是在DOM之前和內容腳本之前加載，無論「run_at」設置如何。 – 2013-02-27 02:53:09

你沒有發佈你的manifest.json（總是包含這個），但最可能的原因是你的腳本是the default random firing time of a content script的受害者。

也許，您需要做的只是在您的清單中將run_at設置爲document_end。

但是，如果你絕對，肯定不會將沒有什麼顯示，直到更改完成後，你需要使用一個多步驟的方法：

創建爲您的擴展CSS文件並將其保存爲hide_at_start.css：
```
body { 
    display: none; 
} 
```
注意，在極少數情況下，您可能需要使用display: none !important;

添加hide_at_start.css到您的清單，並設置艙單run_atdocument_start：

{ 
    "manifest_version": 2, 
    "content_scripts": [ { 
     "js":    [ "YOUR_CONTENT_SCRIPT.js" ], 
     "css":    [ "hide_at_start.css" ], 
     "matches":   [ "http://YOUR_SERVER.COM/YOUR_PATH/*" 
          ], 
     "run_at":   "document_start" 
    } ], 
    "description": "Blanks a page until our content script is done", 
    "name":   "Blank at Start", 
    "version":  "1" 
}

在你的內容腳本，操縱頁面上的元素的任何代碼必須等待DOM爲interactive並且該元素已到位。因此，修改YOUR_CONTENT_SCRIPT.js像這樣：
```
document.addEventListener ('DOMContentLoaded', onDOM_Ready, false); 

function onDOM_Ready() { 
    contentScript_main(); 

    //-- Make page visible again. 
    document.body.style.setProperty ("display", "inherit", "important"); 
} 

function contentScript_main() { 
    // PUT YOUR CODE, THAT ALTERS PAGE ELEMENTS, HERE. 
} 
```
另外，如果您有針對性的內容頁面加載後添加，通過AJAX，內容腳本必須使用其他策略（定時器，事件監聽器，突變觀察員等），這些元素。
最後，如果你的代碼需要渲染的尺寸或元素（不太可能）的位置，使用visibility: hidden;代替display: none;。

來源

2013-02-27 02:43:07

謝謝，但沒有。當用戶瀏覽網站的不同部分時，頁面將呈白色閃爍。通常，瀏覽器會在加載下一個頁面時一直顯示當前頁面，直到某一點。有一些時間限制或啓發式用於決定第一次渲染何時完成。我在問我是否可以與Chrome交流該頁面尚未準備好呈現。我認爲它必須是可能的，因爲如果不是這樣，任何對網頁進行大量更改的擴展都會吸引人。 – user2097279 2013-02-27 04:00:49

不需要。實際上只需要設置'document_end'就可以了，除了你之外，沒有人會注意到任何錯誤。如果不完全停止頁面，您無法拖延渲染。你所能做的就是修改頁面。 – 2013-02-27 04:09:04

如何在我的內容腳本完成DOM更改之前隱藏頁面？

回答

相關問題