fix: locate frame under shadow dom

Fixes #2349

Author: crimx

package.json

@@ -10,7 +10,7 @@
     "build:mv3": "webpack --config webpack.mv3.config.js --mode production",
     "build": "yarn build:mv2 && yarn build:mv3",
     "postbuild": "node scripts/firefox-fix.js",
-    "devbuild": "webpack --mode development",
+    "devbuild:mv3": "webpack --config webpack.mv3.config.js --mode production --debug",
     "type-check": "tsc --noEmit",
     "test": "jest --testTimeout 20000",
     "test:watch": "jest --watch",

src/selection/message.ts

@@ -8,18 +8,36 @@ interface PostMessageEvent extends MessageEvent {
   }
 }
 
+function findFrameBySource(source: MessageEventSource | null) {
+  const roots: Array<Document | ShadowRoot> = [document]
+
+  while (roots.length) {
+    const root = roots.pop()!
+    const frame = Array.from(
+      root.querySelectorAll<HTMLIFrameElement | HTMLFrameElement>(
+        'iframe, frame'
+      )
+    ).find(({ contentWindow }) => contentWindow === source)
+
+    if (frame) {
+      return frame
+    }
+
+    for (const element of Array.from(root.querySelectorAll('*'))) {
+      if (element.shadowRoot) {
+        roots.push(element.shadowRoot)
+      }
+    }
+  }
+}
+
 export function postMessageHandler({ data, source }: PostMessageEvent) {
   if (!data || data.type !== 'SALADICT_SELECTION') {
     return
   }
 
-  // get the souce iframe
-  const matchSrc = ({ contentWindow }: HTMLIFrameElement | HTMLFrameElement) =>
-    contentWindow === source
-
-  const frame =
-    Array.from(document.querySelectorAll('iframe')).find(matchSrc) ||
-    Array.from(document.querySelectorAll('frame')).find(matchSrc)
+  // Search open shadow roots because reader frames may be nested inside one.
+  const frame = findFrameBySource(source)
 
   if (!frame) {
     return

src/selection/quick-search.ts

@@ -7,7 +7,7 @@ import { whenKeyPressed, isQSKey } from './helper'
 /**
  * Listen to triple-ctrl shortcut which opens quick search panel.
  * Pressing ctrl/command key more than three times within 500ms
- * trigers triple-ctrl.
+ * triggers triple-ctrl.
  */
 export function createQuickSearchStream(config: AppConfig | null) {
   if (!config || !config.tripleCtrl || isStandalonePage() || isOptionsPage()) {