Chrome扩展与React SPA交互问题：组件重渲染后无法注入代码

方案一：用MutationObserver监听DOM变化（首选） #

React重渲染时会修改真实DOM，通过MutationObserver可以监听表格容器的节点变化，自动为新增的行注入代码，无需手动触发。

实现步骤： #

1. 定位表格的父容器（确保选择器能准确匹配，比如通过类名或ID）
2. 创建MutationObserver实例，配置监听子节点新增和子树变化
3. 在回调中筛选新增的表格行，跳过已处理的行，执行注入逻辑
4. 初始化时先处理页面已有的行

// 扩展的content script代码
const tableContainer = document.querySelector('.table-container'); // 替换为实际的容器选择器
if (!tableContainer) return;

// 注入逻辑函数
function injectCustomHTML(row) {
  // 这里写你的自定义HTML注入逻辑，比如添加按钮、修改内容
  const customCell = document.createElement('td');
  customCell.textContent = '自定义内容';
  customCell.classList.add('custom-injected-cell');
  row.appendChild(customCell);
}

// 初始化处理已有行
document.querySelectorAll('.table-container tr').forEach(row => {
  if (!row.dataset.injected) {
    injectCustomHTML(row);
    row.dataset.injected = 'true'; // 标记已处理，避免重复注入
  }
});

// 创建DOM变化监听
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(node => {
      // 检查节点是否是表格行，或包含表格行的元素
      const targetRows = node.tagName === 'TR' 
        ? [node] 
        : node.querySelectorAll('tr');
      
      targetRows.forEach(row => {
        if (!row.dataset.injected) {
          injectCustomHTML(row);
          row.dataset.injected = 'true';
        }
      });
    });
  });
});

// 启动监听：监听容器的子节点变化，包括子树
observer.observe(tableContainer, {
  childList: true,
  subtree: true
});

方案二：监听分页交互事件（简单场景可用） #

如果分页操作有明确的触发元素（比如分页按钮、下拉框），可以直接监听这些元素的交互事件，等待React渲染完成后执行注入。

// 监听分页按钮点击
document.querySelectorAll('.pagination-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    // 延迟执行，等待React完成重渲染（时间根据实际页面调整）
    setTimeout(() => {
      document.querySelectorAll('.table-container tr:not([data-injected])').forEach(row => {
        injectCustomHTML(row);
        row.dataset.injected = 'true';
      });
    }, 300);
  });
});

// 如果有其他分页触发方式（比如键盘回车、下拉选择），需要额外监听
document.querySelector('.page-select').addEventListener('change', () => {
  setTimeout(() => {
    injectCustomHTMLToAllNewRows();
  }, 300);
});

function injectCustomHTMLToAllNewRows() {
  document.querySelectorAll('.table-container tr:not([data-injected])').forEach(row => {
    injectCustomHTML(row);
    row.dataset.injected = 'true';
  });
}

方案对比 #

• MutationObserver：最可靠，能自动捕获所有导致表格行变化的操作（分页、排序、过滤等），性能开销低，推荐作为首选方案。
• 监听交互事件：实现简单，但需要覆盖所有分页触发场景，容易遗漏，适合页面交互逻辑单一的情况。
• 不推荐使用setInterval定期检查：性能差，会有明显延迟，且可能重复执行注入。

注意事项 #

• 确保选择器准确，避免误操作页面其他DOM元素。
• 注入的元素建议添加自定义类名，通过CSS隔离样式，避免和原页面样式冲突。
• 如果表格使用虚拟滚动（如react-window），MutationObserver依然能捕获可见区域的行变化，无需额外调整。

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