Implement receiver selector whitelist suggestion banner

ext/src/background/background.ts

@@ -6,11 +6,11 @@ import logger from "../lib/logger";
 import options from "../lib/options";
 import bridge, { BridgeInfo } from "../lib/bridge";
 
-import ReceiverSelectorManager from "./receiverSelector/ReceiverSelectorManager";
+import { RemoteMatchPattern } from "../lib/matchPattern";
 
 import CastManager from "./CastManager";
-
 import receiverDevices from "./receiverDevices";
+import ReceiverSelectorManager from "./receiverSelector/ReceiverSelectorManager";
 
 import { initMenus } from "./menus";
 import { initWhitelist } from "./whitelist";
@@ -41,7 +41,6 @@ browser.runtime.onInstalled.addListener(async details => {
     }
 });
 
-
 /**
  * Checks whether the bridge can be reached and is compatible
  * with the current version of the extension. If not, triggers

ext/src/background/receiverSelector/ReceiverSelector.ts

@@ -23,6 +23,12 @@ interface ReceiverSelectorEvents {
     stop: ReceiverSelectionStop;
 }
 
+export interface PageInfo {
+    url: string;
+    tabId: number;
+    frameId: number;
+}
+
 export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorEvents> {
     private windowId?: number;
 
@@ -36,6 +42,7 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
     private wasReceiverSelected = false;
 
     private appId?: string;
+    private pageInfo?: PageInfo;
 
     #isOpen = false;
 
@@ -65,9 +72,11 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
         receivers: ReceiverDevice[],
         defaultMediaType: ReceiverSelectorMediaType,
         availableMediaTypes: ReceiverSelectorMediaType,
-        appId?: string
+        appId?: string,
+        pageInfo?: PageInfo
     ): Promise<void> {
         this.appId = appId;
+        this.pageInfo = pageInfo;
 
         // If popup already exists, close it
         if (this.windowId) {
@@ -176,7 +185,7 @@ export default class ReceiverSelector extends TypedEventTarget<ReceiverSelectorE
 
         this.messagePort.postMessage({
             subject: "popup:init",
-            data: { appId: this.appId }
+            data: { appId: this.appId, pageInfo: this.pageInfo }
         });
 
         this.messagePort.postMessage({

ext/src/background/receiverSelector/ReceiverSelectorManager.ts

@@ -66,13 +66,16 @@ async function getSelection(
         let defaultMediaType = ReceiverSelectorMediaType.Tab;
         let availableMediaTypes;
 
+        let pageUrl: string | undefined;
         try {
-            const { url } = await browser.webNavigation.getFrame({
-                tabId: contextTabId,
-                frameId: contextFrameId
-            });
+            pageUrl = (
+                await browser.webNavigation.getFrame({
+                    tabId: contextTabId,
+                    frameId: contextFrameId
+                })
+            ).url;
 
-            availableMediaTypes = getMediaTypesForPageUrl(url);
+            availableMediaTypes = getMediaTypesForPageUrl(pageUrl);
         } catch {
             logger.error(
                 "Failed to locate frame, falling back to default available media types."
@@ -213,11 +216,20 @@ async function getSelection(
         // Ensure status manager is initialized
         await receiverDevices.init();
 
+        const pageInfo = pageUrl
+            ? {
+                  url: pageUrl,
+                  tabId: contextTabId,
+                  frameId: contextFrameId
+              }
+            : undefined;
+
         sharedSelector.open(
             receiverDevices.getDevices(),
             defaultMediaType,
             availableMediaTypes,
-            castInstance?.appId
+            castInstance?.appId,
+            pageInfo
         );
     });
 }