Chrome扩展开发：YouTube视频点击/自动播放后无法重定向求助

YouTube采用**单页应用（SPA）**架构，站内点击视频或自动播放时，页面并不会刷新，而是通过pushState/replaceState等History API更新URL。你的content script仅在页面首次加载时执行一次，后续URL变化不会触发脚本重新运行，因此重定向逻辑无法生效。直接访问或刷新页面时，页面会重新加载，脚本会再次执行，所以重定向正常。

仅用JS完全可以实现需求，核心是监听YouTube的URL变化，在URL更新后重新执行重定向逻辑。以下是两种可行方案：

方案1：在Content Script中监听URL变化 #

修改你的contentscript.js，添加URL变化监听逻辑，定时检查当前URL并执行重定向：

function checkAndRedirect() {
  const urlParams = new URLSearchParams(window.location.search);
  const videoId = urlParams.get('v');
  
  switch (videoId) {
    case "abcxxx":     
      window.location.replace("https://www.youtube.com/watch?v=123xxx");
      break;
    case "defxxx":
      window.location.replace("https://www.youtube.com/watch?v=456xxx");
      break;
  }
}

// 页面初始加载时执行一次
checkAndRedirect();

// 定时检查URL变化（适配SPA路由跳转）
let lastUrl = window.location.href;
setInterval(() => {
  const currentUrl = window.location.href;
  if (currentUrl !== lastUrl) {
    lastUrl = currentUrl;
    checkAndRedirect();
  }
}, 100); // 可根据需求调整检查间隔

// 监听浏览器前进/后退的popstate事件
window.addEventListener('popstate', checkAndRedirect);

方案2：使用WebNavigation API（更高效） #

利用Chrome扩展的webNavigation API在后台脚本中监听URL变化，这种方式无需定时轮询，更高效准确：

1. 修改manifest.json，添加后台脚本配置：

{
  // ... 原有配置 ...
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

2. 创建background.js文件，添加监听逻辑：

chrome.webNavigation.onHistoryStateUpdated.addListener((details) => {
  const url = new URL(details.url);
  const videoId = url.searchParams.get('v');
  let targetUrl = null;

  switch (videoId) {
    case "abcxxx":
      targetUrl = "https://www.youtube.com/watch?v=123xxx";
      break;
    case "defxxx":
      targetUrl = "https://www.youtube.com/watch?v=456xxx";
      break;
  }

  // 避免循环重定向
  if (targetUrl && targetUrl !== details.url) {
    chrome.tabs.update(details.tabId, { url: targetUrl });
  }
}, { 
  url: [{ 
    hostEquals: 'www.youtube.com', 
    pathContains: '/watch' 
  }] 
});

• 方案1的定时轮询会有轻微延迟，但实现简单；方案2更适合SPA场景，无延迟且性能更好。
• 确保你的扩展权限中已包含webNavigation（你的manifest中已经配置，无需额外添加）。
• 若使用方案2，需注意避免循环重定向（代码中已通过targetUrl !== details.url判断）。

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