Chrome扩展向React网站DOM添加元素触发JavaScript错误求助

核心问题是你直接修改了React管理的DOM节点——React通过虚拟DOM维护真实DOM的状态，手动克隆并插入React渲染的元素会导致虚拟DOM与真实DOM不一致，触发框架报错。

错误点拆解 #

你克隆的firstRow是React生成的DOM元素，带有React内部的标记和状态绑定，直接插入DOM会打乱React的状态同步机制。

可行解决方案 #

1. 完全脱离React DOM树，独立创建自定义内容

不要操作React管控的表格节点，而是在其同级位置插入自己的独立容器，自行构建表格/列：

// 找到表格的父容器，而非React表格本身
const parentContainer = document.querySelector('#root > div > main > div.custom-a3qv9n');
// 创建自定义表格容器
const customTable = document.createElement('div');
customTable.style.cssText = 'margin-top:10px;';
// 构建表头
const header = document.createElement('div');
header.textContent = '自定义列';
customTable.appendChild(header);
// 遍历原表格行，生成对应自定义内容
const originalRows = document.querySelectorAll('a.ds-dex-table-row.ds-dex-table-row-new');
originalRows.forEach(() => {
  const customCell = document.createElement('div');
  customCell.textContent = 'NB Value for this row';
  customTable.appendChild(customCell);
});
// 插入到父容器中
parentContainer.appendChild(customTable);

2. 若必须修改原表格，使用MutationObserver同步操作

如果一定要给原表格添加列，需监听React的DOM更新，在每次渲染完成后插入全新的自定义单元格（避免克隆React节点）：

const tableSelector = '#root > div > main > div.custom-a3qv9n > div.ds-dex-table.ds-dex-table-new';
const tableContainer = document.querySelector(tableSelector);

// 监听表格的DOM变化
const observer = new MutationObserver(() => {
  // 先移除已存在的自定义单元格，避免重复添加
  tableContainer.querySelectorAll('.my-custom-cell').forEach(cell => cell.remove());
  // 给每一行插入新单元格
  const rows = tableContainer.querySelectorAll('a.ds-dex-table-row.ds-dex-table-row-new');
  rows.forEach(row => {
    const newCell = document.createElement('span');
    newCell.className = 'ds-table-data-cell my-custom-cell';
    newCell.textContent = 'NB Value for this row';
    row.appendChild(newCell);
  });
});

// 开启监听
observer.observe(tableContainer, { childList: true, subtree: true });

3. 确保脚本在React渲染完成后执行

即使DOMContentLoaded触发，React可能还在异步渲染，可通过等待元素出现再执行操作：

function waitForElement(selector) {
  return new Promise(resolve => {
    const checkExist = () => {
      const elem = document.querySelector(selector);
      if (elem) {
        resolve(elem);
      } else {
        setTimeout(checkExist, 100);
      }
    };
    checkExist();
  });
}

// 等待目标表格出现后执行操作
waitForElement(tableSelector).then(tableContainer => {
  // 这里执行上述修改逻辑
});

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