chrome扩展内容脚本无法按类获取元素

Question

看截图：

1. iframe已最小化，因此您无法看到其中的任何子项
2. 即使我们知道事实1，目标div显示为iframe的孩子。

扩展程序的内容脚本

console.log( targetDiv )   // output: undefined

Google Chrome控制台

console.log( targetDiv )   // output: targetDiv

怎么可能？ 在两种情况下都打印出其他“正常”元素。 你能解释一下这个神奇的半子元素吗？

更新 这个div动态创建setInterval修复了问题！

Answer 1

您需要确保在该元素位于DOM之后加载脚本。尝试调试它，在console.log(targetDiv)上设置断点并手动调查DOM。例如，某个内部脚本可能会延迟此元素呈现。在这种情况下，您可以实现一种轮询过程以及时检测此元素：

const timer = setInterval(() => {
  const myElement = document.getElementById('my-element');
  if(myElement) {
    clearTimeout(timer);
    processMyElement(myElement);
  }
}, 150);

而不仅仅是

const myElement = document.getElementById('my-element');
processMyElement(myElement);

Answer 2

一个简单的解决方案是在页面完全加载后运行脚本。像这样：

window.onload = function() {
   // run script
};

应该工作正常。

但是，请注意，脚本将在所有图像和CSS完全加载并解析后运行。