Fill fields inside shadow roots

Author: raxod502

src/inject.js

@@ -270,6 +270,20 @@
         return result;
     }
 
+    /**
+     * Get list of shadow DOM roots, recursively.
+     *
+     * @since 3.12.0
+     *
+     * @param DOMElement parent Parent element to query
+     * @return array List of shadow root elements plus parent
+     */
+    function queryShadowRoots(parent) {
+        return [parent, ...parent.querySelectorAll("*")]
+            .filter((e) => e.shadowRoot)
+            .flatMap((e) => [e.shadowRoot, ...queryShadowRoots(e.shadowRoot)]);
+    }
+
     /**
      * Query all visible elements
      *
@@ -282,60 +296,64 @@
      */
     function queryAllVisible(parent, field, form) {
         const result = [];
-        for (let i = 0; i < field.selectors.length; i++) {
-            let elems = parent.querySelectorAll(field.selectors[i]);
-            for (let j = 0; j < elems.length; j++) {
-                let elem = elems[j];
-                // Select only elements from specified form
-                if (form && form != elem.form) {
-                    continue;
-                }
-                // Ignore disabled fields
-                if (elem.disabled) {
-                    continue;
-                }
-                // Elem or its parent has a style 'display: none',
-                // or it is just too narrow to be a real field (a trap for spammers?).
-                if (elem.offsetWidth < 30 || elem.offsetHeight < 10) {
-                    continue;
-                }
-                // We may have a whitelist of acceptable field types. If so, skip elements of a different type.
-                if (field.types && field.types.indexOf(elem.type.toLowerCase()) < 0) {
-                    continue;
-                }
-                // Elem takes space on the screen, but it or its parent is hidden with a visibility style.
-                let style = window.getComputedStyle(elem);
-                if (style.visibility == "hidden") {
-                    continue;
-                }
-                // Elem is outside of the boundaries of the visible viewport.
-                let rect = elem.getBoundingClientRect();
-                if (
-                    rect.x + rect.width < 0 ||
-                    rect.y + rect.height < 0 ||
-                    rect.x > window.innerWidth ||
-                    rect.y > window.innerHeight
-                ) {
-                    continue;
-                }
-                // Elem is hidden by its or or its parent's opacity rules
-                const OPACITY_LIMIT = 0.1;
-                let opacity = 1;
-                for (
-                    let testElem = elem;
-                    opacity >= OPACITY_LIMIT && testElem && testElem.nodeType === Node.ELEMENT_NODE;
-                    testElem = testElem.parentNode
-                ) {
-                    let style = window.getComputedStyle(testElem);
-                    if (style.opacity) {
-                        opacity *= parseFloat(style.opacity);
+        for (let root of queryShadowRoots(parent)) {
+            for (let i = 0; i < field.selectors.length; i++) {
+                let elems = root.querySelectorAll(field.selectors[i]);
+                for (let j = 0; j < elems.length; j++) {
+                    let elem = elems[j];
+                    // Select only elements from specified form
+                    if (form && form != elem.form) {
+                        continue;
                     }
+                    // Ignore disabled fields
+                    if (elem.disabled) {
+                        continue;
+                    }
+                    // Elem or its parent has a style 'display: none',
+                    // or it is just too narrow to be a real field (a trap for spammers?).
+                    if (elem.offsetWidth < 30 || elem.offsetHeight < 10) {
+                        continue;
+                    }
+                    // We may have a whitelist of acceptable field types. If so, skip elements of a different type.
+                    if (field.types && field.types.indexOf(elem.type.toLowerCase()) < 0) {
+                        continue;
+                    }
+                    // Elem takes space on the screen, but it or its parent is hidden with a visibility style.
+                    let style = window.getComputedStyle(elem);
+                    if (style.visibility == "hidden") {
+                        continue;
+                    }
+                    // Elem is outside of the boundaries of the visible viewport.
+                    let rect = elem.getBoundingClientRect();
+                    if (
+                        rect.x + rect.width < 0 ||
+                        rect.y + rect.height < 0 ||
+                        rect.x > window.innerWidth ||
+                        rect.y > window.innerHeight
+                    ) {
+                        continue;
+                    }
+                    // Elem is hidden by its or or its parent's opacity rules
+                    const OPACITY_LIMIT = 0.1;
+                    let opacity = 1;
+                    for (
+                        let testElem = elem;
+                        opacity >= OPACITY_LIMIT &&
+                        testElem &&
+                        testElem.nodeType === Node.ELEMENT_NODE;
+                        testElem = testElem.parentNode
+                    ) {
+                        let style = window.getComputedStyle(testElem);
+                        if (style.opacity) {
+                            opacity *= parseFloat(style.opacity);
+                        }
+                    }
+                    if (opacity < OPACITY_LIMIT) {
+                        continue;
+                    }
+                    // This element is visible, will use it.
+                    result.push(elem);
                 }
-                if (opacity < OPACITY_LIMIT) {
-                    continue;
-                }
-                // This element is visible, will use it.
-                result.push(elem);
             }
         }
         return result;