Chrome扩展content_scripts无法检测Angular路由导航问题求助

因为Angular是单页应用（SPA），路由切换不会触发页面刷新，Chrome的content_scripts只会在初始页面加载时注入执行，所以从其他路由导航到目标路由时，脚本不会自动重新运行。以下是几个可行的解决办法：

方法1：监听页面URL变化（通用方案） #

直接在内容脚本里监听URL变化，一旦匹配目标路由就执行业务逻辑。用MutationObserver监听DOM变化（Angular路由切换会更新页面DOM），间接检测路由切换，比轮询更高效：

// 内容脚本代码
const targetUrlPattern = /^https:\/\/example\.com\/mypage1\//;

// 检查当前URL并执行逻辑
function checkAndRun() {
  if (targetUrlPattern.test(window.location.href)) {
    // 这里编写你的业务逻辑，比如DOM操作、数据处理等
    console.log('目标路由已加载，执行内容脚本逻辑');
  }
}

// 初始加载时先检查一次
checkAndRun();

// 监听DOM变化，间接检测路由切换
const observer = new MutationObserver(() => {
  checkAndRun();
});

observer.observe(document, {
  subtree: true,
  childList: true
});

方法2：监听Angular路由事件（精准方案） #

直接对接Angular的路由系统，检测更精准。由于内容脚本和页面上下文隔离，需要先注入脚本到页面上下文，再通过消息通知内容脚本：

// 内容脚本代码
// 要注入到页面上下文的监听脚本
const injectScript = `
  // 等待Angular Router实例可用
  function waitForAngularRouter() {
    return new Promise(resolve => {
      const checkInterval = setInterval(() => {
        const ngRoot = document.querySelector('[app-root]');
        if (ngRoot && ngRoot.__ngContext__) {
          const injector = ngRoot.__ngContext__[8]; // 不同Angular版本可能有差异，需自行调试确认
          const router = injector.get(window.ng.coreTokens.Router);
          if (router) {
            clearInterval(checkInterval);
            resolve(router);
          }
        }
      }, 100);
    });
  }

  // 监听路由导航完成事件
  async function setupRouterListener() {
    const router = await waitForAngularRouter();
    router.events.subscribe(event => {
      if (event instanceof window.ng.router.NavigationEnd) {
        if (/^\/mypage1\//.test(event.urlAfterRedirects)) {
          // 通知内容脚本执行逻辑
          window.postMessage({ type: 'ANGULAR_ROUTE_CHANGED', url: event.urlAfterRedirects }, '*');
        }
      }
    });
  }

  setupRouterListener();
`;

// 创建script标签注入页面
const script = document.createElement('script');
script.textContent = injectScript;
document.head.appendChild(script);
script.remove();

// 内容脚本监听页面发来的消息
window.addEventListener('message', (event) => {
  if (event.data.type === 'ANGULAR_ROUTE_CHANGED' && /^https:\/\/example\.com\/mypage1\//.test(event.data.url)) {
    // 执行你的业务逻辑
    console.log('Angular路由切换到目标页面，执行内容脚本');
  }
});

注：Angular版本不同，获取Router实例的方式可能有变化，需要自行调试页面的__ngContext__结构调整代码。

方法3：通过扩展后台定时检查（补充方案） #

利用Chrome扩展的后台脚本，定时检查标签页URL，匹配时注入内容脚本。需要在manifest中添加scripting和tabs权限：

// background.js代码
// 定时检查所有标签页
setInterval(async () => {
  const targetTabs = await chrome.tabs.query({ url: 'https://example.com/mypage1/*' });
  targetTabs.forEach(tab => {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: ['content-script.js']
    });
  });
}, 1000);

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