diff --git a/src/app/service/service_worker/runtime.ts b/src/app/service/service_worker/runtime.ts index 3cb82d4..3ece096 100644 --- a/src/app/service/service_worker/runtime.ts +++ b/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 | 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,8 +448,11 @@ export class RuntimeService { if (!this.scriptMatchCache) { await this.loadScriptMatchInfo(); } - this.scriptMatchCache!.get(uuid)!.status = status; - this.saveScriptMatchInfo(); + const script = await this.scriptMatchCache!.get(uuid); + if (script) { + script.status = status; + this.saveScriptMatchInfo(); + } } async deleteScriptMatch(uuid: string) { @@ -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); - } - ); + // 删除缓存 + Cache.getInstance().del("registryScript:" + uuid); + // 修改脚本状态为disable + this.updateScriptStatus(uuid, SCRIPT_STATUS_DISABLE); + chrome.userScripts.unregister({ ids: [uuid] }); } } diff --git a/src/pages/popup/App.tsx b/src/pages/popup/App.tsx index 56b419f..8373eb3 100644 --- a/src/pages/popup/App.tsx +++ b/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); } }} /> diff --git a/src/pkg/config/config.ts b/src/pkg/config/config.ts index 108126c..dbbcced 100644 --- a/src/pkg/config/config.ts +++ b/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 { + return this.get("enable_script", true); + } }