Fix iframe detection

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({

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 {

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 {

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>
+        <b>{{ host }}</b>
-        <span :style="getSiteTypeColor(frame.type)">
+        <span :style="getSiteTypeColor(siteSettings?.data?.type)">
-          (config: {{frame.type ?? 'unknown'}})
+          (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;
+        Enabled: <span :style="getSiteEnabledColor(host, 'enable')"><small>{{ getSiteEnabledModes(host, 'enable') }}</small></span>;&nbsp;
-        Aard <span :style="getSiteEnabledColor(frame.host, 'enableAard')"><small>{{ getSiteEnabledModes(frame.host, 'enableAard') }}</small></span>;&nbsp;
+        Aard <span :style="getSiteEnabledColor(host, 'enableAard')"><small>{{ getSiteEnabledModes(host, 'enableAard') }}</small></span>;&nbsp;
-        kbd: <span :style="getSiteEnabledColor(frame.host, 'enableKeyboard')"><small>{{ getSiteEnabledModes(frame.host, 'enableKeyboard') }}</small></span>
+        kbd: <span :style="getSiteEnabledColor(host, 'enableKeyboard')"><small>{{ getSiteEnabledModes(host, 'enableKeyboard') }}</small></span>
-        UI: <span :style="getSiteEnabledColor(frame.host, 'enableUI')"><small>{{ getSiteEnabledModes(frame.host, 'enableUI') }}</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) {

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) {
+      for (const host of val) {
-        const siteSettings = new SiteSettings(this.settings, site.host);
+        const siteSettings = new SiteSettings(this.settings, host);
 
         if (siteSettings.isEnabledForEnvironment(false, true) === ExtensionMode.Enabled) {
-          this.enabledFrames.push(site);
+          this.enabledHosts.push(host);
         }
       }
     }

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,
     }
   }
 

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