SPAから動的に挿入されるDOMを取得する #JavaScript

chromeの拡張機能開発で、SPAからDOMを取得する際にハマったので、メモとして残しておきます。

問題点

例えば、以下のように、同期的に挿入されるsampleクラスがあったとします。

<div class="sample">
    sample
</div>

最初は、画面の描画が完了したら、DOMを取得しようと思いました。
しかし、結果はnullでした。

window.onload = function() {
    let sample = document.querySelector(".sample")
    console.log(sample.textContent)
}

なぜか

HTML、CSS、JSが読み取られた時にonloadは発火するが、SPAはそこから画面を組み立てるので、取得できなかったというわけです。

解決策

DOMの変更を検知できる、MutationObserver¹を使います。

これを使うことにより、DOMが挿入されたときに要素を取得することができます。

let observer = new MutationObserver(function() {
  let sample = document.querySelector(".sample")
  if (sample) {
    console.log(sample.textContent)
    observer.disconnect()
  }
})

observer.observe(document, {childList: true, subtree: true});

参考リンク

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver ↩