在 YouTube 的浏览器导航中未加载 Chrome 扩展程序 [英] Chrome extension is not loading on browser navigation at YouTube
问题描述
假设我有一个扩展程序会在您到达 YouTube 视频页面时加载.我注意到当用户使用 Chrome 按钮来回导航时，该扩展程序很可能不会加载.
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.
举个例子，我有 2 个文件，清单:
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"]
}
]
}
和内容脚本
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 已开始试用基于 pushState 的导航.通常，只能通过注入拦截对 history.replaceState/history.pushState 调用的代码(或使用 chrome.webNavigation.onHistoryStateUpdated 后台页面中的事件).
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).
此答案的其余部分特定于 YouTube.
YouTube 在加载期间会在页面顶部显示(红色)进度条.此进度条使用 CSS 过渡进行动画处理.由于过渡事件冒泡，您可以将过渡事件侦听器绑定到 ，并在这些情况下检查导航.
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.
您必须在 *://www.youtube.com/* 而不是 *://www.youtube.com/watch* 插入您的内容脚本，因为 pushState 可用于从 / 导航到 /watch...
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();
注意:此方法取决于插入进度条的事实.每当 Google 决定重命名进度条的 ID 或完全删除进度条时，您的代码将停止工作.
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.
注意 2:这仅适用于活动标签.如果需要在 tab 未聚焦时检测导航变化，则需要绑定一个 window.onfocus 和 window.onblur 事件，并检查 document.title 在这些事件之间发生了变化.
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.
这篇关于在 YouTube 的浏览器导航中未加载 Chrome 扩展程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
