0

Developing chrome extension to track file uploads but few websites have input elements inside the #shadow-root (nested) , so docuement.queryselectors doesn't identify the elements.

Any help on this is much appreciated.

khs sameer
  • 1

1 Answers1

0

I think there is not an easy way out but selecting every possible node in which a shadow dom could be and then select the input elements in it. If you know first in which nodes you will definitely have a shadow dom, you could tighten the action range using pseudo selector: not ()

document.querySelectorAll('body *').forEach(n => {
    if (n.shadowRoot)
        Array.from(n.shadowRoot.querySelectorAll('input[type="file"]')).forEach(p => doSomething())
})
Robbi
  • 1,254
  • 2
  • 8
  • 11
  • This will not find nested elements. See: https://stackoverflow.com/questions/63481999/how-to-reference-to-a-method-in-parent-component-from-child-component-with-vanil/63483728#63483728 – Danny '365CSI' Engelman Jul 30 '21 at 07:27
  • It does not find shadom DOM of nested components (and not nested) if they are defined in "closed" mode, otherwise it would find them all. Bad hassle! – Robbi Jul 30 '21 at 16:27
  • True, is there a way to track the web uploads by not dependent on page html or javascript constructs using Chrome extension/ native messaging ? – khs sameer Aug 27 '21 at 05:08