Scrapbox の UserScript でページ遷移をキャッチする方法

Scrapbox の UserScript でページを読み込んだ時に発火するスクリプトを書きたかった

普通に書けばページを読む度に UserScript が走るものと思い込んでいた

そうはならなかった

Scrapbox 内のページ遷移では再読込はせず、javascriptのチカラで DOM を再構成していた

つまり余計なものは再ロードされず、いい感じに使い回されている

kembo.icon （だからサクサク動くんだなあ）

じゃあどうしましょう

イベントをキャッチする？

どこで何のイベントが走るのか皆目検討もつかない

Scrapbox は React を使っているのでコンパイルされたソースコードを開いても基本よく分からない

MutationObserver で DOM の変更をキャッチする

ブラウザの開発モードとにらめっこしていたら<div class="page-wrapper"></div>のclassにenterという要素が読込のタイミングで追加されたり消えたりしていた

というわけでこうなりました↓ 要検証

code:javascript

const target = document.getElementsByClassName("page-wrapper")0;

const observer = new MutationObserver((recs) => {

if (!recs0.target.classList.contains("enter")) {

console.log("ページ遷移完了");

}

});

observer.observe(target, {attributes: true, attributeFilter: "class"});