Scrapbox の UserScript でページ遷移をキャッチする方法
Scrapbox の UserScript でページを読み込んだ時に発火するスクリプトを書きたかった
普通に書けばページを読む度に UserScript が走るものと思い込んでいた
そうはならなかった
Scrapbox 内のページ遷移では再読込はせず、javascriptのチカラで DOM を再構成していた
つまり余計なものは再ロードされず、いい感じに使い回されている
じゃあどうしましょう
イベントをキャッチする？
どこで何のイベントが走るのか皆目検討もつかない
Scrapbox は React を使っているのでコンパイルされたソースコードを開いても基本よく分からない
MutationObserver で DOM の変更をキャッチする
TODO MutationObserver の説明
ブラウザの開発モードとにらめっこしていたら
<div class="page-wrapper"></div> の class に enter という要素が読込のタイミングで追加されたり消えたりしていたというわけでこうなりました↓ 要検証
javascriptconst target = document.getElementsByClassName("page-wrapper")[0];
const observer = new MutationObserver((recs) => {
if (!recs[0].target.classList.contains("enter")) {
console.log("ページ遷移完了");
}
});
observer.observe(target, {attributes: true, attributeFilter: ["class"]});