检测 Chrome 中的异步脚本加载

Question

我正在编写一个需要检查 DOM 中元素的 chrome 扩展。我目前正在尝试解决在document.onload 触发后将脚本添加到 DOM 的情况，并且这些脚本会向 DOM 添加更多元素，我想查看这些元素。有时元素位于子框架中，有时脚本会使用document.write 添加它们。是的，我知道，我知道。

目前的主要问题似乎是我无法检测脚本是否已经加载。如果它没有加载，我可以安全地将一个监听器附加到script.onload，但是如果它已经已经加载了，onload 将不会触发。

在其他几个地方，我会检查readyState 以查看文档是否已经准备好。如果是，我执行我的代码，如果不是，我附加一个 onload 监听器。然而，Chrome 中的异步脚本似乎没有 readyState，尽管在几个 SO 答案中都引用了这样的属性。

那么有什么方法可以确定异步脚本是否已经加载？由于这是特定于 Chrome 的，因此不需要跨浏览器兼容。有没有办法使用 MutationObserver 可靠地为 每个 脚本附加一个 onload 侦听器并手动跟踪其状态？

谢谢！

Answer 1

要检测加载到 DOM 上的脚本，请检索所有脚本标签：

document.querySelectorAll('script');

这将返回加载到 DOM 上的脚本数组。在数组上调用 .length 将显示加载了多少脚本。您可以通过它们的 .src 或其他属性引用这些脚本来执行诸如获取它们的子元素或兄弟元素之类的操作。