TampermonkeyでhtmlやJavaScriptスクリプトなどによるページの読み込み、ロードを待機したい場合についての適切なやり方の紹介。

JavaScriptではいくつかページ読み込みを待機する方法があります。 これらのやり方は、Tampermonkey、ユーザースクリプト上のビルトインを使いページ読み込みする場合とは挙動が異なる場合があります。

例えば以下のようなものです。

$(document).ready(function(){
  console.log("load: $(document).ready");
});

$(window).on('load', function() {
  console.log("load: $(window).on");
});

document.addEventListener('DOMContentLoaded', (event) => {
  console.log("load: DOMContentLoaded");
});

window.onload = function() {
  console.log("load: window.onload")
}

これらのやり方はいずれも不安定で、あるサイトでは正常に実行されるがあるサイトでは実行されない、動作しない、といったことや、サイトに実装されている機能、JavaScript、クリックボタンなどのインタラクションが動作しない、といった不具合につながる場合もあります。

そこでの対処として適切なやり方として、// @run-atを定義する方法が有効です。

(参考)

javascript – Userscript to wait for page to load before executing code techniques? – Stack Overflow

// @run-at      document-idle

Greasemonkey appears to have implemented this differently than Chrome/Tampermonkey did

ただしGreasemonkeyでのこの文はChromeのTampermonkeyでの挙動とは明らかに異なるようであることに注意したほうが良い。

It’s still more robust to use something like waitForKeyElements or MutationObserver

“waitForKeyElements”や”MutationObserver”を使ったほうが堅実。

あるいはwaitForKeyElementsを使う方法もあります。

(例)

waitForKeyElements ("YOUR_jQUERY_SELECTOR", function(){ .. });