个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
假设我有一个扩展程序，当您到达 YouTube 视频页面时会加载。我注意到，当您使用 Chrome 按钮来回导航时，该扩展程序很可能不会加载。
例如，我有 2 个文件， list :
{
"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 的导航。通常，此类导航只能通过注入(inject)拦截对 history.replaceState 的调用的代码在内容脚本中检测到。/history.pushState (或通过使用后台页面中的 chrome.webNavigation.onHistoryStateUpdated 事件)。
此答案的其余部分特定于 YouTube。
YouTube 在加载过程中会在页面顶部显示一个(红色)进度条。此进度条使用 CSS 过渡动画。由于转换事件冒泡，您可以将转换事件监听器绑定(bind)到 <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();
window.onfocus和
window.onblur事件，并检查是否
document.title在这些事件之间发生了变化。
关于google-chrome-extension - Chrome 扩展程序未在 YouTube 的浏览器导航中加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18397962/
25
4
0
我是一名优秀的程序员,十分优秀！