Javascript 页面完全加载后如何执行内容脚本

我正在尝试编写一个GoogleChrome扩展，通过类名获取页面中的元素。其思想是使用内容脚本获取这些元素，并将消息传递给扩展和弹出窗口。但是，我的内容脚本总是在整个页面加载之前执行，因此我无法获取所需的元素。我尝试使用

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");
    }
}

if（document.readyState==“完成”）{
var董事会名称arr=[]；
var节点=document.getElementsByClassName（'Board'）；
对于（变量i=0；i

有没有办法强迫它去追赶？或者我应该不使用内容脚本方法吗？

尝试使用Jquery

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

---

没有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);

或者这样：

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);

---

页面可能通过AJAX动态加载其内容，因此当文档状态就绪时，您想要查找的元素可能仍然没有加载。即使在开始时加载了部分内容，以后也可能会加载更多内容。为了正确地解决这个问题，我向您推荐这些技术。我在我的Chrome扩展中使用它，在每个Facebook帖子中插入“Favorite”按钮，效果非常好

请参见代码示例：

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 });

var obs=新的突变观察者（功能（突变，观察者）{
对于（var i=0；i<突变[0]。addedNodes.length；i++）{
if（突变[0]。添加节点[i]。节点类型==1）{
$（突变[0].addedNodes[i]）.find（“.userContentWrapper”）.each（函数（）{
注入FBMbutton（$（本））；
});
}
}
injectMainButton（）；
});
obs.observe（document.body，{childList:true，subtree:true，attributes:false，characterData:false}）；

我知道，这个问题贴得太长了。 尽管如此，我还是希望它能对像我这样的球探有所帮助

Chrome扩展的ContentScript有一个名为run_at的选项，带有以下选项：document_start、document_idle和document_end。 文件：

---

这正是你需要的（是manifest.json文件的部分内容。

可能与此重复：这很有效！我使用了第一个，但我不太了解回调函数。是否等待所有页面加载，然后再次调用该函数（如果不是？

window）。onload

是一个事件，这意味着一旦加载页面就会调用它。您可以在这里或互联网上的任何地方获取更多关于活动的信息。建议查看run_at内容脚本选项。解决您的问题有效，这正是我需要的。谢谢。