javascript - Chrome 扩展程序不等待 DOM 加载

Question

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

ma​​nifest.json

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

但是，在记录元素时，我有时会得到 null，有时会记录该元素。

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)

我读到here这是因为该元素是稍后通过页面的 javascript 动态添加的，解决此问题的唯一方法是使用 MutationObserver/mutation-summary 。对于仅仅访问一个元素来说，这似乎很麻烦。难道就没有别的办法了吗？

Answer 1

通过异步加载，我们将使解决方案在“document_idle”运行。在“document_idle”的情况下，浏览器选择在“document_end”和window.onload事件触发之后立即注入(inject)脚本的时间。

更新manifest.json

“内容脚本”:[
{
"run_at": "文档空闲",
“火柴”: [
“*://www.youtube.com/watch?v=*”
],
“js”:[
“内容.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)
});

希望这有帮助。