URL が動的に変わった場合に何かする（ Chrome 拡張で）

追記

chrome.tabs.onUpdated の方がいいかも。

ユーザーに対して "ブラウザの履歴" 権限を要求しないのも、ユーザーの心象が良い。

---

追記前の文章ここから

URL が動的に変わった場合、とは要するに pushState された後に何かすることを指す。

window.popstate イベント というのがあるが、これは現在の Chrome などのブラウザでは使えない。

ではどうするか ... というと、chrome.webNavigation API の onHistoryStateUpdated イベントを listen すれば良い。

https://example.com/* でページの URL が変更された場合 *1 に何かするコードの例：

chrome.webNavigation.onHistoryStateUpdated.addListener(
  detail => { /* 何かする */ },
  { url: { urlPrefix: 'https://example.com/'} },
);

このコードは background service worker でしか動かないので、content script でなにかしたい場合は chrome.tabs.sendMessage() で content script にメッセージを投げる。

/* background.ts */
chrome.webNavigation.onHistoryStateUpdated.addListener(
  detail => chrome.tabs.sendMessage(detail.tabId),
  { url: { urlPrefix: 'https://example.com/'} },
);

/* content.ts */
chrome.runtime.onMessage.addListener(() => {
  /* 何かする */
});

ネック

この方法の唯一のネックは、ユーザーに webNavigation permission をインストール時に要求することになること。

「おいおい何で history にアクセスできる権限を要求するんだよ！！」とクレームが来たことが１度だけあるので、気にする人は気にするかもしれない。

*1:動的に変わった場合も、初回読み込み時も含む