Fix iframe detection

2025-06-17 22:48:34 +02:00 · 2025-06-17 22:48:34 +02:00 · 2bc95af73c
commit 2bc95af73c
parent 178bb65b4a
7 changed files with 79 additions and 40 deletions
--- a/src/csui/Popup.vue
+++ b/src/csui/Popup.vue
@ -86,7 +86,7 @@
              :settings="settings"
              :eventBus="eventBus"
              :siteSettings="siteSettings"
-              :frames="activeFrames"
+              :hosts="activeHosts"
            ></PopupVideoSettings>
            <BaseExtensionSettings
              v-if="selectedTab === 'extensionSettings'"
@ -94,7 +94,7 @@
              :eventBus="eventBus"
              :siteSettings="siteSettings"
              :site="site.host"
-              :frames="activeFrames"
+              :hosts="activeHosts"
            >
            </BaseExtensionSettings>
            <ChangelogPanel
@ -193,6 +193,8 @@ export default {
        {
          source: this,
          function: (config, context) => {
+            console.log('set-current-site | this.site:', this.site, 'config.site:', config.site);
+
            if (this.site) {
              if (!this.site.host) {
                // dunno why this fix is needed, but sometimes it is
@ -209,7 +211,8 @@ export default {
              }
            });

-            this.loadFrames(this.site);
+            this.loadHostnames();
+            this.loadFrames();
          }
        },
      );
