17

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

来回导航时，警报并不总是出现。我该如何克服这个问题，以便每次都加载扩展程序？

4

1 回答 1

26

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：这仅适用于活动选项卡。如果需要在 tab 没有聚焦时检测导航的变化，则需要绑定一个window.onfocusandwindow.onblur事件，并检查document.title这些事件之间是否发生了变化。

于 2013-08-23T09:04:37.430 回答