Add cross-iframe messaging (for UI windows)

src/ext/lib/uwui/UI.ts

@@ -90,6 +90,32 @@ class UI {
         }
       }
     });
+    this.initMessaging();
+  }
+
+  private initMessaging() {
+    window.addEventListener('message', (event: MessageEvent) => {
+      const data = event.data;
+
+      if (data?.action !== 'uw-bus-tunnel') return;
+
+      const command = data.payload.command;
+      const config = data.payload.config;
+
+      // Forward to all iframes except the source
+      (UwuiWindow as any).instances?.forEach(win => {
+        const iframe = win.content as HTMLIFrameElement;
+        if (iframe && event.source !== iframe.contentWindow) {
+          iframe.contentWindow?.postMessage(
+            {
+              action: 'uw-bus-tunnel',
+              payload: { command, config }
+            },
+            '*'
+          );
+        }
+      });
+    });
   }
 
   executeCommand(x: CommandInterface) {
@@ -423,6 +449,16 @@ class UI {
       x: 0,
       y: 0,
       content: iframe,
+      onClose: () => {
+        this.eventBus.cancelIframeForwarding(iframe)
+      }
+    });
+
+    this.eventBus.forwardToIframe(iframe, (cmd, payload, context) => {
+      iframe.contentWindow?.postMessage(
+        { action: 'uw-bus-tunnel', payload: { command: cmd, config: payload } },
+        '*'
+      );
     });
   }
 
@@ -443,6 +479,8 @@ class UI {
     // }
   }
 
+
+
   /**
    * Replaces ui config and re-inits the UI
    * @param {*} newUiConfig
@@ -457,6 +495,8 @@ class UI {
       this.extensionMenu.destroy();
     }
   }
+
+
 }
 
 if (process.env.CHANNEL !== 'stable'){

src/ui/pages/settings/App.vue

@@ -262,17 +262,52 @@ export default defineComponent({
       this.siteSettings = this.settings.getSiteSettings({site: this.site});
       this.tabs.find(x => x.id === 'changelog').highlight = !this.settings.active?.whatsNewChecked;
 
-      this.eventBus?.subscribe(
-        'uw-show-ui',
+      if (!this.eventBus) {
+        this.eventBus = new EventBus();
+      }
+
+      /**
+       * SETUP CROSS-FRAME COMMUNICATION
+       *
+       * 1. We need to allow eventBus to send messages to the parent page
+       * 2. We need to plug messages we receive from parent page into the event bus
+       */
+      this.eventBus.sendToTunnel = (command: string, config: any) => {
+        window.parent.postMessage(
           {
-          source: this,
-          function: () => {
-            if (this.inPlayer) {
-              return; // show-ui is only intended for global overlay
-            }
+            action: 'uw-bus-tunnel',
+            payload: { command, config }
           },
+          '*'
+        );
+      };
+
+      window.addEventListener('message', (event: MessageEvent) => {
+        const data = event.data;
+        if (data?.action === 'uw-bus-tunnel') {
+          // prevent double-crossing by marking borderCrossings
+          this.eventBus.send(data.payload.command, data.payload.config, {
+            borderCrossings: { iframe: true }
+          });
         }
-      )
+      });
+
+      /**
+       * Subscribe to event bus commands.
+       * Note that showing and hiding of the settings window is no longer handled by iframe
+       * Instead, uw-show-ui should be handled by the content-script.
+       */
+      // this.eventBus.subscribe(
+      //   'uw-show-ui',
+      //   {
+      //     source: this,
+      //     function: () => {
+      //       if (this.inPlayer) {
+      //         return; // show-ui is only intended for global overlay
+      //       }
+      //     },
+      //   }
+      // )
     },
 
     //#region EXTENSION POPUP