Chrome 拡張機能でSPA監視をしたい場合の対処法

Google Chromeの拡張機能でシングルページアプリケーション［SPA］監視（DOMの動的変更を監視）する場合の対処法について備忘録的に投稿しておきます。

SPA（シングルページアプリケーション）監視

SPAとは、最初の一回しかHTMLを読み込まず、以降はJavaScriptでDOMを操作して画面を更新するコンテンツです。

画面遷移などが行われないために、拡張機能でコンテンツの変更を知りたい場合などで利用できます。

流れとしては MutationObserver を作成して observer.observe で登録したコンテンツ内のDOMを指定して行います。

単純な構成としては、次の JavaScript でイベントが発生できます。

MutationObserver を作成して、コンテンツが変更された時に実行したい処理を追加します。

const observer = new MutationObserver(() => {
  //コンテンツの変更で実行したい処理

});

次に observer メソッドで要素を指定して監視を行います。

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

実行すると、コンテンツ内のJavaScriptなどで “document.body” 内の要素が変更された場合に MutationObserver で追加した処理が実行されるようになります。

まとめ

Google Chromeの拡張機能でシングルページアプリケーション［SPA］監視（DOMの動的変更を監視）する場合の対処法について書きました。

画面の再読み込みをせずに、コンテンツの内容を、JavaScriptコードで変更するような場合にイベントが欲しい場合に MutationObserver が利用できます。

Google Chromeの拡張機能で［SPA］監視（DOMの動的変更を監視）したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。