技術

GoogleChromeの拡張機能を作ってみた その5

今井 聡史

今井 聡史

2020/08/13

はじめましての方ははじめまして、エンジニアの今井です。前回の記事(その4)では拡張機能の「保存したデータの表示」についてご紹介しました。まだまだ問題だらけでのんびりと進めています。今回は、初期からどうしようか悩んでいたスクロール時の処理について書こうと思います。

1.スクロール時の問題とは?

まず、ページを開いたタイミングで表示されているメッセージにお気に入り登録ボタンを追加するように作ってきました。しかし、Chatworkで古いメッセージを見るためにスクロールをすると、メッセージが書き換わり、ボタンが消えてしまいます。なので、そのタイミングでボタンの再設置を行う必要があります。

今回のテーマですが、再設置をどのように行うのが良いかで悩みました。最初はスクロールイベントでボタンの再設置処理を動かそうとしましたが、なんか微妙だなぁ…と思ったので別案を探していました。すると、[MutationObserver]という「特定の要素の変更時」に「特定の動作を実行できる」JavaScriptのAPIを見つけたので、それを使いメッセージが更新されたタイミングで、ボタンの再設置をしようと決めました。

2.MutationObserverについて

MutationObserverについて簡単に説明しようと思います。参考サイトは以下です。
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

const observer = new MutationObserver(mutationRecords => {
    console.log("change");   
});

まずはMutationObserverのコンストラクタを呼び出します。このとき、要素が変更されたときに実行させたい処理を書きます。呼び出される関数の第一引数である”mutationRecords”には監視対象にどんな変更があったか、どこが変更されたかなどが含まれます。

var target = document.getElementById('target');

次に変更を監視したい要素を取得します。

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

observe()を呼び出し、監視を開始します。この時にオプションを指定することで、どんな変更に反応するかを指定できます。”子要素の変更を含める”、”データの変更時”、”属性の変更時”などです。

3.実際にどのように実装するのか?

問題は、これをどのように拡張機能上に実装するかです。試しに実装してみたら、マウスオーバー時に要素が変更されたときなどにも動作してしまい、Chatworkがものすごく重くなり、使い物にならない状態になってしまいました。

なので、次回までに良い方法を見つけます…。

3.まとめ

今回は悩んでいた、スクロール時の処理について書きました。と言ってもまだ進行形で悩んでいるので完全に解決したとは言えません。なので次回はこれの続きか、別の課題解決に挑戦しようと思います。