JavaScript无法获取innerHTML，Edge浏览器扩展开发遇阻求助

一、你的JavaScript代码存在语法错误 #

提供的JS代码有两处明显问题：

• 引号不规范：使用了中文单引号‘’，且querySelector的CSS选择器未用引号完整包裹，导致语法错误。
• innerHTML是属性而非方法，不能加()调用。

修正后的基础代码：

document.getElementById('copybtn').addEventListener('click', function (){
  let elem = document.querySelector("#MainContent_grdClassValues > tbody > tr:nth-child(2) > td:nth-child(2)");
  if (elem) {
    let val = elem.innerHTML;
    alert(val);
  } else {
    alert("未找到目标元素");
  }
});

二、元素找不到的核心原因及解决办法 #

VBA用Selenium能成功获取，是因为Selenium会等待页面加载完成甚至元素出现，但浏览器扩展脚本可能在DOM未完全加载时执行，或目标元素是动态生成的（比如AJAX加载），针对这些情况可以用以下方案：

1. 等待DOM加载完成后执行代码 #

将逻辑放在DOMContentLoaded事件中，确保页面DOM结构已生成：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('copybtn').addEventListener('click', function (){
    let elem = document.querySelector("#MainContent_grdClassValues > tbody > tr:nth-child(2) > td:nth-child(2)");
    alert(elem ? elem.innerHTML : "未找到目标元素");
  });
});

2. 动态等待异步加载的元素 #

如果目标元素是页面加载后通过JS动态生成的，用轮询方式等待元素出现：

document.getElementById('copybtn').addEventListener('click', function (){
  function waitForElement(selector, callback) {
    const elem = document.querySelector(selector);
    if (elem) return callback(elem);
    setTimeout(() => waitForElement(selector, callback), 100);
  }

  waitForElement("#MainContent_grdClassValues > tbody > tr:nth-child(2) > td:nth-child(2)", function(elem) {
    alert(elem.innerHTML);
  });
});

3. 检查扩展Content Script配置 #

如果代码放在扩展的content script中，需确保manifest.json配置正确，匹配目标网页并设置合适的执行时机：

"content_scripts": [
  {
    "matches": ["https://你的目标网页域名/*"],
    "js": ["你的脚本文件.js"],
    "run_at": "document_idle"
  }
]

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