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

Question

看截图：

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

扩展程序的内容脚本

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完全加载并解析后运行。