From cbc4b7877f9c9bc3de72b7be4d0a2bbfe3e3ab48 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sun, 4 Jan 2026 01:25:35 +0100 Subject: [PATCH] Add cross-iframe messaging (for UI windows) --- src/ext/lib/uwui/UI.ts | 40 ++++++++++++++++++++++++++ src/ui/pages/settings/App.vue | 53 +++++++++++++++++++++++++++++------ 2 files changed, 84 insertions(+), 9 deletions(-) diff --git a/src/ext/lib/uwui/UI.ts b/src/ext/lib/uwui/UI.ts index bd60301..daadcaf 100644 --- a/src/ext/lib/uwui/UI.ts +++ b/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'){ diff --git a/src/ui/pages/settings/App.vue b/src/ui/pages/settings/App.vue index fa31dd0..6ded3e9 100644 --- a/src/ui/pages/settings/App.vue +++ b/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', - { - source: this, - function: () => { - if (this.inPlayer) { - return; // show-ui is only intended for global overlay - } + 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( + { + 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