Added automatic injection

src/background/messages/shouldInject.ts

@@ -0,0 +1,15 @@
+import type { PlasmoMessaging } from "@plasmohq/messaging"
+import type { RoomsList } from "~utils/rooms"
+import { Storage } from "@plasmohq/storage"
+import browser from "webextension-polyfill"
+
+const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true })
+
+  const storage = new Storage({ area: "local" })
+  const rooms = await storage.get<RoomsList>("rooms")
+  if (tabs[0].id && rooms[tabs[0].id]) res.send(true)
+  res.send(false)
+}
+
+export default handler

src/content-script.ts

@@ -6,14 +6,10 @@ import { Storage } from "@plasmohq/storage"
 import { VIDEO_EVENTS } from "~types/video"
 import browser from "webextension-polyfill"
 import debounce from "lodash.debounce"
+import { hasVideos } from "~utils"
 import { io } from "socket.io-client"
 import { sendToBackground } from "@plasmohq/messaging"
 
-const checkVideosInPage = () => {
-  return document.getElementsByTagName("video").length > 0
-}
-let hasVideos = checkVideosInPage()
-
 const bootstrap = () => {
   let tabId: number
   let roomCode: string | undefined
@@ -51,7 +47,6 @@ const bootstrap = () => {
   }
 
   const observer = new MutationObserver(() => {
-    hasVideos = checkVideosInPage()
     if (!video) getVideo()
   })
 
@@ -138,17 +133,6 @@ const bootstrap = () => {
     }
   })
 
-  // To be used when automatic detection doesn't work
-  /*
-const handleVideoDetectManually = (ev: Event) => {
-  const target = ev.target as Element
-  video = target.closest("video") as HTMLVideoElement
-  if (video != null) {
-    document.removeEventListener("click", handleVideoDetectManually)
-  }
-}
-*/
-
   socket.on(
     SOCKET_EVENTS.VIDEO_EVENT,
     (eventType: VIDEO_EVENTS, volumeValue: string, currentTime: string) => {
@@ -182,12 +166,11 @@ declare global {
 if (window.synclify !== true) {
   window.synclify = true
 
-  if (hasVideos) {
+  if (hasVideos()) {
     bootstrap()
   } else {
     const observer = new MutationObserver(() => {
-      hasVideos = checkVideosInPage()
-      if (hasVideos) {
+      if (hasVideos()) {
         observer.disconnect()
         bootstrap()
       }

src/contents/autoInject.ts

@@ -0,0 +1,28 @@
+import type { PlasmoCSConfig } from "plasmo"
+import { sendToBackground } from "@plasmohq/messaging"
+// this cs reinjects automatically the main logic if a room has been created and no vides were found
+export const config: PlasmoCSConfig = {
+  matches: ["<all_urls>"],
+  all_frames: true
+}
+
+const observer = new MutationObserver((mutations) => {
+  // check to reinject only if videos or iframes are added
+  if (
+    mutations.some((mut) =>
+      Array.from(mut.addedNodes).some((node) =>
+        ["VIDEO", "IFRAME"].includes(node.nodeName)
+      )
+    )
+  ) {
+    console.log("injecting again")
+    sendToBackground({ name: "shouldInject" }).then((res: boolean) => {
+      console.log("shouldInject", res)
+      if (res) sendToBackground({ name: "inject" })
+    })
+  }
+})
+
+observer.observe(document, { subtree: true, childList: true })
+
+export {}

src/utils/index.ts

@@ -0,0 +1,3 @@
+export const hasVideos = () => {
+  return document.getElementsByTagName("video").length > 0
+}