Question

假设我有一个在您到达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");

在来回导航时，警报并不总是显示出来。我怎样才能克服这个问题，以便每次都加载扩展？

Answer 1

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：这仅适用于活动标签。如果您需要在选项卡未聚焦时检测导航更改，则需要绑定window.onfocus和window.onblur事件，并检查document.title是否在这些事件之间发生了更改。

YouTube上的浏览器导航未加载Chrome扩展程序

1 个答案: