在开发油猴脚本或浏览器插件时，我们有时需要检测YouTube的URL变化，并根据新页面做出相应的修改。然而，传统的URL变化监听方法在YouTube上可能会失效。本文将介绍一种解决方案，通过监听YouTube的yt-navigate-finish事件，来无缝地检测页面导航并修改页面外观。

问题描述

由于YouTube采用了SPA（单页应用）架构，传统的基于window.location的URL变化监听方法在YouTube上无法正常工作。这意味着在YouTube页面上进行导航时，URL会变化，但页面不会重新加载，导致我们无法检测到这些变化并做出相应的处理。

解决方案

YouTube在页面导航完成后，会触发一个自定义事件yt-navigate-finish。我们可以监听这个事件，来检测URL变化，并在每次导航完成后执行我们的代码。

代码示例

以下是一个完整的代码示例，用于监听YouTube的URL变化并在导航完成后执行相应的代码：

document.body.addEventListener("yt-navigate-finish", function(event) {
    // 在这里添加你的代码
    console.log("YouTube页面导航完成！");
    // 示例：修改页面外观
    modifyYouTubePageAppearance();
});

function modifyYouTubePageAppearance() {
    // 示例：修改YouTube页面的背景颜色
    document.body.style.backgroundColor = "#f0f0f0";
    // 其他修改操作
}

代码解释

1. 监听yt-navigate-finish事件： 通过在document.body上添加事件监听器，监听yt-navigate-finish事件。当YouTube页面导航完成时，该事件将被触发。

2. 执行相应的代码： 在事件处理函数中，可以添加任意代码来修改页面外观或执行其他操作。这里以修改页面背景颜色为例。

实际应用

在实际应用中，你可以根据需要在事件处理函数中添加更多复杂的操作，例如插入新的DOM元素、修改现有元素的样式或内容等。

document.body.addEventListener("yt-navigate-finish", function(event) {
    // 检查新的URL，决定执行哪些操作
    if (window.location.href.includes("watch")) {
        // 如果是视频播放页面，执行特定操作
        enhanceVideoPage();
    } else if (window.location.href.includes("results")) {
        // 如果是搜索结果页面，执行其他操作
        enhanceSearchResultsPage();
    }
});

function enhanceVideoPage() {
    // 修改视频播放页面的外观
    console.log("修改视频播放页面的外观");
    // 示例：在视频下方添加一个自定义按钮
    const button = document.createElement("button");
    button.innerText = "自定义按钮";
    document.querySelector("#info").appendChild(button);
}

function enhanceSearchResultsPage() {
    // 修改搜索结果页面的外观
    console.log("修改搜索结果页面的外观");
    // 示例：高亮搜索结果中的某些关键词
    document.querySelectorAll("#video-title").forEach(title => {
        if (title.innerText.includes("关键字")) {
            title.style.color = "red";
        }
    });
}

总结

通过监听yt-navigate-finish事件，可以有效地检测YouTube的URL变化，并在页面导航完成后执行相应的代码。这种方法不仅简单高效，还能保证在YouTube上进行无缝的页面外观修改。

参考资料

• How to detect page navigation on YouTube and modify its appearance seamlessly?