如何检测 YouTube 页面导航以进行无缝 HTML 插入？

检测 YouTube 页面导航以进行无缝 HTML 插入

无缝修改 YouTube 页面的外观可能具有挑战性，尤其是在涉及页面导航时。当脚本仅在页面刷新后工作而不是在网站导航时工作时，这一点变得很明显。

要解决此问题，检测 YouTube 上的页面导航至关重要。与导航时重新加载的传统网页不同，YouTube 会替换历史状态，使内容脚本重新注入无效。

幸运的是，YouTube 上存在多种检测页面转换的方法：

1.后台页面或 Service Worker 脚本

在后台页面或 MV3 Service Worker 脚本中使用 webNavigation 或选项卡 API。

2.内容脚本和navigatesuccess事件

利用现代Chrome中的内容脚本来侦听navigatesuccess事件。

3.内容脚本和 YouTube 的导航事件

YouTube 有一个专门用于视频导航的事件：yt-navigate-start。此事件非常适合检测页面转换。

使用以下实现yt-navigate-start

manifest.json

{
  "name": "YouTube Playlist Length",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": ".............",
  "content_scripts": [{
      "matches": [ "http://*.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() {
  // Code to alter the page
}

通过使用 yt-navigate-start 事件，内容脚本可以检测页面导航并修改无缝 HTML，消除任何延迟或页面刷新的需要。

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