YouTube 网站不会在导航时重新加载页面，它会替换历史状态。

当 URL 更改而不重新加载页面时，不会重新注入扩展程序的内容脚本。当然，当您手动重新加载页面时，会执行内容脚本。

有几种方法可以检测 Youtube 站点上的页面转换：

• 使用后台页面脚本：webNavigation API , tabs API

• 使用内容脚本：视频页面上进度表的transitionend事件

• 使用内容脚本和在视频导航上触发的特定于站点的事件：

  getEventListeners(document)在 devtools 控制台中运行并检查输出。

  

  在这种情况下，我们需要yt-navigate-start。

  笔记：

  • 对于其他任务，我们可能需要yt-navigate-finish
  • 旧的 youtube 设计正在使用spfdone事件

清单.json：

{
  "name": "YouTube Playlist Length",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": ".............",
  "content_scripts": [{
      "matches": [ "*://*.youtube.com/*" ],
      "js": [ "content.js" ],
      "run_at": "document_start"
  }]
}

注意：该matches键包含整个 youtube.com 域，以便在用户首次打开 youtube 主页然后导航到观看页面时运行内容脚本。

内容.js：

document.addEventListener('yt-navigate-start', process);

if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);

该process功能将改变页面。
请注意，指定的元素类和结构将来会发生变化。

function process() {
  if (!location.pathname.startsWith('/playlist')) {
    return;
  }
  var seconds = [].reduce.call(
    document.getElementsByClassName('timestamp'),
    function (sum, ts) {
      var minsec = ts.textContent.split(':');
      return sum + minsec[0] * 60 + minsec[1] * 1;
    },
    0,
  );
  if (!seconds) {
    console.warn('Got no timestamps. Empty playlist?');
    return;
  }
  var timeHMS = new Date(seconds * 1000).toUTCString().split(' ')[4]
    .replace(/^[0:]+/, ''); // trim leading zeroes
  document.querySelector('.pl-header-details')
    .insertAdjacentHTML('beforeend', '<li>Length: ' + timeHMS + '</li>');
}

2017年答案：

我将它用于新的 Material Design 版本 Youtube

body.addEventListener("yt-navigate-finish", function(event) {
    // code here
});

这对于旧的 Youtube

window.addEventListener("spfdone", function(e) {
    // code here
});

代码来自我编写的 2 个脚本，称为
“Youtube 字幕下载器”和“Youtube 自动字幕下载器”。

他们都工作，我测试过。

如果您对我的脚本感兴趣并想了解更多详细信息：https :
//github.com/1c7/Youtube-Auto-Subtitle-Download