JavaScriptでページ遷移の無いサイトのURLの変更を検知したい

Question

Chromeで拡張機能を作成しています。

とあるサイトでページを移動したかどうかを検知して
拡張機能側からDOMを操作したりしたいのですが、

対象のサイトはpushState、replaceStateを使ってURLを変更し、
ページ遷移をしているように見せかけているサイトなので、
ページロード時やDOM構築時のイベントハンドラを使用しても通常のページ遷移とは異なるため、イベントが発生しないタイミングがしばしばあります。

そのため、URLの変更を検知したらページ遷移とみなしてDOM操作を行おうと思いつきまして、
URLの変更を検知するイベントなどを探したのですが、自分の力では見当たりませんでした。

hashchangeが用途に似ているのですが、ハッシュを付加させたりしないと検知できないのでダメでした。
ハッシュ値以外のURL部分が変化したらイベントを発生させるようなことは実現できるのでしょうか。

毎秒location.urlを監視するというような無理やりなやり方以外でお願いしたいです。
よろしくお願いいたします。

window.addEventListener("hashchange", funcRef, false);

Comments

[HayatoKamono]

https://stackoverflow.com/questions/4646360/monitoring-history-pushstate-from-a-chrome-extension/9651737

ちょっとググっただけなので役立つか分からないですが、古めの情報だとこんなのはありましたね。

[HiroshiSato]

ありがとうございます。提示していただいたURLを確認しました。いろいろな方法があるものですね。ただDOMをいじるような方法でしたので、もう少しシンプルな方法で実現できるかと思ってました。実現できそうな感じもしますが、検知したいだけなのにDOM操作したくないので、却下です。

Answer 1

Firefoxの場合はこのようなonLocationChangeを実装すれば良いようですが、
http://please-sleep.cou929.nu/20100301.html

chromeの場合はchrome.tabs.onUpdatedでイベントを拾って、
URLの差分をとって変更を検知するような仕組みはどうでしょうか。
https://developer.chrome.com/extensions/tabs#event-onUpdated

またはpushState/replaceStateでURLが変わるということは、
DOMにも何かしらの変更が発生しているということで、
DOMの変更を検知して、URLの差分→変更検知でもいいかもしれません。
https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

Comments

[HiroshiSato]

ありがとうございます！
chrome.tabs.onUpdatedは昨日、夜な夜なずっと調べていたらたまたま記事を見つけて
研究していたのですが、chrome.tabs.onUpdatedはbackground pageじゃないと使えないAPIなので
メッセージ経由でcontent scriptとやり取りをしないといけないので、
複数のタブで同一ページを開く可能性のあるので、URL変更のイベントをそれぞれのタブ毎に行う複雑な処理が自分には組めそうにないので諦めました。

MutationObserverを使った方法はページ毎に変わるDOMを指定してみて試したところ、
確かにURLの変更を検知したのと同じタイミングで取れました。
本当ならURLの変更を検知できればと思っていたのですが、それに拘らずとも似たタイミングでイベントを取れる方法が見つかって良かったです。これなら簡単に実装できそうです。

他にもjavascript内のオブジェクトの変化や一見URLの変更と関係なさそうなイベントを調べていったら実質的にURLが変わったタイミングとほぼ同じというものはいくつも見つかりそうですね。さらに調べてみようと思います。

皆様ありがとうございました。

Answer 2

onpopstate じゃあかんの?

Comments

[HiroshiSato]

onpopstateはすでに検証済みで、ブラウザの戻るボタンや進むボタンなどのブラウザアクション使用時のURL変更しか検知できません。
提示していただいたドキュメントにもそのように書いてあります。