added an extension checking component

extension/check_extension.js

@@ -0,0 +1,6 @@
+var currentVersion = chrome.runtime.getManifest().version;
+window.addEventListener('message', (e) => {
+  if (e.data.toString() === 'get extension version') {
+    e.ports[0].postMessage({ version: currentVersion });
+  }
+});

extension/manifest.json

@@ -11,6 +11,10 @@
       "matches": ["https://www.netflix.com/*"],
       "js": ["player.js"],
       "all_frames": true
+    },
+    {
+      "matches": ["http://localhost/*", "https://turtletv.app/*"],
+      "js": ["check_extension.js"]
     }
   ],
   "web_accessible_resources": ["netflix.js"],

src/components/Player/GetExtension.css

@@ -0,0 +1,18 @@
+.extension-content {
+  --background: var(--ion-color-light-shade);
+}
+
+.extension-content * {
+  color: var(--ion-color-primary);
+  font-size: 20px;
+}
+
+.firefox-link {
+  display: inline-block;
+}
+
+.firefox-ext-img {
+  height: 60px;
+  width: 172px;
+  padding-left: 10px;
+}

src/components/Player/GetExtension.tsx

@@ -0,0 +1,21 @@
+import { IonContent, IonImg, IonListHeader, IonRouterLink } from '@ionic/react';
+import React from 'react';
+import firefox from '../../assets/get-firefox-addon.png';
+import './GetExtension.css';
+
+const GetExtension: React.FC = () => {
+  return (
+    <IonContent class="extension-content">
+      <IonListHeader>Browser extension installation is required.</IonListHeader>
+      <IonRouterLink
+        href="https://addons.mozilla.org/en-US/firefox/addon/turtletv/"
+        target="_blank"
+        class="firefox-link"
+      >
+        <IonImg src={firefox} alt="Get the extension for Firefox" class="firefox-ext-img"></IonImg>
+      </IonRouterLink>
+    </IonContent>
+  );
+};
+
+export default GetExtension;

src/components/Player/SubscriptionFrame.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { arrayUnion, db } from '../../services/firebase';
 import { SYNC_MARGIN } from '../../services/utilities';
+import GetExtension from './GetExtension';
 
 type SubscriptionFrameProps = {
   roomId: string;
@@ -12,6 +13,33 @@ type SubscriptionFrameProps = {
 const SubscriptionFrame: React.FC<SubscriptionFrameProps> = ({ ownerId, userId, roomId, videoUrl }) => {
   const frameRef = useRef<HTMLIFrameElement>(null);
   const [playerReady, setPlayerReady] = useState(false);
+  const [hasExtension, setHasExtension] = useState(false);
+
+  const getExtensionVersion = () => {
+    return new Promise<boolean>((resolve, reject) => {
+      const channel = new MessageChannel();
+      channel.port1.onmessage = ({ data }) => {
+        channel.port1.close();
+        if (data.error) {
+          reject(false);
+        } else {
+          console.log(data.version);
+          resolve(true);
+        }
+      };
+      window.postMessage('get extension version', '*', [channel.port2]);
+    });
+  };
+
+  // Validate browser extension version
+  useEffect(() => {
+    const checkExtension = async () => {
+      const val = await getExtensionVersion();
+      setHasExtension(val);
+    };
+
+    checkExtension();
+  }, []);
 
   // Listen for events from browser extension (owner only)
   useEffect(() => {
@@ -152,7 +180,7 @@ const SubscriptionFrame: React.FC<SubscriptionFrameProps> = ({ ownerId, userId,
     }
   }, [playerReady, roomId, ownerId, userId]);
 
-  return (
+  return hasExtension ? (
     <iframe
       ref={frameRef}
       src={videoUrl}
@@ -164,6 +192,8 @@ const SubscriptionFrame: React.FC<SubscriptionFrameProps> = ({ ownerId, userId,
       height="100%"
       width="100%"
     ></iframe>
+  ) : (
+    <GetExtension></GetExtension>
   );
 };