abi*_*nop 11 youtube google-chrome-extension content-script
假设我有一个扩展程序,当你到达YouTube视频页面时加载.我注意到当使用Chrome按钮来回导航时,扩展程序很可能无法加载.
作为一个例子,我有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");
在来回导航时,警报并不总是显示出来.我怎样才能克服这个问题,以便扩展每次加载？
Rob*_*b W 20
YouTube已开始使用基于pushState的导航进行试用.通常,只能通过注入拦截调用history.replaceState/ history.pushState(或通过使用chrome.webNavigation.onHistoryStateUpdated后台页面中的事件)的代码在内容脚本中检测此类导航.
此答案的其余部分仅适用于YouTube.
YouTube在加载过程中会在页面顶部显示一个(红色)进度条.此进度条使用CSS过渡进行动画处理.由于转换事件会冒泡,因此您可以将转换事件侦听器绑定到<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:这仅适用于活动选项卡.如果您需要在选项卡未聚焦时检测导航更改,则需要绑定a window.onfocus和window.onblur事件,并检查document.title这些事件之间是否已更改.
| 归档时间： |
|
| 查看次数： |
4326 次 |
| 最近记录： |