Chrome扩展JS代码仅控制台运行正常 启动报读取cells属性未定义错误

• DOM渲染时机不匹配：Chrome扩展的content script默认在初始HTML解析完成时执行，此时目标网站通过异步接口请求渲染的pricelist表格可能还没有完全生成内部的行、单元格节点，你手动在控制台运行代码时页面已经完全加载，所以不会报错。
• 循环边界硬编码不合理：代码写死了遍历前25行、每行遍历前14个单元格，如果实际表格的行数不足25，或者某一行的单元格数量不足14，访问elementTable.rows[i].cells[x]时，前面的rows[i]为undefined，读取cells属性就会触发当前报错。
• 额外提醒：你代码中使用的steamValue变量未定义，修复当前问题后还会触发变量未定义的报错，需要补充该变量的赋值逻辑。

1. 调整代码执行时机，确保表格完全渲染后再执行逻辑 #

如果页面是静态渲染的表格，可以直接监听页面load事件后再执行业务逻辑；如果表格是异步接口动态渲染的，可以使用MutationObserver监听表格节点生成后再执行逻辑。

2. 替换硬编码的循环边界为动态取值 #

根据实际渲染的表格行数、每行单元格数动态设置循环条件，避免访问不存在的节点。

3. 修正manifest配置 #

补全matches规则的通配符，确保content script能注入到所有对应页面，同时指定run_at为document_idle让脚本在浏览器空闲时执行，避免阻塞页面加载。

content.js #

// 动态监听目标表格渲染完成
function waitForElement(selector, callback) {
  if (document.querySelector(selector)) {
    return callback(document.querySelector(selector));
  }
  const observer = new MutationObserver(() => {
    const target = document.querySelector(selector);
    if (target) {
      observer.disconnect();
      callback(target);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

waitForElement('#pricelist tbody', (elementTable) => {
  // 动态获取表格实际行数
  for (let i = 0; i < elementTable.rows.length; i++) {
    const currentRow = elementTable.rows[i];
    // 动态获取当前行实际单元格数，要保留原逻辑14个的上限可以加 && x <14
    for (let x = 1; x < currentRow.cells.length; x++) {
      // 提前判空，避免异常节点导致报错
      if (!currentRow.cells[x] || !currentRow.cells[2]) continue;
      let value = parseInt(currentRow.cells[x].innerText);
      let mainValue = parseInt(currentRow.cells[2].innerText);
      let diference = mainValue - value;
      // 请补充steamValue的实际赋值逻辑
      const steamValue = 1; // 示例值，替换为实际取值
      let percentage = (diference/steamValue)*100;
      let newValue = `${value}(${percentage.toFixed(2)}%)`;
      currentRow.cells[x].innerHTML = newValue;
    }    
  }
})

manifest.json #

{
    "name": "calculator",
    "version": "1.0",
    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": ["https://cmywebsite.com/*"],
            "js": ["content.js"],
            "run_at": "document_idle"
        }
    ]
}

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