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完全加載並解析后運行。