MutationObserverでWebページの変化を監視する

Web APIであるMutationObserverを使えば、DOMの変化を監視できる。

annoではWebページ全体を監視して、マーカーやアイコンを埋め込む処理を実行している。

X (旧Twitter) のように1ページ内で無限にスクロールしながら読めるサイトでも、

新しいコンテンツが表示された瞬間にマーカーやコメントも表示される。

code: ts

const handle = () => {

mutationObserver.disconnect();

try {

// マーカーやアイコンのDOMを挿入する処理

} finally {

mutationObserver.observe(document.body, {

subtree: true,

childList: true,

characterData: true,

});

}

};

const mutationObserver = new MutationObserver(handle);

handle();