Chrome/Firefox扩展兼容问题：YouTube Music播放列表导航检测失效

Firefox暂不支持Navigation API的navigate事件，而YouTube Music作为单页应用(SPA)，其路由机制不会触发常规页面刷新，popstate事件也可能因实现逻辑无法覆盖所有导航场景。以下是几种比setInterval更高效的替代方案：

方案1：拦截History API方法 #

直接拦截history.pushState和history.replaceState（SPA路由变化常用的核心API），结合hashchange事件覆盖所有路由更新场景：

// 保存原始方法引用
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;

// 路由变化时执行的检测逻辑
function checkPlaylistRoute() {
  if (window.location.href.includes("music.youtube.com/playlist")) {
    playlistLoaded();
  }
}

// 重写pushState，触发检测
history.pushState = function(...args) {
  originalPushState.apply(this, args);
  checkPlaylistRoute();
};

// 重写replaceState，触发检测
history.replaceState = function(...args) {
  originalReplaceState.apply(this, args);
  checkPlaylistRoute();
};

// 监听hash路由变化
window.addEventListener('hashchange', checkPlaylistRoute);

// 页面初始加载时执行一次检测
checkPlaylistRoute();

这种方式精准对应SPA的路由更新动作，无冗余轮询，性能更优。

方案2：使用MutationObserver监听DOM变化 #

YouTube Music在路由切换时会更新页面DOM（比如标题、导航活跃项），可以通过监听DOM变化间接检测路由更新：

// 创建观察者实例
const routeObserver = new MutationObserver(() => {
  if (window.location.href.includes("music.youtube.com/playlist")) {
    playlistLoaded();
  }
});

// 配置监听范围：监听文档属性及整个DOM树的子元素变化
routeObserver.observe(document, {
  attributes: true,
  childList: true,
  subtree: true
});

// 初始加载检测
checkPlaylistRoute();

优化建议：可以通过浏览器开发者工具定位YouTube Music中与当前路由绑定的特定DOM元素（比如顶部导航的活跃项、页面标题元素），缩小监听范围，减少不必要的回调触发。

方案3：结合popstate事件 #

部分SPA在浏览器前进/后退时会触发popstate事件，可将其与History API拦截结合，覆盖完整导航场景：

// 监听浏览器前进后退
window.addEventListener('popstate', checkPlaylistRoute);

推荐方案 #

优先选择方案1，它直接针对SPA路由更新的核心API，逻辑清晰且性能损耗最低，能完美覆盖YouTube Music的所有导航场景。

内容的提问来源于stack exchange，提问作者DipCrai