如何检测 YouTube 页面导航以动态更新 Chrome 扩展程序的内容？

检测 YouTube 上的页面导航并无缝更改内容

您正在开发一个 Chrome 扩展程序来计算和显示视频的总长度YouTube 播放列表，但该脚本仅在页面刷新后运行。为了克服这一限制，无缝检测页面导航并相应地修改 DOM 至关重要。

页面转换的事件侦听器

YouTube 在导航期间不会重新加载页面，而是取代历史状态。要检测此问题，可以使用多种方法：

• 后台页面：在后台页面或 MV3 Service Worker 中使用 webNavigation 或选项卡 API。
• 包含 Navigatesuccess 事件的内容脚本： 此事件在现代版本中可用Chrome。
• 包含 YouTube 自定义事件的内容脚本： YouTube 在导航过程中触发“yt-navigate-start”事件。

使用“yt-navigate” -start' 事件提供了一种更灵敏的方法来更改内容动态地。

实现

清单t.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;
  }
  // Process logic to gather and display total playlist length here
}

通过利用 'yt-navigate-start' 事件并实现必要的脚本逻辑，您可以有效地检测和响应 YouTube 上的页面导航，无缝更新页面内容，而无需任何延迟或页面刷新。

以上是如何检测 YouTube 页面导航以动态更新 Chrome 扩展程序的内容？的详细内容。更多信息请关注PHP中文网其他相关文章！