Chrome扩展程序无法在YouTube上的浏览器导航中加载 [英] Chrome extension is not loading on browser navigation at YouTube
问题描述
假设我在YouTube视频页面上加载了一个扩展程序。我注意到，当使用Chrome按钮来回导航时，扩展程序很可能无法加载。
举例来说，我有两个文件，清单：
{
name：back forth，
version：0.1，
manifest_version：2，
description：前进，
权限：[storage，*：//www.youtube.com/watch*]，
content_scripts：[
{
matches：[*：/ /www.youtube.com/watch*]，
js：[contentscript.js]
}
]
}
和内容
alert（ 加载）;
来回导航时并不总是显示警报。
解决方案YouTube已开始基于PushState的导航的试用版。通常，只能通过注入拦截对
history.replaceState/history.pushStatechrome.webNavigation.onHistoryStateUpdated）。
这个答案的其余部分特定于YouTube。
在加载过程中，YouTube在页面顶部显示一个（红色）进度条。这个进度条是使用CSS过渡动画的。由于转换事件冒泡，您可以将转换事件侦听器绑定到< body>，并在这些情况下检查导航。
您必须将内容脚本插入
*：//www.youtube.com/*，而不是*：//www.youtube .com / watch *，因为pushState可用于从/导航到/ watch .. $ bfunction afterNavigate（）{
if（'/ watch' === location.pathname）{
alert（'观看页面！'）;
}
（document.body || document.documentElement）.addEventListener（'transitionend'，
function（/ * TransitionEvent * / event）{
if （event.propertyName ==='width'&& event.target.id ==='progress'）{
afterNavigate（）;
}
}，true）;
//在页面载入
后导航（）;
注意：此方法取决于插入进度条的事实。每当Google决定重命名进度栏的ID时，或者完全删除进度栏时，您的代码将停止工作。
注意2：仅适用于活动选项卡。如果您需要在选项卡未关注时检测导航更改，则需要绑定 window.onfocus 和 window.onblur 事件，并检查 document.title 是否在这些事件之间发生了变化。
Let's say I have an extension that loads when you arrive at a YouTube video page.I have noticed that when one navigates back and forth using the Chrome buttons, the extension most probably won't load.
As an example, I have 2 files, the manifest:
{
"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"]
}
]
}
and the contentscript
alert("loaded");
The alert does not always show up when navigating back and forth. How can I overcome this, so that the extension loads every time?
YouTube has started a trial with pushState-based navigation. In general, such navigations can only be detected within content scripts by injecting code that intercept calls to history.replaceState / history.pushState (or by using the chrome.webNavigation.onHistoryStateUpdated event in the background page).
The remainder of this answer is specific to YouTube.
YouTube shows a (red) progress bar on top of the page during load. This progress bar is animated using a CSS transition. Since transition events bubble, you can bind a transition event listener to <body>, and check navigation in these cases.
You have to insert your content script at *://www.youtube.com/* instead of *://www.youtube.com/watch*, because pushState can be used to navigate from / to /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();
Note: This method depends on the fact that the progress bar is inserted. Whenever Google decides to rename the ID of the progress bar, or remove the progress bar altogether, your code will cease to work.
Note 2: This only works for active tabs. If you need to detect navigation changes while the tab is not focused, then you need to bind a window.onfocus and window.onblur event, and check whether document.title has changed between these events.
这篇关于Chrome扩展程序无法在YouTube上的浏览器导航中加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
