MutationObserverでWebページの変化を監視する
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();