added check for browser extension

extension/background.js

@@ -36,6 +36,6 @@ chrome.webRequest.onHeadersReceived.addListener(
       responseHeaders: details.responseHeaders.filter((header) => !IFRAME_HEADERS.includes(header.name.toLowerCase())),
     };
   },
-  { urls: ['<all_urls>'] },
+  { urls: ['https://www.netflix.com/*', 'http://localhost/*', 'https://turtletv.app/*'] },
   isFirefox ? ['blocking', 'responseHeaders'] : ['blocking', 'responseHeaders', 'extraHeaders']
 );

extension/manifest.json

@@ -18,8 +18,14 @@
     }
   ],
   "web_accessible_resources": ["netflix.js"],
-  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
-  "version": "1.0",
+  "permissions": [
+    "webRequest",
+    "webRequestBlocking",
+    "https://www.netflix.com/",
+    "http://localhost/*",
+    "https://turtletv.app/"
+  ],
+  "version": "1.1",
   "icons": {
     "48": "icon_48.png"
   }

extension/netflix.js

@@ -8,12 +8,11 @@ window.parent.postMessage('video ready', '*');
 player.addEventListener('play', (ev) => {
   window.parent.postMessage({ type: 'play', time: player.currentTime }, '*');
 });
-
 player.addEventListener('pause', (ev) => {
   window.parent.postMessage({ type: 'pause', time: player.currentTime }, '*');
 });
 
-// Subscribe listener for syncing requests
+// Listen for syncing requests
 window.addEventListener('message', (ev) => {
   let type = ev.data.type;
 

src/components/Player/GetExtension.css

@@ -7,7 +7,7 @@
   font-size: 20px;
 }
 
-.firefox-link {
+.ext-link {
   display: inline-block;
 }
 
@@ -16,3 +16,9 @@
   width: 172px;
   padding-left: 10px;
 }
+
+.chrome-ext-img {
+  height: 62px;
+  width: 220px;
+  padding-left: 10px;
+}

src/components/Player/GetExtension.tsx

@@ -1,19 +1,19 @@
 import { IonContent, IonImg, IonListHeader, IonRouterLink } from '@ionic/react';
 import React from 'react';
 import firefox from '../../assets/get-firefox-addon.png';
+import chrome from '../../assets/get-chrome-ext.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"
-      >
+      <IonRouterLink href="https://addons.mozilla.org/en-US/firefox/addon/turtletv/" target="_blank" class="ext-link">
         <IonImg src={firefox} alt="Get the extension for Firefox" class="firefox-ext-img"></IonImg>
       </IonRouterLink>
+      <IonRouterLink target="_blank" class="ext-link">
+        <IonImg src={chrome} alt="Get the extension for Chrome" class="chrome-ext-img"></IonImg>
+      </IonRouterLink>
     </IonContent>
   );
 };

src/components/Player/SubscriptionFrame.tsx

@@ -23,7 +23,6 @@ const SubscriptionFrame: React.FC<SubscriptionFrameProps> = ({ ownerId, userId,
         if (data.error) {
           reject(false);
         } else {
-          console.log(data.version);
           resolve(true);
         }
       };
@@ -87,7 +86,7 @@ const SubscriptionFrame: React.FC<SubscriptionFrameProps> = ({ ownerId, userId,
     });
   };
 
-  // Subscribe listener for updateState requests from Firebase (owner only)
+  // Listen for updateState requests from Firebase (owner only)
   useEffect(() => {
     if (ownerId === userId) {
       const roomRef = db.collection('rooms').doc(roomId);
@@ -151,7 +150,7 @@ const SubscriptionFrame: React.FC<SubscriptionFrameProps> = ({ ownerId, userId,
         frameRef.current?.contentWindow?.postMessage({ type: 'playing', playing: isPlaying }, '*');
       };
 
-      // listen to 'states' collection for video state changes from owner
+      // Listen to 'states' collection for video state changes from owner
       const stateUnsubscribe = stateRef.onSnapshot(async (docSnapshot) => {
         const actual = docSnapshot.data();
         if (allowUpdate) {

src/pages/Home.css

@@ -52,7 +52,7 @@ ion-title {
 }
 
 .paste-input {
-  margin-left: 2px;
+  margin-left: 4px;
   text-align: left;
   font-size: 14px;
   border: 1px solid var(--ion-color-secondary);

src/pages/Room.tsx

@@ -89,7 +89,7 @@ const Room: React.FC<RouteComponentProps<{ roomId: string }>> = ({ match }) => {
             try {
               await roomRef.update({ userCount: increment });
               roomRef.onDisconnect().update({ userCount: decrement });
-              availableRef.child(roomId).set({ name: 'Room Name', createdAt: new Date().toISOString() });
+              availableRef.set({ name: 'Room Name', createdAt: new Date().toISOString() });
             } catch (err) {
               console.log(err);
             }