特定のDOM要素の増加を観測してみた！

はじめに

今回、拡張機能を作るにあたって、ChatGPTへの質問回数をカウントする機能を実装することになりました。その際に実装が難しかったので記事にしようと思いました。

概要

特定のDOM要素の増加を観測する目的

ChatGPTの１日の返答回数（質問回数）をカウントすることが当初の目的でした。
つまりDOMの中の特定のクラスネームをカウントして、そのクラスネームのDOM要素が１増えるとGPTの返答回数が増えるということになります。そのため特定のDOM要素の増加の観測を実装することになりました。

予測される実装の関数の流れ

①監視をスタート→②既存のGPTの返答数をカウントする→③DOMに変化がある場合再度返答数をカウントする→④もしカウントした返答数が増加していたら、既存の返答数に＋１して③に戻る。
この繰り返しでChatGPT内の返答の増加を常に監視することができそう。

実装

今回はMutationObserverを用いて実装しました。

const targetParentElement = document.querySelector(".sample")
const targetElementClassName = ".sample__item"

const observeDOMChanges = async (): Promise<void> => {
  if (targetParentElement) {
    let currentCount = document.querySelectorAll(
      targetElementClassName
    ).length
    const mutationCallback: MutationCallback = () => {
      const updateCount = document.querySelectorAll(targetElementClassName).length

      if (updateCount - currentCount === 1) {
        currentCount = updateCount
        // 特定のDOM要素が１つ追加された時の処理
      }
    }

    const observer = new MutationObserver(mutationCallback)
    observer.observe(targetParentElement, {
      childList: true,
      subtree: true
    })
  } else {
    console.error("Target element not found.")
  }
}

observeDOMChanges()

この実装ではtargetParentElementとtargetElementClassNameをサンプルの値で実装しています。
また自分はこのカウントするコードに実際の実装ではDOMの処理を読み込む時間をcurrentCountの部分でsetTimeoutを用いて指定した時間を待つようにしました。それに加えて、URLが変更された際に、オブザーバーを再起動することで、chatごとのcurrentCountの初期値を計算しています。
以下の部分がその実装です。

まとめ

今回はオブザーバーを用いた特定のDOM要素の増加を観測方法を紹介しました。
個人的には振り返ってみると簡単そうに見えるのに、当初はすごく手こずった思い出があります。
違うやり方があったり、もっといい方法あるよーとかあったらじゃんじゃんコメント待っています。
最後まで読んでいただきありがとうございました。