使用Vanilla JS开发Chrome扩展时如何检测React页面所有组件已完成加载

方案1：MutationObserver 监听（最优推荐） #

该方案完全替代轮询，仅在DOM发生实际变更时触发回调，无多余性能消耗，响应即时，适配所有动态渲染场景。
你可以指定监听范围为React根节点或作业列表的父容器，当检测到目标作业元素完全渲染后执行逻辑，完成后立即断开监听释放资源：

// 自定义配置：目标作业元素选择器、监听根节点、超时时间
const TARGET_ASSIGNMENT_SELECTOR = '.assignment-item.unfinished';
const OBSERVE_ROOT = document.querySelector('#root') || document.body;
const MAX_WAIT_TIME = 5000;

const renderObserver = new MutationObserver((mutations, observerInstance) => {
  // 检查是否已渲染出符合要求的未完成作业元素
  const unfinishedAssignments = document.querySelectorAll(TARGET_ASSIGNMENT_SELECTOR);
  // 可根据业务调整判断条件，比如作业数量达到预期、元素属性完全加载等
  if (unfinishedAssignments.length > 0) {
    // 执行你的任务清单生成逻辑
    generateTaskList(unfinishedAssignments);
    // 逻辑执行完成后立即断开监听，避免性能损耗
    observerInstance.disconnect();
  }
});

// 启动监听，配置可根据实际场景调整
renderObserver.observe(OBSERVE_ROOT, {
  childList: true, // 监听子节点增减
  subtree: true, // 监听所有后代节点变化
  // attributes: true 若需要监听元素属性（如作业完成状态标记）变更可开启
});

// 兜底超时逻辑，避免极端场景下监听长期挂起
setTimeout(() => {
  renderObserver.disconnect();
  console.warn('作业元素监听超时，未检测到目标内容');
}, MAX_WAIT_TIME);

方案2：React场景定向优化（兼容度稍低） #

如果目标站点未隐藏React全局实例，可通过React渲染生命周期进一步优化：

• 若能获取到作业列表对应组件的Fiber节点，可监听组件commit阶段结束触发逻辑，该方案耦合性较高，仅适合特定站点的定制扩展使用
• 若作业列表在路由切换后渲染，可监听history.pushState/history.replaceState事件，路由变更后再启动MutationObserver，缩小监听范围降低消耗

方案3：requestAnimationFrame 智能轮询（兜底方案） #

如果遇到特殊场景MutationObserver无法生效，可使用requestAnimationFrame替代setInterval，它会和浏览器渲染节奏同步，性能远高于固定间隔轮询：

const TARGET_SELECTOR = '.assignment-item.unfinished';
const MAX_WAIT_TIME = 5000;
const startTime = Date.now();

function checkRenderStatus() {
  const targetElements = document.querySelectorAll(TARGET_SELECTOR);
  if (targetElements.length > 0) {
    generateTaskList(targetElements);
    return;
  }
  // 超时判断
  if (Date.now() - startTime > MAX_WAIT_TIME) {
    console.warn('轮询超时');
    return;
  }
  requestAnimationFrame(checkRenderStatus);
}

window.addEventListener('load', checkRenderStatus);

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