Google chrome extension Chrome扩展未加载到YouTube的浏览器导航上

假设我有一个扩展，当你到达YouTube视频页面时，它会加载。我注意到，当你使用Chrome按钮来回导航时，扩展很可能不会加载

例如，我有两个文件，清单：

{
    "name": "back forth",
    "version": "0.1",
    "manifest_version": 2,
    "description": "back forth",
    "permissions": ["storage", "*://www.youtube.com/watch*"],
    "content_scripts": [
        {
            "matches": ["*://www.youtube.com/watch*"],
            "js": ["contentscript.js"]
        }
    ]
}

还有内容脚本

alert("loaded");

---

来回导航时，警报并不总是显示。如何克服这个问题，使扩展每次都加载？

YouTube已经开始了基于pushState的导航的试用。通常，只有通过注入截获调用

history.replaceState

/

history.pushState

（或使用后台页面中的事件）的代码，才能在内容脚本中检测到此类导航

这个答案的其余部分是针对YouTube的。
加载期间，YouTube在页面顶部显示一个（红色）进度条。此进度条使用CSS转换设置动画。由于转换事件冒泡，您可以将转换事件侦听器绑定到

，并在这些情况下检查导航

您必须在

*://www.youtube.com/*

而不是

*://www.youtube.com/watch*

插入内容脚本，因为pushState可用于从

/

导航到

/watch..

函数afterNavigate（）{
if（'/watch'==location.pathname）{
警报（‘监视页面’）；
}
}
（document.body | | document.documentElement）.addEventListener（'transitionend'，
函数（/*TransitionEvent*/event）{
if（event.propertyName=='width'&&event.target.id=='progress'）{
后导航（）；
}
}，对）；
//页面加载后
后导航（）；

注意：此方法取决于插入进度条这一事实。每当Google决定重命名进度条的ID，或者完全删除进度条时，您的代码将停止工作

---

注2：这仅适用于活动选项卡。如果需要在选项卡未聚焦时检测导航更改，则需要绑定

窗口.onfocus

和

窗口.onblur

事件，并检查

文档.title

在这些事件之间是否已更改。

感谢您的回答。使用此方法，它可以工作，但并不早于DOMContentLoaded，这似乎相当于

load

，是否有检测

DOMContentLoaded

-类似点的方法？@Noitidart如果您真的想尽快得到通知，您可以绑定到

transitionstart

事件，轮询文档更改（使用

setTimeout

或

setInterval

）。找到所需的元素后，取消注册transitionstart事件+停止轮询+调用自定义回调。为确保不会浪费CPU周期，请将其与transitionend事件结合；如果轮询逻辑在该点未检测到任何内容，请删除事件侦听器，停止轮询器并调用回调。Genius idea@RobW谢谢！我尝试添加

window.onpopstate=function（e）{console.log（e）}

我认为这会奏效，但我没有收到任何回电。@sports

location.path

是一个打字错误，应该是

location.pathname

@Noitidart是的，可能是Firefox的chrome.webNavigation.onHistoryStateUpdated（但仅在主/后台脚本中，而不是在内容脚本中，就像Chrome一样）。类似