如何在Chrome扩展中监听React Router客户端路由加载完成？

以下是几个无需修改目标网站代码的可行方案，可实现路由加载完成后的自定义回调：

1. Monkey Patch History原生方法（推荐） #

React Router的history模式会调用浏览器原生的pushState/replaceState方法，hash模式也可能通过这些方法更新路由。通过包装这些方法，可以精准捕获所有路由跳转行为，再等待React渲染完成后执行回调。

// 保存原生方法引用
const originalPush = history.pushState;
const originalReplace = history.replaceState;

// 包装pushState
history.pushState = function(...args) {
  const result = originalPush.apply(this, args);
  // 等待路由页面渲染完成后执行回调
  waitForRenderComplete().then(yourCustomCallback);
  return result;
};

// 包装replaceState
history.replaceState = function(...args) {
  const result = originalReplace.apply(this, args);
  waitForRenderComplete().then(yourCustomCallback);
  return result;
};

// 监听浏览器前进后退
window.addEventListener('popstate', () => {
  waitForRenderComplete().then(yourCustomCallback);
});

// 自定义等待渲染完成的逻辑
function waitForRenderComplete() {
  return new Promise(resolve => {
    const check = () => {
      // 替换为目标网站路由页面的标志性元素选择器（如主内容区）
      const targetElement = document.querySelector('#app-main');
      if (targetElement && targetElement.offsetParent !== null) {
        resolve();
      } else {
        requestAnimationFrame(check);
      }
    };
    check();
  });
}

// 你的自定义回调函数
function yourCustomCallback() {
  console.log('路由加载完成，执行扩展逻辑');
  // 这里添加你的扩展功能代码
}

优点：覆盖所有路由跳转场景（包括组件内编程式导航、Link点击、浏览器前进后退），稳定性高。
缺点：需要适配目标网站的标志性元素，调整等待逻辑。

2. 结合MutationObserver监听根容器变化 #

如果无法捕获history方法的调用，可以监听React根容器的DOM变化，当路由切换时根容器内的DOM会更新，通过防抖处理避免频繁触发。

const rootContainer = document.querySelector('#root'); // 替换为目标网站的React根容器选择器
if (rootContainer) {
  let debounceTimer;
  const observer = new MutationObserver((mutations) => {
    // 过滤仅DOM结构变化的情况（忽略文本、属性小修改）
    const hasStructureChange = mutations.some(m => 
      m.addedNodes.length > 0 || m.removedNodes.length > 0
    );
    if (hasStructureChange) {
      clearTimeout(debounceTimer);
      // 防抖延迟，适配目标网站的渲染速度（可调整）
      debounceTimer = setTimeout(() => {
        yourCustomCallback();
      }, 250);
    }
  });

  observer.observe(rootContainer, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
  });
}

优点：无需依赖history对象，适配性强。
缺点：可能因非路由的DOM变化触发回调，需要精准过滤；需找到正确的React根容器。

3. 监听原生路由事件（补充方案） #

针对hash模式的网站，可直接监听hashchange事件；history模式配合popstate事件处理浏览器前进后退，但无法捕获编程式导航，需结合方案1使用。

// 监听hash模式路由变化
window.addEventListener('hashchange', () => {
  waitForRenderComplete().then(yourCustomCallback);
});

// 监听history模式的浏览器前进后退
window.addEventListener('popstate', () => {
  waitForRenderComplete().then(yourCustomCallback);
});

优点：实现简单，无侵入性。
缺点：覆盖场景有限，无法捕获所有路由跳转行为。

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