How to detect history state change in a Safari extension?

Question

I've been developing a cross-browser extension (for Chrome, Firefox, Opera, etc) that runs a script every time the user goes to a new page on Youtube. Since Youtube uses the History API's pushState to navigate to a new page, injecting the script declaratively only works when a page is reloaded or the URL is explicitly entered into the address bar. To get around this, I used onHistoryStateUpdated from the webNavigation API to inject the script programmatically (as explained here).

manifest.json:

...
"permissions": ["webNavigation", "https://*.youtube.com/*"]
...

background.js:

chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
chrome.tabs.executeScript(details.tabId, {file: "/content.js"});
}

I want to port my extension to Safari, but according to their documentation, onHistoryStateUpdated is not supported. Are there any alternative ways to detect changes for pushState in Safari?

P.S. I hope I'm explaining this well enough, since this is my first question on Stack Exchange. Thanks so much in advance!

score 0 · Accepted Answer · answered Nov 12 '21 at 06:32

After searching through the Mozilla Development Network (MDN), I found a solution (linked here) for my extension that works with Safari. It involves detecting tab changes instead of history state changes, shown below.

manifest.json:

...
"permissions": ["https://*.youtube.com/*"]
...

background.js:

function handleUpdated(tabId, changeInfo) {
if (changeInfo.url) {
browser.tabs.executeScript({file: "/content.js"});
}
}
browser.tabs.onUpdated.addListener(handleUpdated);

Note: In order to detect tab changes for other websites, the other websites need to be added to the host permissions list in the manifest file.

Hope this helps others in their extension development. Thanks!

How to detect history state change in a Safari extension?

1 Answers1