开发浏览器扩展时如何检测YouTube页面变动（含Ajax视频切换场景）

YouTube的无刷新视频切换是通过HTML5 History API修改地址实现，不会触发页面重载，因此原生browser.tabs.onUpdated的complete状态无法捕获该场景，可通过以下两种方案实现检测：

你需要在适配YouTube站点的内容脚本中注入事件监听，捕获地址变动后通知后台脚本触发逻辑：

1. 内容脚本（content.js）代码：

let lastVideoUrl = location.href;

// 劫持pushState，捕获手动跳转视频的场景
const originalPushState = history.pushState;
history.pushState = function (...args) {
  originalPushState.apply(this, args);
  checkVideoChange();
};

// 劫持replaceState，捕获YouTube自动跳转的场景
const originalReplaceState = history.replaceState;
history.replaceState = function (...args) {
  originalReplaceState.apply(this, args);
  checkVideoChange();
};

// 监听popstate，捕获浏览器前进后退的场景
window.addEventListener('popstate', checkVideoChange);

// 统一校验视频是否切换
function checkVideoChange() {
  const currentUrl = location.href;
  // 仅当地址变化且为YouTube视频页时触发
  if (currentUrl !== lastVideoUrl && location.pathname === '/watch') {
    lastVideoUrl = currentUrl;
    // 给后台脚本发送消息
    browser.runtime.sendMessage({
      type: 'YOUTUBE_VIDEO_SWITCH',
      currentUrl: currentUrl
    });
  }
}

2. 后台脚本新增消息监听逻辑：

browser.runtime.onMessage.addListener((message, sender) => {
  if (message.type === 'YOUTUBE_VIDEO_SWITCH') {
    // 直接使用消息来源的标签页对象调用方法
    GetInitialInfo(sender.tab);
  }
});

如果不想劫持页面原生API，可以监听YouTube页面DOM的特征变化触发校验：

// 内容脚本中添加
let lastVideoUrl = location.href;
const observer = new MutationObserver(() => {
  const currentUrl = location.href;
  if (currentUrl !== lastVideoUrl && location.pathname === '/watch') {
    lastVideoUrl = currentUrl;
    browser.runtime.sendMessage({
      type: 'YOUTUBE_VIDEO_SWITCH',
      currentUrl: currentUrl
    });
  }
});

// 监听页面DOM树变动，可根据实际情况缩小监听范围降低性能损耗
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: false,
  characterData: false
});

// 页面卸载时断开监听避免内存泄漏
window.addEventListener('beforeunload', () => {
  observer.disconnect();
});

• 在manifest.json中声明内容脚本的匹配规则为*://*.youtube.com/*，同时授予tabs权限
• 可新增防抖逻辑，避免单次视频切换触发多次GetInitialInfo调用
• 校验地址时可额外匹配v参数的取值，确认是不同视频再触发逻辑，减少无效调用

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