@ -276,11 +279,6 @@ export default {
      try {
        this.logger.log('info','popup', '[popup::getSite] Requesting current site ...')
        // CSM.port.postMessage({command: 'get-current-site'});
-        this.eventBus.send(
-          'probe-video',
-          {},
-          { comms: {forwardTo: 'active'} }
-        );
        this.eventBus.send(
          'get-current-site',
          {},
@ -301,13 +299,15 @@ export default {
    isDefaultFrame(frameId) {
      return frameId === '__playing' || frameId === '__all';
    },
+    loadHostnames() {
+      this.activeHosts = this.site.hostnames;
+    },
    loadFrames() {
      this.activeFrames = [{
        host: this.site.host,
        isIFrame: false,  // not used tho. Maybe one day
      }];

-
      for (const frame in this.site.frames) {
        if (!this.activeFrames.find(x => x.host === this.site.frames[frame].host)) {
          this.activeFrames.push({
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@ -13,12 +13,12 @@
          <small>{{ site }}</small>
        </div>
        <div
-          v-if="frames"
+          v-if="hosts"
          class="tab"
          :class="{'active': tab === 'embeddedSites'}"
          @click="setTab(tab = 'embeddedSites')"
        >
-          Embedded content ({{frames?.length}} {{frames?.length === 1 ? 'site' : 'sites'}})
+          Embedded content ({{hosts?.length}} {{hosts?.length === 1 ? 'site' : 'sites'}})
        </div>
        <div
          class="tab"
@ -38,10 +38,10 @@
        ></SiteExtensionSettings>
      </template>

-      <template v-if="frames && tab === 'embeddedSites' && globalSettings">
+      <template v-if="hosts && tab === 'embeddedSites' && globalSettings">
        <FrameSiteSettings
          v-if="settings"
-          :frames="frames"
+          :hosts="hosts"
          :settings="settings"
        ></FrameSiteSettings>
      </template>
@ -178,7 +178,7 @@ export default {
    'settings',
    'site',
    'enableSettingsEditor',
-    'frames',
+    'hosts',
  ],
  data() {
    return {
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/FrameSiteSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/FrameSiteSettings.vue
@ -9,9 +9,9 @@
          </div>
        </div>
      </div>
-      <div v-for="frame of frames" :key="frame.host" @click="selectedSite = frame.host" class="flex flex-col container pointer hoverable" style="margin-top: 4px; padding: 0.5rem 1rem;">
+      <div v-for="host of hosts" :key="host" @click="selectedSite = host" class="flex flex-col container pointer hoverable" style="margin-top: 4px; padding: 0.5rem 1rem;">
        <SiteListItem
-          :frame="frame"
+          :host="host"
          :settings="settings"
        ></SiteListItem>
      </div>
@ -48,7 +48,7 @@ export default {
  },
  props: [
    'settings',
-    'frames',
+    'hosts',
  ],
  data() {
    return {
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteListItem.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteListItem.vue
@ -2,9 +2,9 @@
  <div>
    <div class="flex flex-row">
      <div class="flex-grow pointer">
-        <b>{{ frame.host ?? frame.key }}</b>
-        <span :style="getSiteTypeColor(frame.type)">
-          (config: {{frame.type ?? 'unknown'}})
+        <b>{{ host }}</b>
+        <span :style="getSiteTypeColor(siteSettings?.data?.type)">
+          (config: {{siteSettings?.data?.type ?? 'unknown'}})
        </span>
      </div>
      <div>Edit</div>
@ -15,10 +15,10 @@
    </div>
    <div class="flex flex-row">
      <small>
-        Enabled: <span :style="getSiteEnabledColor(frame.host, 'enable')"><small>{{ getSiteEnabledModes(frame.host, 'enable') }}</small></span>;&nbsp;
-        Aard <span :style="getSiteEnabledColor(frame.host, 'enableAard')"><small>{{ getSiteEnabledModes(frame.host, 'enableAard') }}</small></span>;&nbsp;
-        kbd: <span :style="getSiteEnabledColor(frame.host, 'enableKeyboard')"><small>{{ getSiteEnabledModes(frame.host, 'enableKeyboard') }}</small></span>
-        UI: <span :style="getSiteEnabledColor(frame.host, 'enableUI')"><small>{{ getSiteEnabledModes(frame.host, 'enableUI') }}</small></span>
+        Enabled: <span :style="getSiteEnabledColor(host, 'enable')"><small>{{ getSiteEnabledModes(host, 'enable') }}</small></span>;&nbsp;
+        Aard <span :style="getSiteEnabledColor(host, 'enableAard')"><small>{{ getSiteEnabledModes(host, 'enableAard') }}</small></span>;&nbsp;
+        kbd: <span :style="getSiteEnabledColor(host, 'enableKeyboard')"><small>{{ getSiteEnabledModes(host, 'enableKeyboard') }}</small></span>
+        UI: <span :style="getSiteEnabledColor(host, 'enableUI')"><small>{{ getSiteEnabledModes(host, 'enableUI') }}</small></span>
      </small>
    </div>
  </div>
@ -29,15 +29,16 @@ import ExtensionMode from '../../../../../common/enums/ExtensionMode.enum';
 export default {
  data() {
    return {
-      siteSettings: undefined
+      siteSettings: undefined,
+      supportType: undefined
    }
  },
  props: [
    'settings',
-    'frame',
+    'host',
  ],
  created() {
-    this.siteSettings = this.settings.getSiteSettings(this.frame.host ?? this.frame.key);
+    this.siteSettings = this.settings.getSiteSettings(this.host);
  },
  methods: {
    getSiteTypeColor(siteType) {
--- a/src/csui/src/popup/panels/PopupVideoSettings.vue
+++ b/src/csui/src/popup/panels/PopupVideoSettings.vue
@ -1,11 +1,10 @@
 <template>
  <div class="flex flex-col relative h-full" style="padding-bottom: 20px">
-
    <!--
      Extension is disabled for a given site when it's disabled in full screen, since
      current settings do not allow the extension to only be disabled while in full screen
     -->
-    <template v-if="siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Disabled && !enabledFrames?.length">
+    <template v-if="siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Disabled && !enabledHosts?.length">
      <div class="h-full flex flex-col items-center justify-center">
        <div class="info">
          Extension is not enabled for this site.
@ -23,7 +22,7 @@
        <b>Extension is disabled for this site.</b><br />
        <small>Controls will only work on content embedded from the following sites:</small><br/>
        <div class="w-full flex flex-row justify-center">
-          <span v-for="frameSite of enabledFrames" :key="frameSite.host" class="website-name">{{frameSite.host}}</span>
+          <span v-for="frameSite of enabledHosts" :key="frameSite.host" class="website-name">{{frameSite.host}}</span>
        </div>
      </div>

@ -118,17 +117,17 @@ export default {
    'settings',
    'siteSettings',
    'eventBus',
-    'frames'
+    'hosts'
  ],
  data() {
    return {
      exec: null,
      ExtensionMode: ExtensionMode,
-      enabledFrames: [],
+      enabledHosts: [],
    };
  },
  watch: {
-    frames(val) {
+    hosts(val) {
      this.filterActiveSites(val);
    }
  },
@ -140,6 +139,7 @@ export default {
        function: (config) => this.handleConfigBroadcast(config)
      }
    );
+    this.filterActiveSites(this.hosts);
  },
  mounted() {
    this.eventBus.sendToTunnel('get-ar');
@ -149,13 +149,13 @@ export default {
  },
  methods: {
    filterActiveSites(val) {
-      this.enabledFrames = [];
+      this.enabledHosts = [];

-      for (const site of val) {
-        const siteSettings = new SiteSettings(this.settings, site.host);
+      for (const host of val) {
+        const siteSettings = new SiteSettings(this.settings, host);

        if (siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Enabled) {
-          this.enabledFrames.push(site);
+          this.enabledHosts.push(host);
        }
      }
    }
--- a/src/ext/UWServer.ts
+++ b/src/ext/UWServer.ts
@ -93,12 +93,16 @@ export default class UWServer {
    }
  }

+
+
  async _promisifyTabsGet(browserObj, tabId){
    return new Promise( (resolve, reject) => {
      browserObj.tabs.get(tabId, (tab) => resolve(tab));
    });
  }

+  //#region CSS managemeent
+
  async injectCss(css, sender) {
    if (!css) {
      return;
@ -167,6 +171,7 @@ export default class UWServer {
      this.injectCss(newCss, sender);
    }
  }
+  //#endregion

  extractHostname(url){
    var hostname;
@ -214,7 +219,6 @@ export default class UWServer {
    }

    //TODO: change extension icon based on whether there's any videos on current page
-
  }

  registerVideo(sender) {
@ -288,7 +292,6 @@ export default class UWServer {
    const tabHostname = await this.getCurrentTabHostname();
    this.logger.info('getCurrentSite', 'Returning data:', {site, tabHostname});

-
    this.eventBus.send(
      'set-current-site',
      {
@ -318,9 +321,12 @@ export default class UWServer {
      return {
        host: 'INVALID SITE',
        frames: [],
+        hostnames: [],
      }
    }

+    const hostnames = await this.comms.listUniqueFrameHosts();
+
    if (this.videoTabs[ctab.id]) {
      // if video is older than PageInfo's video rescan period (+ 4000ms of grace),
      // we clean it up from videoTabs[tabId].frames array.
@ -343,6 +349,7 @@ export default class UWServer {
      return {
        ...this.videoTabs[ctab.id],
        host: this.extractHostname(ctab.url),
+        hostnames,
        selected: this.selectedSubitem
      };
    }
@ -352,7 +359,8 @@ export default class UWServer {
    return {
      host: this.extractHostname(ctab.url),
      frames: [],
-      selected: this.selectedSubitem
+      hostnames,
+      selected: this.selectedSubitem,
    }
  }

--- a/src/ext/lib/comms/CommsServer.ts
+++ b/src/ext/lib/comms/CommsServer.ts
@ -122,6 +122,36 @@ class CommsServer {

  //#endregion

+  /**
+   * Lists all unique hosts that are present in all the frames of a given tab.
+   * This includes both hostname of the tab, as well as of all iframes embedded in it.
+   * @returns
+   */
+  async listUniqueFrameHosts() {
+    const aTab = await this.activeTab;
+
+    const tabPort = this.ports[aTab.id];
+    const hosts = [];
+
+    for (const frame in tabPort) {
+      for (const portName in tabPort[frame]) {
+        const port = tabPort[frame][portName];
+
+        const host =  port.sender.origin.split('://')[1];
+
+        // if host is invalid or already exists in our list, skip adding it
+        if (!host || hosts.includes(host)) {
+          continue;
+        }
+
+        hosts.push(host);
+      }
+    }
+
+    console.log('uniq hosts:', hosts)
+    return hosts;
+  }
+
  sendMessage(message, context?) {
    this.logger.debug('sendMessage', `preparing to send message ${message.command ?? ''} ...`, {message, context});
    // stop messages from returning where they came from, and prevent