Chrome Extension不等待DOM加载

Question

我正在尝试从内容脚本访问youtube上的任何元素。

清单

"content_scripts": [
    {
      "run_at": "document_end",
      "matches": ["*://www.youtube.com/watch?v=*"],
      "js": ["content/content.js"]
    }
  ]

但是，在记录元素时，有时我会恢复为空，有时会记录元素。

content.js

document.addEventListener('DOMContentLoaded', afterDOMLoaded)
function afterDOMLoaded() {
    const element = document.getElementById('top')
    console.log(element)
}

使用settimeout

时起作用

setTimeout(function(){ 
    const element = document.getElementById('top')
    console.log(element)
}, 3000)

我在这里读到这是因为该元素通过页面的JavaScript动态添加，而解决此问题的唯一方法是使用MutationObserver/Mutation-Summary。对于仅访问元素来说，这似乎很麻烦。没有其他方法吗？

Answer 1

通过异步加载我们将在" document_idle"上运行解决方案。对于" document_idle"，浏览器会选择时间在" document_end"之间和窗口后立即注入脚本。

更新清单

"content_scripts": [ { "run_at": "document_idle", "matches": [ "*://www.youtube.com/watch?v=*" ], "js": [ "content.js" ] } ]

在内容脚本中，获取文档已准备就绪状态并以异步方式进行操作。

HTMLDocument.prototype.ready = new Promise(function (resolve) {
if (document.readyState != "loading")
    return resolve();
else
    document.addEventListener("DOMContentLoaded", function () {
        return resolve();
    });
});
document.ready.then(function () {
    const element = document.getElementById('top')
    console.log(element)
});

希望这会有所帮助。

Answer 2

尝试domsubtreemodified，每次都会触发每次DOM：

document.addEventListener("DOMSubtreeModified", function(event){
        if(document.getElementById("my_element")) {
                //element is added
        }
});