javascript - 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);