MutationObserverでWebページの変化を監視する
Web APIであるMutationObserverを使えば、DOMの変化を監視できる。
annoではWebページ全体を監視して、マーカーやアイコンを埋め込む処理を実行している。
X (旧Twitter) のように1ページ内で無限にスクロールしながら読めるサイトでも、
新しいコンテンツが表示された瞬間にマーカーやコメントも表示される。
tsCopied!
const handle = () => { mutationObserver.disconnect(); try { // マーカーやアイコンのDOMを挿入する処理 } finally { mutationObserver.observe(document.body, { subtree: true, childList: true, characterData: true, }); }};
const mutationObserver = new MutationObserver(handle);handle();