javascript - 如何在页面完全加载后执行内容脚本

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 帖子注入(inject)“收藏”按钮并且效果很好。

查看代码示例:

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