Chrome扩展程序无法在YouTube上的浏览器导航中加载
假设我在YouTubevideo页面上加载了一个扩展程序。我注意到，当使用Chromebutton来回导航时，很可能无法加载扩展程序。
作为一个例子，我有2个文件，清单：
{ "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 （或通过在后台页面中使用chrome.webNavigation.onHistoryStateUpdated事件）的调用的代码，才能在内容脚本中检测到此类导航。
这个答案的其余部分是特定于YouTube的。
YouTube在加载过程中在页面顶部显示（红色）进度条。 这个进度条是使用CSS过渡animation的。 由于转换事件冒泡，因此可以将转换事件侦听器绑定到<body> ，并在这些情况下检查导航。
您必须将内容脚本插入*://www.youtube.com/*而不是*://www.youtube.com/watch* ，因为可以使用pushState来导航/watch.. 。
function afterNavigate() { if ('/watch' === location.pathname) { alert('Watch page!'); } } (document.body || document.documentElement).addEventListener('transitionend', function(/*TransitionEvent*/ event) { if (event.propertyName === 'width' && event.target.id === 'progress') { afterNavigate(); } }, true); // After page load afterNavigate();
注意：这个方法取决于进度条被插入的事实。 每当Google决定重命名进度条的ID时，或者完全删除进度栏时，您的代码将停止工作。
注2：这仅适用于活动选项卡。 如果您需要在选项卡未聚焦的情况下检测到导航更改，则需要绑定一个window.onfocus和window.onblur事件，并检查这两个事件之间的document.title是否已更改。
