1

Look at screenshot:

enter image description here

  1. Iframe is minimized so you cant see any of its childs
  2. Target div displayed as child of iframe even we know fact 1.

Extension's content script

console.log( targetDiv )   // output: undefined

Google Chrome console

console.log( targetDiv )   // output: targetDiv

How is that possible? The other 'normal' elements are printed out in both cases. Can you explain me this magic half-child element?

UPDATE: this div created dynamicly setInterval fixes problem!

Lopol2010
  • 79
  • 2
  • 13
  • Your content script runs only in main page whereas console "context" selector is set to the iframe. You need to manually access the iframe's contentDocument if it's same-origin or you need `"all_frames": true` in manifest.json for the content script. – wOxxOm Nov 06 '17 at 09:38
  • I already set all_frames true. Also as i say in post "The other elements are printed out in both cases." Content scirpt printed out undefined in iframe too. Also this div used as redirect for ad's. Thats why i want detect it and remove – Lopol2010 Nov 06 '17 at 09:43
  • Well, I have to guess since you didn't provide a URL to reproduce the behavior so my other guess would be the element is added dynamically and you need to access it later using MutationObserver or setInterval/setTimeout. – wOxxOm Nov 06 '17 at 09:45
  • thanks you ! setInterval works... huh that stupid because i already tried use setTimeout with 2 secs delay and its not worked. – Lopol2010 Nov 06 '17 at 09:49

2 Answers2

2

You need to make sure that your script is loaded after that element is in DOM. Try to debug it, set up the breakpoint on your console.log(targetDiv) and investigate DOM manually. This element rendering may be delayed by some inner script for example. In that case you may implement a kind of polling process to detect this element in time:

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

instead of just

const myElement = document.getElementById('my-element');
processMyElement(myElement);
dhilt
  • 18,707
  • 8
  • 70
  • 85
  • Now cant remove these divs, manually i can and they disappear for next reload, but from code i cant. Any ideas?) – Lopol2010 Nov 06 '17 at 13:08
  • @Lopol2010 What do you mean? `myElement.style.display = 'none'` should work after the element is rendered, also you would be able to completely remove it from DOM by for example [this way](https://stackoverflow.com/a/19298575/3211932). – dhilt Nov 06 '17 at 13:30
  • Thanks for help. Again my fault... Im tried remove element in Mutation Observer callback but i can only print it out from there. So i just place setInterval 100ms and element completely removed. – Lopol2010 Nov 06 '17 at 13:47
0

A simple solution to this can be to run the script after the page is fully loaded. Something like:

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

should work fine.

However, note that the script will run after all images and css are completely loaded and parsed.

Ajmal
  • 484
  • 1
  • 7
  • 14