頁面完全加載后如何執行內容腳本

Question

我正在嘗試編寫一個 Google chrome 擴展，它通過類名獲取頁面中的元素。 這個想法是使用內容腳本來獲取這些元素並將消息傳遞給擴展並彈出。 但是，我的內容腳本總是在加載整個頁面之前執行完畢，因此我無法獲取所需的元素。 我嘗試使用window.loaded和document.loaded但它沒有用。 我也嘗試過等待一個時間間隔，但腳本總是在完全相同的停止點處結束。

// 我的內容腳本

if (document.readyState == "complete"){
    var board_name_arr = [];
    var node = document.getElementsByClassName('Board');

    for (var i = 0; i < node.length; ++i){
        var board_name = node[i].getElementsByClassName('boardName')[0].textContent;
        board_name_arr[i] = board_name;
    }

    if (Object.keys(board_name_arr).length){
        alert("found board");
    }
}

有沒有辦法強迫它追趕？ 或者我不應該使用內容腳本方法？

Answer 1

可能頁面通過 AJAX 動態加載其內容，因此當文檔狀態准備好時，您要查找的元素可能仍未加載。 即使部分內容在開始時加載，更多內容可能會在以后出現。 為了正確解決這個問題，我建議你使用MutationObserver技術。 我在我的 Chrome 擴展程序中使用它為每個 Facebook 帖子注入了“收藏夾”按鈕，並且效果很好。

查看代碼示例：

var obs = new MutationObserver(function (mutations, observer) {
    for (var i = 0; i < mutations[0].addedNodes.length; i++) {
        if (mutations[0].addedNodes[i].nodeType == 1) {
            $(mutations[0].addedNodes[i]).find(".userContentWrapper").each(function () {
                injectFBMButton($(this));
            });
        }
    }
    injectMainButton();
});
obs.observe(document.body, { childList: true, subtree: true, attributes: false, characterData: false });

Answer 2

如果沒有 jQuery，您可以在頁面加載事件上定義回調函數。 你可以這樣做：

var loadfunction = window.onload;
window.onload = function(event){
    //enter here the action you want to do once loaded

    if(loadfunction) loadfunction(event);
}

或者這樣：

window.addEventListener("load", function load(event){
    window.removeEventListener("load", load, false); //remove listener, no longer needed
    //enter here the action you want to do once loaded 
},false);

Answer 3

我知道，這個問題發布得太久了。 盡管如此，希望它對像我這樣的球探有幫助。

Chrome 擴展的 ContentScript 有一個名為 run_at 的選項，其中包含以下選項：document_start、document_idle 和 document_end。 文檔： https : //developer.chrome.com/extensions/content_scripts#run_time

.
.
.
  "content_scripts": [
    {
      "js": ["PATH_TO_YOUR_SCRIPT.JS"],
      "run_at": "document_end"
    }
  ]
.
.
.

正是您所需要的（是 manifest.json 文件的部分內容。

Answer 4

嘗試使用 Jquery

$(document).ready(function(){ //your code here });

http://learn.jquery.com/using-jquery-core/document-ready/