脚本开启总开关

src/app/service/service_worker/runtime.ts

@@ -1,4 +1,4 @@
-import { MessageQueue } from "@Packages/message/message_queue";
+import { MessageQueue, Unsubscribe } from "@Packages/message/message_queue";
 import { ExtMessageSender, GetSender, Group, MessageSend } from "@Packages/message/server";
 import {
   Script,
@@ -49,6 +49,7 @@ export class RuntimeService {
   scriptMatchCache: Map<string, ScriptMatchInfo> | null | undefined;
 
   isEnableDeveloperMode = false;
+  isEnableUserscribe = true;
 
   constructor(
     private systemConfig: SystemConfig,
@@ -99,8 +100,7 @@ export class RuntimeService {
         text: "!",
       });
     }
-    // 读取inject.js注入页面
-    this.registerInjectScript();
+
     // 监听脚本开启
     subscribeScriptEnable(this.mq, async (data) => {
       const script = await this.scriptDAO.getAndCode(data.uuid);
@@ -111,6 +111,7 @@ export class RuntimeService {
       // 如果是后台脚本, 在offscreen中进行处理
       if (script.type === SCRIPT_TYPE_NORMAL) {
         // 加载页面脚本
+        // 不管开没开启都要加载一次脚本信息
         await this.loadPageScript(script);
         if (!data.enable) {
           await this.unregistryPageScript(script.uuid);
@@ -133,6 +134,32 @@ export class RuntimeService {
       this.deleteScriptMatch(uuid);
     });
 
+    this.systemConfig.addListener("enable_script", (enable) => {
+      this.isEnableUserscribe = enable;
+      if (enable) {
+        this.registerUserscripts();
+      } else {
+        this.unregisterUserscripts();
+      }
+    });
+    // 检查是否开启
+    this.isEnableUserscribe = await this.systemConfig.getEnableScript();
+    if (this.isEnableUserscribe) {
+      this.registerUserscripts();
+    }
+  }
+
+  unsubscribe: Unsubscribe[] = [];
+
+  // 取消脚本注册
+  unregisterUserscripts() {
+    chrome.userScripts.unregister();
+    this.deleteMessageFlag();
+  }
+
+  async registerUserscripts() {
+    // 读取inject.js注入页面
+    this.registerInjectScript();
     // 将开启的脚本发送一次enable消息
     const scriptDao = new ScriptDAO();
     const list = await scriptDao.all();
@@ -161,6 +188,10 @@ export class RuntimeService {
     });
   }
 
+  deleteMessageFlag() {
+    return Cache.getInstance().del("scriptInjectMessageFlag");
+  }
+
   getMessageFlag() {
     return Cache.getInstance().get("scriptInjectMessageFlag");
   }
@@ -417,9 +448,12 @@ export class RuntimeService {
     if (!this.scriptMatchCache) {
       await this.loadScriptMatchInfo();
     }
-    this.scriptMatchCache!.get(uuid)!.status = status;
+    const script = await this.scriptMatchCache!.get(uuid);
+    if (script) {
+      script.status = status;
       this.saveScriptMatchInfo();
     }
+  }
 
   async deleteScriptMatch(uuid: string) {
     if (!this.scriptMatchCache) {
@@ -484,7 +518,7 @@ export class RuntimeService {
     this.addScriptMatch(scriptMatchInfo);
 
     // 如果脚本开启, 则注册脚本
-    if (this.isEnableDeveloperMode && script.status === SCRIPT_STATUS_ENABLE) {
+    if (this.isEnableDeveloperMode && this.isEnableUserscribe && script.status === SCRIPT_STATUS_ENABLE) {
       if (scriptRes.metadata["noframes"]) {
         registerScript.allFrames = false;
       } else {
@@ -523,19 +557,17 @@ export class RuntimeService {
   }
 
   async unregistryPageScript(uuid: string) {
-    if (!this.isEnableDeveloperMode || !(await Cache.getInstance().get("registryScript:" + uuid))) {
+    if (
+      !this.isEnableDeveloperMode ||
+      !this.isEnableUserscribe ||
+      !(await Cache.getInstance().get("registryScript:" + uuid))
+    ) {
       return;
     }
-    chrome.userScripts.unregister(
-      {
-        ids: [uuid],
-      },
-      () => {
     // 删除缓存
     Cache.getInstance().del("registryScript:" + uuid);
     // 修改脚本状态为disable
     this.updateScriptStatus(uuid, SCRIPT_STATUS_DISABLE);
-      }
-    );
+    chrome.userScripts.unregister({ ids: [uuid] });
   }
 }

src/pages/popup/App.tsx

@@ -11,7 +11,7 @@ import {
   IconSearch,
 } from "@arco-design/web-react/icon";
 import React, { useEffect, useState } from "react";
-import { RiMessage2Line } from "react-icons/ri";
+import { RiMessage2Line, RiZzzFill } from "react-icons/ri";
 import semver from "semver";
 import { useTranslation } from "react-i18next";
 import ScriptMenuList from "../components/ScriptMenuList";
@@ -38,7 +38,7 @@ function App() {
     isRead: false,
   });
   const [currentUrl, setCurrentUrl] = useState("");
-  const [isEnableScript, setIsEnableScript] = useState(localStorage.enable_script !== "false");
+  const [isEnableScript, setIsEnableScript] = useState(true);
   const { t } = useTranslation();
 
   let url: URL | undefined;
@@ -49,9 +49,15 @@ function App() {
   }
 
   useEffect(() => {
-    systemConfig.getCheckUpdate().then((res) => {
-      setCheckUpdate(res);
-    });
+    const loadConfig = async () => {
+      const [isEnableScript, checkUpdate] = await Promise.all([
+        systemConfig.getEnableScript(),
+        systemConfig.getCheckUpdate(),
+      ]);
+      setIsEnableScript(isEnableScript);
+      setCheckUpdate(checkUpdate);
+    };
+    loadConfig();
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
       if (!tabs.length) {
         return;
@@ -95,9 +101,9 @@ function App() {
                 onChange={(val) => {
                   setIsEnableScript(val);
                   if (val) {
-                    localStorage.enable_script = "true";
+                    systemConfig.setEnableScript(true);
                   } else {
-                    localStorage.enable_script = "false";
+                    systemConfig.setEnableScript(false);
                   }
                 }}
               />

src/pkg/config/config.ts

@@ -35,8 +35,11 @@ export class SystemConfig {
   }
 
   addListener(key: string, callback: (value: any) => void) {
-    this.mq.subscribe(key, (msg) => {
-      const { value } = msg;
+    this.mq.subscribe(SystamConfigChange, (data: { key: string; value: string }) => {
+      if (data.key !== key) {
+        return;
+      }
+      const { value } = data;
       callback(value);
     });
   }
@@ -263,4 +266,12 @@ export class SystemConfig {
       version: ExtVersion,
     });
   }
+
+  setEnableScript(enable: boolean) {
+    this.set("enable_script", enable);
+  }
+
+  getEnableScript(): Promise<boolean> {
+    return this.get("enable_script", true);
+  }
 }