如何检测 Safari 扩展中的历史状态变化？

Question

我一直在开发一个跨浏览器扩展程序（适用于 Chrome、Firefox、Opera 等），它会在用户每次转到 Youtube 上的新页面时运行一个脚本。由于 Youtube 使用历史 API 的 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"});
}

我想将我的扩展程序移植到 Safari，但根据他们的 documentation，不支持 onHistoryStateUpdated。有没有其他方法可以检测 Safari 中 pushState 的变化？

P.S。我希望我解释得足够好，因为这是我在 Stack Exchange 上的第一个问题。提前致谢！

Answer 1

在搜索 Mozilla 开发网络 (MDN) 后，我找到了一个适用于我的扩展的解决方案（链接 here），该解决方案适用于 Safari。它涉及检测选项卡更改而不是历史状态更改，如下所示。

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);

注意：为了检测其他网站的选项卡更改，需要将其他网站添加到清单文件中的主机权限列表中。

希望这对其他人的扩展开发有所帮助。谢谢！

如何检测 Safari 扩展中的历史状态变化？

How to detect history state change in a Safari extension?

javascript

safari-extension

pushstate

browser-extension