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

【问题标题】：How to detect history state change in a Safari extension?如何检测 Safari 扩展中的历史状态变化？
【发布时间】：2021-11-29 09:55:08
【问题描述】：

我一直在开发一个跨浏览器扩展程序（适用于 Chrome、Firefox、Opera 等），每次用户进入 Youtube 上的新页面时都会运行一个脚本。由于 Youtube 使用 History API 的 pushState 导航到新页面，因此仅在重新加载页面或在地址栏中明确输入 URL 时，以声明方式注入脚本才有效。为了解决这个问题，我使用 webNavigation API 中的 onHistoryStateUpdated 以编程方式注入脚本（如 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 的更改？

附：我希望我解释得足够好，因为这是我在 Stack Exchange 上的第一个问题。提前非常感谢！

【问题讨论】：

标签： javascript safari-extension pushstate browser-extension

【解决方案1】：

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

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

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

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

【讨论】：