support iframes inside open shadow dom

2 files changed, 39 insertions, 3 deletions

diff --git a/ext/fg/js/frame-offset-forwarder.js b/ext/fg/js/frame-offset-forwarder.js
index c658c55a..ac6e617d 100644
--- a/ext/fg/js/frame-offset-forwarder.js
+++ b/ext/fg/js/frame-offset-forwarder.js
@@ -79,9 +79,28 @@ class FrameOffsetForwarder {
             sourceFrame = frame;
             break;
         }
+
         if (sourceFrame === null) {
-            this._forwardFrameOffsetOrigin(null, uniqueId);
-            return;
+            const getShadowRootElements = (documentOrElement) => {
+                const elements = Array.from(documentOrElement.querySelectorAll('*'))
+                    .filter((el) => !!el.shadowRoot);
+                const childElements = elements
+                    .map((el) => el.shadowRoot)
+                    .map(getShadowRootElements);
+                elements.push(childElements.flat());
+
+                return elements.flat();
+            };
+
+            sourceFrame = getShadowRootElements(document)
+                .map((el) => Array.from(el.shadowRoot.querySelectorAll('frame, iframe:not(.yomichan-float)')))
+                .flat()
+                .find((el) => el.contentWindow === e.source);
+
+            if (!sourceFrame) {
+                this._forwardFrameOffsetOrigin(null, uniqueId);
+                return;
+            }
         }
 
         const [forwardedX, forwardedY] = offset;
diff --git a/test/data/html/test-document2.html b/test/data/html/test-document2.html
index 3a22a5bf..b2046dfd 100644
--- a/test/data/html/test-document2.html
+++ b/test/data/html/test-document2.html
@@ -77,5 +77,22 @@ document.querySelector('#fullscreen-link1').addEventListener('click', () => togg
         </script>
     </div>
 
+    <div class="test">
+        <div class="description">&lt;iframe&gt; element inside of an open shadow DOM.</div>
+        <div id="shadow-iframe-container-open"></div>
+        <template id="shadow-iframe-container-open-content-template">
+            <iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 200px; border: 1px solid #d8d8d8;"></iframe>
+        </template>
+        <script>
+(() => {
+    const shadowIframeContainer = document.querySelector('#shadow-iframe-container-open');
+    const shadow = shadowIframeContainer.attachShadow({mode: 'open'});
+    const template = document.querySelector('#shadow-iframe-container-open-content-template').content;
+    const content = document.importNode(template, true);
+    shadow.appendChild(content);
+})();
+        </script>
+    </div>
+
 </body>
-</html>
\ No newline at end of file
+</html>