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

How to execute content script after the page is loaded completely

本文关键字：执行 脚本 加载      更新时间：2023-09-26

我正在尝试编写一个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");
    }
}

有没有办法强制它运行？还是我不应该使用内容脚本方法？

页面可能通过 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 });

如果没有 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);
我知道

，这个问题发布得太长了。尽管如此，希望这对像我这样的球探有帮助。

Chrome Extension的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 文件的部分内容。

尝试使用 Jquery

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

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

相关文章：