如何无缝检测和修改 YouTube 页面导航？

将无缝页面修改集成到 YouTube 导航中

检测 YouTube 上的页面导航

与传统方式不同对于在导航时重新加载页面的网站，YouTube 采用了一种替换历史状态的技术，避免了内容脚本

页面转换检测方法

要检测 YouTube 上的页面转换，请考虑以下方法：

• 后台脚本(MV3 Service Worker): 利用 webNavigation API 或选项卡API。
• 内容脚本和导航成功事件：在现代 Chrome 中可用。
• 内容脚本和 YouTube 的自定义事件：利用 'yt-navigate -start' 或 'yt-navigate-finish'事件。

实施解决方案

manifest.json:

{
  "matches": ["*://*.youtube.com/*"],
  "js": ["content.js"],
  "run_at": "document_start"
}

content.js:

document.addEventListener('yt-navigate-start', process);
if (document.body) process();
else document.addEventListener('DOMContentLoaded', process);

页面处理函数修改：

function process() {
  if (!location.pathname.startsWith('/playlist')) return;
  var seconds = [...document.getElementsByClassName('timestamp')]
    .reduce((sum, ts) => {
      const minsec = ts.textContent.split(':');
      return sum + minsec[0] * 60 + minsec[1] * 1;
    }, 0);

  if (!seconds) {
    console.warn('Empty playlist');
    return;
  }

  const timeHMS = new Date(seconds * 1000)
    .toUTCString()
    .split(' ')[4]
    .replace(/^[0:]+/, '');

  document
    .querySelector('.pl-header-details')
    .insertAdjacentHTML('beforeend', `

Length: ${timeHMS}

`); }

以上是如何无缝检测和修改 YouTube 页面导航？的详细内容。更多信息请关注PHP中文网其他相关文章！