manage by state class

src/content_script.tsx

@@ -12,17 +12,39 @@ import {
   keyStreamer,
   OBSERVATION_INTERVAL_MS,
 } from "./config";
-import { selectSource } from "./source/source";
+import { ISource, selectSource } from "./source/source";
 import { IKuromojiWorker } from "./kuromoji";
 import { Message, sendRequest } from "./message";
 import { SAME_STREAMER } from "./streamer";
 
+class State {
+  param: IParameterV2;
+  isUseSameParam: boolean;
+  isReady: boolean;
+  source: ISource;
+
+  constructor() {
+    this.param = defaultParamsV2;
+    this.isUseSameParam = DEFAULT_IS_USE_SAME_PARAM;
+    this.isReady = true;
+    this.source = selectSource(window.location.href);
+  }
+
+  getParamKey() {
+    const paramKey = this.isUseSameParam
+      ? keyStreamer(this.source.name, SAME_STREAMER)
+      : keyStreamer(this.source.name, this.source.extractStreamer());
+    return paramKey;
+  }
+
+  updateSource() {
+    this.source = selectSource(window.location.href);
+  }
+}
+
+let timerId: number;
 let worker: Worker | null;
 let api: IKuromojiWorker | null;
-let isReady = true;
-let param = defaultParamsV2;
-let isUseSameParam = DEFAULT_IS_USE_SAME_PARAM;
-let timerId: number;
 
 const getDicPath = () => {
   const isFireFox = window.navigator.userAgent
@@ -34,14 +56,6 @@ const getDicPath = () => {
     : chrome.runtime.getURL("kuromoji/dict/");
 };
 
-const getParamKey = () => {
-  const source = selectSource(window.location.href);
-  const paramKey = isUseSameParam
-    ? keyStreamer(source.name, SAME_STREAMER)
-    : keyStreamer(source.name, source.extractStreamer());
-  return paramKey;
-};
-
 /*
  * set param managed in content_script
  */
@@ -53,6 +67,8 @@ const initParam = async () => {
   });
 };
 
+const state = new State();
+
 chrome.runtime.onMessage.addListener(
   async (req: Message, sender, sendResponse) => {
     if (req.from === "CONTENT_SCRIPT" || req.to !== "CONTENT_SCRIPT") {
@@ -61,60 +77,62 @@ chrome.runtime.onMessage.addListener(
     }
     if (req.type === "UPDATE_PARAM" && req.from === "BACKGROUND") {
       if (!req.data || !req.data.param) throw new Error("no param");
-      param = req.data.param;
+      state.param = req.data.param;
       await sendRequest({
         type: "UPDATE_PARAM",
         from: "CONTENT_SCRIPT",
         to: "POPUP",
         data: {
-          param,
+          param: state.param,
         },
       });
     } else if (req.type === "UPDATE_PARAM" && req.from === "POPUP") {
       if (!req.data || !req.data.param) throw new Error("no param");
-      param = req.data.param;
+      state.param = req.data.param;
       await sendRequest({
         type: "UPDATE_PARAM",
         from: "CONTENT_SCRIPT",
         to: "BACKGROUND",
         data: {
-          key: getParamKey(),
-          param,
+          key: state.getParamKey(),
+          param: state.param,
         },
       });
     } else if (req.type === "GET_PARAM" && req.from === "POPUP") {
-      if (isReady) await initParam();
+      if (state.isReady) await initParam();
     } else if (
       req.type === "UPDATE_IS_USE_SAME_PARAM" &&
       req.from === "BACKGROUND"
     ) {
       console.log(
-        `UPDATE is use same param from background: ${isUseSameParam}`
+        `UPDATE is use same param from background: ${state.isUseSameParam}`
       );
       if (!req.data || req.data.isUseSameParam === undefined)
         throw new Error("no is use same param");
-      isUseSameParam = !!req.data.isUseSameParam;
+      state.isUseSameParam = !!req.data.isUseSameParam;
       await sendRequest({
         type: "GET_PARAM",
         from: "CONTENT_SCRIPT",
         to: "BACKGROUND",
         data: {
-          key: getParamKey(),
+          key: state.getParamKey(),
         },
       });
     } else if (
       req.type === "UPDATE_IS_USE_SAME_PARAM" &&
       req.from === "POPUP"
     ) {
-      console.log(`UPDATE is use same param from popup: ${isUseSameParam}`);
+      console.log(
+        `UPDATE is use same param from popup: ${state.isUseSameParam}`
+      );
       if (!req.data || req.data.isUseSameParam === undefined)
         throw new Error("no is use same param");
-      isUseSameParam = !!req.data.isUseSameParam;
+      state.isUseSameParam = !!req.data.isUseSameParam;
       await sendRequest({
         type: "UPDATE_IS_USE_SAME_PARAM",
         from: "CONTENT_SCRIPT",
         to: "BACKGROUND",
-        data: { isUseSameParam },
+        data: { isUseSameParam: state.isUseSameParam },
       });
     }
     sendResponse();
@@ -132,7 +150,7 @@ window.addEventListener("load", async () => {
     const modekun = async () => {
       window.clearTimeout(timerId);
 
-      const chats = source.extractChats(param.lookChats);
+      const chats = source.extractChats(state.param.lookChats);
       if (chats.length < 1) {
         // NOTE: Don't terminate worker here.
         // Because an archive video may be able to open a chat section which was closed at first.
@@ -145,14 +163,14 @@ window.addEventListener("load", async () => {
         return;
       }
 
-      if (!param.isActivateModekun) {
+      if (!state.param.isActivateModekun) {
         timerId = window.setTimeout(modekun, DEFAULT_EXECUTION_INTERVAL_MS);
         return;
       }
 
-      await moderate(api, param, chats);
+      await moderate(api, state.param, chats);
 
-      timerId = window.setTimeout(modekun, param.executionInterval);
+      timerId = window.setTimeout(modekun, state.param.executionInterval);
     };
     timerId = window.setTimeout(modekun, DEFAULT_EXECUTION_INTERVAL_MS);
   } catch (e) {
@@ -164,11 +182,11 @@ let previousLocation = window.location.href;
 const observeLocation = async () => {
   const currentLocation = window.location.href;
   if (currentLocation !== previousLocation) {
-    isReady = false;
+    state.isReady = false;
     // XXX: wait 3s for render complete
     await new Promise((r) => setTimeout(r, 3000));
 
-    isReady = true;
+    state.isReady = true;
 
     await initParam();