在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或其他屬性來引用這些腳本來執行諸如獲取其子或兄弟元素等內容。