Fix/storage

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ani-relayer",
   "displayName": "Ani Relayer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Laftel.net의 비공식 동시시청 확장프로그램.",
   "author": "koderpark",
   "scripts": {
@@ -32,14 +32,12 @@
   },
   "manifest": {
     "host_permissions": [
-      "https://*.koder.page/*",
-      "ws://*.koder.page/*",
-      "wss://*.koder.page/*"
+      "*://*.koder.page/*",
+      "https://laftel.net/*"
     ],
     "permissions": [
       "tabs",
       "activeTab",
-      "webRequest",
       "scripting"
     ],
     "minimum_chrome_version": "116"

src/background/index.ts

@@ -2,7 +2,7 @@
 // import * as validate from "./validate"
 // import * as auth from "./auth"
 import * as socket from "./service/socket"
-import * as page from "./service/page"
+import * as page from "./page"
 
 export { socket, page }
 
@@ -23,12 +23,10 @@ chrome.action.setBadgeText({
 
 chrome.runtime.onInstalled.addListener(() => {
   // todo: 불필요한 값들 제거, user객체 하나로 합치기.
-  storage.set("chat", [])
   storage.set("chatTime", 5)
   storage.set("chatType", "normal")
   storage.set("collapsed", true)
   storage.set("isCanary", false)
-  storage.set("log", [])
   storage.set("page", "main")
   storage.set("room", null)
   storage.set("userId", null)

src/background/messages/page.ts

@@ -1,5 +1,5 @@
 import type { PlasmoMessaging } from "@plasmohq/messaging"
-import { modifyTab, newTab } from "~background/service/page"
+import { modifyTab, newTab } from "~background/page"
 
 const handler: PlasmoMessaging.MessageHandler = async (req, res) => {
   const { msg } = req.body

src/background/service/page.ts → src/background/page.ts

@@ -1,7 +1,3 @@
-import { Storage } from "@plasmohq/storage"
-import type { Page } from "~background/const"
-const storage = new Storage()
-
 export async function newTab(url: string) {
   await chrome.tabs.create({ url })
 }
@@ -18,4 +14,4 @@ export async function modifyTab(url: string) {
 
 export async function initPage() {
   await newTab("http://localhost:3000/")
-}
+}

src/background/service/chat.ts

@@ -1,27 +1,11 @@
 import { Storage } from "@plasmohq/storage"
-import type { Chat } from "../const"
+import type { Chat } from "~const"
 const storage = new Storage()
 
 export const chatModule = (() => {
-  const get = async (): Promise<Chat[]> => {
-    return (await storage.get("chat")) || []
-  }
-
-  const set = async (input: Chat[]) => {
-    await storage.set("chat", input)
-  }
-
   const render = async (input: Chat) => {
-    const chatTime = await storage.get<number>("chatTime")
-    const list = await get()
-    list.push(input)
-    await set(list)
-
-    setTimeout(async () => {
-      const list = await get()
-      list.shift()
-      await set(list)
-    }, chatTime * 1000)
+    const tab = await chrome.tabs.query({ active: true, currentWindow: true })
+    await chrome.tabs.sendMessage(tab[0].id, { action: "chat", payload: input })
   }
 
   return {

src/background/service/log.ts

@@ -1,33 +1,15 @@
 import { Storage } from "@plasmohq/storage"
-import type { Log } from "../const"
 const storage = new Storage()
 
 export const logModule = (() => {
-  const get = async (): Promise<Log[]> => {
-    return (await storage.get("log")) || []
-  }
-
-  const set = async (input: Log[]) => {
-    await storage.set("log", input)
-  }
-
-  const push = async (input: Log) => {
-    const list = await get()
-    list.push(input)
-    await set(list)
-
-    setTimeout(async () => {
-      const list = await get()
-      list.shift()
-      await set(list)
-    }, 2500)
-  }
-
   const log = async (type: "success" | "error", msg: string) => {
-    await push({
-      type,
-      message: msg,
-      time: new Date()
+    chrome.runtime.sendMessage({
+      action: "log",
+      payload: {
+        type,
+        message: msg,
+        time: new Date()
+      }
     })
   }
 
@@ -41,4 +23,4 @@ export const logModule = (() => {
     log,
     devLog
   }
-})()
+})()

src/background/service/room.ts

@@ -1,5 +1,5 @@
 import { Storage } from "@plasmohq/storage"
-import type { Room } from "../const"
+import type { Room } from "~const"
 import { socketModule } from "./socket"
 
 const storage = new Storage()

src/background/service/socket-handler.ts

@@ -1,6 +1,6 @@
 import { roomModule } from "~background/service/room"
 import { updateVideo } from "~background/video"
-import type { Room, VidData, Chat } from "~background/const"
+import type { Room, VidData, Chat } from "~const"
 import { Storage } from "@plasmohq/storage"
 import { logModule } from "./log"
 import { chatModule } from "./chat"

src/background/service/socket.ts

@@ -9,7 +9,7 @@ import {
 } from "./socket-handler"
 import { Storage } from "@plasmohq/storage"
 import { logModule } from "./log"
-import { getUrl } from "../const"
+import { getUrl } from "~const"
 
 const storage = new Storage()
 

src/contents/component/chatting.tsx

@@ -4,7 +4,7 @@ import { LuMessageSquare, LuSend } from "react-icons/lu"
 import { useEffect, useState } from "react"
 import { useStorage } from "@plasmohq/storage/hook"
 import { message } from "~popup/message"
-import type { Chat } from "~background/const"
+import type { Chat, Log } from "~const"
 
 const ChatWrapper = ({ children }: { children: React.ReactNode }) => {
   return (
@@ -67,7 +67,24 @@ export const ChatSender = () => {
 
 export const Chatting = () => {
   const [chatType] = useStorage("chatType")
-  const [chat] = useStorage<Chat[]>("chat")
+  const [chatTime] = useStorage("chatTime")
+  const [chat, setChat] = useState<Chat[]>([])
+
+  useEffect(() => {
+    const messageListener = async (message: any) => {
+      if (message?.action === "chat" && message?.payload) {
+        const newChat = message.payload as Chat
+        setChat((prev) => [...prev, newChat])
+
+        setTimeout(() => {
+          setChat((prev) => prev.filter((chat) => chat !== newChat))
+        }, chatTime * 1000)
+      }
+    }
+
+    chrome.runtime.onMessage.addListener(messageListener)
+    return () => chrome.runtime.onMessage.removeListener(messageListener)
+  }, [chatTime])
 
   return (
     <div className="absolute top-4 right-4 flex flex-col gap-4">

src/contents/component/status.tsx

@@ -1,4 +1,4 @@
-import { parseVideo } from "~contents/parse"
+import { parseVideo } from "~parse"
 
 export const Parser = () => {
   const vid = document.querySelector("video")
@@ -17,4 +17,4 @@ export const NotParsing = () => {
   return (
     <div className="bg-red-500 absolute top-2 left-2 size-2 rounded-full"></div>
   )
-}
+}

src/contents/index.tsx

@@ -1,6 +1,6 @@
 import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo"
 import cssText from "data-text:../style.css"
-import { parseVideo } from "./parse"
+import { parseVideo } from "../parse"
 import { useStorage } from "@plasmohq/storage/hook"
 import { Parser, NotParsing } from "./component/status"
 import { Chatting } from "~contents/component/chatting"

src/popup/log.tsx

@@ -1,5 +1,6 @@
+import { useState, useEffect } from "react"
+import type { Log } from "~const"
 import { useStorage } from "@plasmohq/storage/hook"
-import type { Log } from "~background/const"
 
 function LogElement(props: Log) {
   const { type, message } = props
@@ -16,11 +17,30 @@ function LogElement(props: Log) {
 }
 
 export function LogRenderer() {
-  const [log] = useStorage<Log[]>("log")
+  const [logs, setLogs] = useState<Log[]>([])
+  const [chatTime] = useStorage("chatTime")
+
+  useEffect(() => {
+    const messageListener = async (message: any) => {
+      if (message?.action === "log" && message?.payload) {
+        const newLog = message.payload as Log
+        setLogs((prev) => [...prev, newLog])
+
+        setTimeout(() => {
+          setLogs((prev) => prev.filter((log) => log.time !== newLog.time))
+        }, chatTime * 1000)
+      }
+    }
+
+    chrome.runtime.onMessage.addListener(messageListener)
+    return () => chrome.runtime.onMessage.removeListener(messageListener)
+  }, [chatTime])
 
   return (
     <div className="fixed top-0 right-0 flex flex-col gap-2 items-center justify-center p-3">
-      {log && log.map((v: Log, i: number) => <LogElement key={i} {...v} />)}
+      {logs.map((v: Log, i: number) => (
+        <LogElement key={i} {...v} />
+      ))}
     </div>
   )
-}
+}

src/popup/page/Room.tsx

@@ -7,7 +7,7 @@ import { Btn } from "~popup/component/button"
 import { LuUser, LuCrown } from "react-icons/lu"
 import { Label } from "~popup/component/label"
 import { message } from "~popup/message"
-import type { RoomMetadata } from "~background/const"
+import type { RoomMetadata } from "~const"
 
 export default function RoomPopup(props) {
   const [room] = useStorage<RoomMetadata | null>("room")