DOMがロードされないようにするChrome拡張機能

Question

コンテンツスクリプトからYouTubeのすべての要素にアクセスしようとしています。

manifest.jsonを

"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によって、後から動的に追加されているためであるとhereを読んで、そして作品これを解決する唯一の方法は、MutationObserver/mutation-summaryを使用することです。これは、要素にアクセスするだけの多くの面倒なようです。それ以外の方法はありませんか？

Answer 1

非同期でロードすると、解決策は "document_idle"で実行されます。 "document_idle"の場合、ブラウザは "document_end"とwindow.onloadイベントが発生した直後にスクリプトを挿入する時間を選択します。

コンテンツスクリプトで更新manifest.jsonを

"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) 
}); 

これが役立ちます。