☠️

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

に公開
JavaScript
tech

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[1]を使います。

これを使うことにより、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://ja.stackoverflow.com/questions/32430/spaで動的に挿入されるdomに対するdomelement-onload

脚注

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

Discussion