From 57bef5a02308fe4f06544db70c7580c7de89ad4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E4=B8=80=E4=B9=8B?= Date: Sat, 22 Mar 2025 02:50:56 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=80=9A=E4=BF=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/message/README.md | 10 ++- packages/message/extension_message.ts | 3 + packages/message/message_queue.ts | 105 +++++++--------------- packages/message/server.ts | 23 +++-- packages/message/window_message.ts | 1 - src/app/logger/core.ts | 2 +- src/app/logger/logger.ts | 2 +- src/app/service/offscreen/client.ts | 17 +++- src/app/service/offscreen/index.ts | 21 +++-- src/app/service/offscreen/script.ts | 37 +++++--- src/app/service/queue.ts | 29 ++++++ src/app/service/sandbox/client.ts | 12 ++- src/app/service/sandbox/index.ts | 2 +- src/app/service/sandbox/runtime.ts | 16 +++- src/app/service/service_worker/client.ts | 32 +++---- src/app/service/service_worker/gm_api.ts | 2 +- src/app/service/service_worker/index.ts | 4 +- src/app/service/service_worker/runtime.ts | 29 +++++- src/app/service/service_worker/script.ts | 2 +- src/app/service/service_worker/value.ts | 6 +- src/pages/options/main.tsx | 3 + src/pages/options/routes/ScriptList.tsx | 78 ++++++---------- src/pages/store/features/script.ts | 40 ++++++++- src/pages/store/global.ts | 2 + src/pages/store/subscribe.ts | 18 ++++ src/service_worker.ts | 4 +- tests/utils.ts | 4 +- 27 files changed, 301 insertions(+), 203 deletions(-) create mode 100644 src/app/service/queue.ts create mode 100644 src/pages/store/subscribe.ts diff --git a/packages/message/README.md b/packages/message/README.md index 71fe041..6ebb017 100644 --- a/packages/message/README.md +++ b/packages/message/README.md @@ -6,5 +6,11 @@ - 从脚本发起的GM请求，需要层层传递到service_worker/offscreen进行处理，有的GM只需要进行一次调用获取一次结果，有的需要进行 多次调用获取多次结果，使用connect的方式实现 -- 从service_woker/offscreen发起的请求，类似消息队列，其它页面进行监听，触发后广播给所有页面，使用connect方式实现 -- 从扩展页面发起的请求，需要传递到service_worker/offscreen进行处理，如果只是单次调用，获取一次结果，使用message方式实现 +- 从service_worker/offscreen发起的请求，类似消息队列，其它页面进行监听，触发后广播给所有页面，使用sendMessage方式实现 +- 从扩展页面发起的请求，需要传递到service_worker/offscreen进行处理，如果只是单次调用，获取一次结果，使用sendMessage方式实现，如果需要 + 多次调用获取多次结果，使用connect方式实现 + +## 注意点 + +- service_worker和offscreen之间可以使用postMessage的方式进行通信，避免同时监听message与connect导致冲突的问题 +- service_worker会变为不活动的状态，尽量避免与service_worker建立长连接 diff --git a/packages/message/extension_message.ts b/packages/message/extension_message.ts index 8b886f3..bea2a1a 100644 --- a/packages/message/extension_message.ts +++ b/packages/message/extension_message.ts @@ -35,6 +35,9 @@ export class ExtensionMessage extends ExtensionMessageSend implements Message { // 注意chrome.runtime.onMessage.addListener的回调函数需要返回true才能处理异步请求 onMessage(callback: (data: any, sendResponse: (data: any) => void) => void) { chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { + if (msg.action === "messageQueue") { + return false; + } return callback(msg, sendResponse); }); } diff --git a/packages/message/message_queue.ts b/packages/message/message_queue.ts index 2324274..f781db8 100644 --- a/packages/message/message_queue.ts +++ b/packages/message/message_queue.ts @@ -1,98 +1,57 @@ import EventEmitter from "eventemitter3"; -import { ApiFunction, MessageConnect, MessageSend, Server } from "./server"; -import { sendMessage } from "./client"; import Logger from "@App/app/logger/logger"; import LoggerCore from "@App/app/logger/core"; export type SubscribeCallback = (message: any) => void; - -export class Broker { - constructor(private msg: MessageSend) {} - - // 订阅 - async subscribe(topic: string, handler: SubscribeCallback): Promise { - LoggerCore.getInstance().logger({ service: "messageQueue" }).debug("subscribe", { topic }); - const con = await this.msg.connect({ action: "messageQueue", data: { action: "subscribe", topic } }); - con.onMessage((msg: { action: string; topic: string; message: any }) => { - if (msg.action === "message") { - handler(msg.message); - } - }); - return con; - } - - // 发布 - publish(topic: string, message: any) { - sendMessage(this.msg, "messageQueue", { action: "publish", topic, message }); - } -} +// 释放订阅 +export type Unsubscribe = () => void; // 消息队列 export class MessageQueue { - topicConMap: Map = new Map(); - private EE: EventEmitter = new EventEmitter(); - logger: Logger; - constructor(api: Server) { - api.on("messageQueue", this.handler()); - this.logger = LoggerCore.getInstance().logger({ service: "messageQueue" }); + constructor() { + chrome.runtime.onMessage.addListener((msg) => { + if (msg.action === "messageQueue") { + this.handler(msg.data); + } + }); } - handler(): ApiFunction { - return ({ action, topic, message }: { action: string; topic: string; message: any }, con) => { - this.logger.trace("messageQueueHandler", { action, topic, message }); - if (!con) { - throw new Error("con is required"); - } - if (!topic) { - throw new Error("topic is required"); - } - switch (action) { - case "subscribe": - this.subscribe(topic, con as MessageConnect); - break; - case "publish": - this.publish(topic, message); - break; - default: - throw new Error("action not found"); - } + handler({ action, topic, message }: { action: string; topic: string; message: any }) { + LoggerCore.getInstance() + .logger({ service: "messageQueue" }) + .trace("messageQueueHandler", { action, topic, message }); + if (!topic) { + throw new Error("topic is required"); + } + switch (action) { + case "message": + this.EE.emit(topic, message); + break; + default: + throw new Error("action not found"); + } + } + + subscribe(topic: string, handler: SubscribeCallback): Unsubscribe { + this.EE.on(topic, handler); + return () => { + this.EE.off(topic, handler); }; } - private subscribe(topic: string, con: MessageConnect) { - let list = this.topicConMap.get(topic); - if (!list) { - list = []; - this.topicConMap.set(topic, list); - } - list.push({ name: topic, con }); - con.onDisconnect(() => { - let list = this.topicConMap.get(topic); - // 移除断开连接的con - list = list!.filter((item) => item.con !== con); - this.topicConMap.set(topic, list); - this.logger.debug("disconnect", { topic }); - }); - } - publish(topic: string, message: any) { - const list = this.topicConMap.get(topic); - list?.forEach((item) => { - item.con.sendMessage({ action: "message", topic, message }); + chrome.runtime.sendMessage({ + action: "messageQueue", + data: { action: "message", topic, message }, }); this.EE.emit(topic, message); - this.logger.trace("publish", { topic, message, list: list?.length }); + LoggerCore.getInstance().logger({ service: "messageQueue" }).trace("publish", { topic, message }); } // 只发布给当前环境 emit(topic: string, message: any) { this.EE.emit(topic, message); } - - // 同环境下使用addListener - addListener(topic: string, handler: (message: any) => void) { - this.EE.on(topic, handler); - } } diff --git a/packages/message/server.ts b/packages/message/server.ts index 29d8ddf..afee68d 100644 --- a/packages/message/server.ts +++ b/packages/message/server.ts @@ -28,15 +28,21 @@ export class Server { private logger = LoggerCore.getInstance().logger({ service: "messageServer" }); - constructor(message: Message) { + constructor(prefix: string, message: Message) { message.onConnect((msg: any, con: MessageConnect) => { this.logger.trace("server onConnect", { msg }); - this.connectHandle(msg.action, msg.data, con); + if (msg.action.startsWith(prefix)) { + return this.connectHandle(msg.action.slice(prefix.length + 1), msg.data, con); + } + return false; }); - message.onMessage((msg, sendResponse) => { - this.logger.trace("server onMessage", { msg }); - return this.messageHandle(msg.action, msg.data, sendResponse); + message.onMessage((msg: { action: string; data: any }, sendResponse) => { + this.logger.trace("server onMessage", { msg: msg as any }); + if (msg.action.startsWith(prefix)) { + return this.messageHandle(msg.action.slice(prefix.length + 1), msg.data, sendResponse); + } + return false; }); } @@ -98,10 +104,11 @@ export class Group { } // 转发消息 -export function forwardMessage(path: string, from: Server, to: MessageSend) { +export function forwardMessage(prefix: string, path: string, from: Server, to: MessageSend) { from.on(path, (params, fromCon) => { + console.log("forwardMessage", path, prefix, params); if (fromCon) { - to.connect({ action: path, data: params }).then((toCon) => { + to.connect({ action: prefix + "/" + path, data: params }).then((toCon) => { fromCon.onMessage((data) => { toCon.sendMessage(data); }); @@ -116,7 +123,7 @@ export function forwardMessage(path: string, from: Server, to: MessageSend) { }); }); } else { - return to.sendMessage({ action: path, data: params }); + return to.sendMessage({ action: prefix + "/" + path, data: params }); } }); } diff --git a/packages/message/window_message.ts b/packages/message/window_message.ts index 3b9c26c..f0cbe75 100644 --- a/packages/message/window_message.ts +++ b/packages/message/window_message.ts @@ -171,7 +171,6 @@ export class ServiceWorkerMessageSend implements MessageSend { const list = await self.clients.matchAll({ includeUncontrolled: true, type: "window" }); this.target = list[0]; self.addEventListener("message", (e) => { - console.log("serviceWorker", e); this.messageHandle(e.data); }); } diff --git a/src/app/logger/core.ts b/src/app/logger/core.ts index dde1e40..dfd7cac 100644 --- a/src/app/logger/core.ts +++ b/src/app/logger/core.ts @@ -39,7 +39,7 @@ export default class LoggerCore { this.labels = config.labels || {}; // 获取日志debug等级, 如果是开发环境, 则默认为trace if (process.env.NODE_ENV === "development") { - this.debug = "debug"; + this.debug = "trace"; } if (!LoggerCore.instance) { LoggerCore.instance = this; diff --git a/src/app/logger/logger.ts b/src/app/logger/logger.ts index 3f77c3e..9d67d9f 100644 --- a/src/app/logger/logger.ts +++ b/src/app/logger/logger.ts @@ -50,7 +50,7 @@ export default class Logger { console.warn(msg); break; case "trace": - console.trace(msg); + console.info(msg); break; default: console.info(msg); diff --git a/src/app/service/offscreen/client.ts b/src/app/service/offscreen/client.ts index 3396733..23c28e8 100644 --- a/src/app/service/offscreen/client.ts +++ b/src/app/service/offscreen/client.ts @@ -1,19 +1,20 @@ import { WindowMessage } from "@Packages/message/window_message"; -import { SCRIPT_RUN_STATUS } from "@App/app/repo/scripts"; +import { SCRIPT_RUN_STATUS, ScriptRunResouce } from "@App/app/repo/scripts"; import { sendMessage } from "@Packages/message/client"; +import { MessageSend } from "@Packages/message/server"; export function preparationSandbox(msg: WindowMessage) { - return sendMessage(msg, "preparationSandbox"); + return sendMessage(msg, "offscreen/preparationSandbox"); } // 代理发送消息到ServiceWorker export function sendMessageToServiceWorker(msg: WindowMessage, action: string, data?: any) { - return sendMessage(msg, "sendMessageToServiceWorker", { action, data }); + return sendMessage(msg, "offscreen/sendMessageToServiceWorker", { action, data }); } // 代理连接ServiceWorker export function connectServiceWorker(msg: WindowMessage) { - return sendMessage(msg, "connectServiceWorker"); + return sendMessage(msg, "offscreen/connectServiceWorker"); } export function proxyUpdateRunStatus( @@ -22,3 +23,11 @@ export function proxyUpdateRunStatus( ) { return sendMessageToServiceWorker(msg, "script/updateRunStatus", data); } + +export function runScript(msg: MessageSend, data: ScriptRunResouce) { + return sendMessage(msg, "offscreen/script/runScript", data); +} + +export function stopScript(msg: MessageSend, uuid: string) { + return sendMessage(msg, "offscreen/script/stopScript", uuid); +} diff --git a/src/app/service/offscreen/index.ts b/src/app/service/offscreen/index.ts index 6cf1330..02e927c 100644 --- a/src/app/service/offscreen/index.ts +++ b/src/app/service/offscreen/index.ts @@ -1,12 +1,12 @@ import { forwardMessage, MessageSend, Server } from "@Packages/message/server"; import { ScriptService } from "./script"; -import { Broker } from "@Packages/message/message_queue"; import { Logger, LoggerDAO } from "@App/app/repo/logger"; import { WindowMessage } from "@Packages/message/window_message"; import { ExtensionMessageSend } from "@Packages/message/extension_message"; import { ServiceWorkerClient } from "../service_worker/client"; import { sendMessage } from "@Packages/message/client"; import GMApi from "./gm_api"; +import { MessageQueue } from "@Packages/message/message_queue"; // offscreen环境的管理器 export class OffscreenManager { @@ -14,9 +14,9 @@ export class OffscreenManager { private windowMessage = new WindowMessage(window, sandbox, true); - private windowApi: Server = new Server(this.windowMessage); + private windowApi: Server = new Server("offscreen", this.windowMessage); - private broker: Broker = new Broker(this.extensionMessage); + private messageQueue: MessageQueue = new MessageQueue(); private serviceWorker = new ServiceWorkerClient(this.extensionMessage); @@ -31,7 +31,7 @@ export class OffscreenManager { } sendMessageToServiceWorker(data: { action: string; data: any }) { - return sendMessage(this.extensionMessage, data.action, data.data); + return sendMessage(this.extensionMessage, "serviceWorker/" + data.action, data.data); } async initManager() { @@ -39,10 +39,17 @@ export class OffscreenManager { this.windowApi.on("logger", this.logger.bind(this)); this.windowApi.on("preparationSandbox", this.preparationSandbox.bind(this)); this.windowApi.on("sendMessageToServiceWorker", this.sendMessageToServiceWorker.bind(this)); - const script = new ScriptService(this.extensionMessage, this.windowMessage, this.broker); + const script = new ScriptService( + this.windowApi.group("script"), + this.extensionMessage, + this.windowMessage, + this.messageQueue + ); script.init(); - // 转发gm api请求 - forwardMessage("runtime/gmApi", this.windowApi, this.extensionMessage); + // 转发从sandbox来的gm api请求 + forwardMessage("serviceWorker", "runtime/gmApi", this.windowApi, this.extensionMessage); + // 转发message queue请求 + const gmApi = new GMApi(this.windowApi.group("gmApi")); gmApi.init(); diff --git a/src/app/service/offscreen/script.ts b/src/app/service/offscreen/script.ts index 0a170eb..2d0ccf3 100644 --- a/src/app/service/offscreen/script.ts +++ b/src/app/service/offscreen/script.ts @@ -1,17 +1,12 @@ import LoggerCore from "@App/app/logger/core"; import Logger from "@App/app/logger/logger"; -import { Broker } from "@Packages/message/message_queue"; +import { MessageQueue } from "@Packages/message/message_queue"; import { WindowMessage } from "@Packages/message/window_message"; -import { - ResourceClient, - ScriptClient, - subscribeScriptEnable, - subscribeScriptInstall, - ValueClient, -} from "../service_worker/client"; -import { SCRIPT_STATUS_ENABLE, SCRIPT_TYPE_NORMAL } from "@App/app/repo/scripts"; -import { disableScript, enableScript } from "../sandbox/client"; -import { MessageSend } from "@Packages/message/server"; +import { ResourceClient, ScriptClient, ValueClient } from "../service_worker/client"; +import { SCRIPT_STATUS_ENABLE, SCRIPT_TYPE_NORMAL, ScriptRunResouce } from "@App/app/repo/scripts"; +import { disableScript, enableScript, runScript, stopScript } from "../sandbox/client"; +import { Group, MessageSend } from "@Packages/message/server"; +import { subscribeScriptEnable, subscribeScriptInstall } from "../queue"; export class ScriptService { logger: Logger; @@ -21,15 +16,25 @@ export class ScriptService { valueClient: ValueClient = new ValueClient(this.extensionMessage); constructor( + private group: Group, private extensionMessage: MessageSend, private windowMessage: WindowMessage, - private broker: Broker + private messageQueue: MessageQueue ) { this.logger = LoggerCore.logger().with({ service: "script" }); } + runScript(script: ScriptRunResouce) { + runScript(this.windowMessage, script); + } + + stopScript(uuid: string) { + stopScript(this.windowMessage, uuid); + } + async init() { - subscribeScriptEnable(this.broker, async (data) => { + subscribeScriptEnable(this.messageQueue, async (data) => { + console.log("subscribeScriptEnable", data); const script = await this.scriptClient.info(data.uuid); if (script.type === SCRIPT_TYPE_NORMAL) { return; @@ -42,7 +47,8 @@ export class ScriptService { disableScript(this.windowMessage, script.uuid); } }); - subscribeScriptInstall(this.broker, async (data) => { + subscribeScriptInstall(this.messageQueue, async (data) => { + console.log("subscribeScriptInstall", data); // 判断是开启还是关闭 if (data.script.status === SCRIPT_STATUS_ENABLE) { // 构造脚本运行资源,发送给沙盒运行 @@ -52,5 +58,8 @@ export class ScriptService { disableScript(this.windowMessage, data.script.uuid); } }); + + this.group.on("runScript", this.runScript.bind(this)); + this.group.on("stopScript", this.stopScript.bind(this)); } } diff --git a/src/app/service/queue.ts b/src/app/service/queue.ts new file mode 100644 index 0000000..ef1caa7 --- /dev/null +++ b/src/app/service/queue.ts @@ -0,0 +1,29 @@ +import { MessageQueue } from "@Packages/message/message_queue"; +import { Script, SCRIPT_RUN_STATUS } from "../repo/scripts"; + +export function subscribeScriptInstall( + messageQueue: MessageQueue, + callback: (message: { script: Script; update: boolean }) => void +) { + return messageQueue.subscribe("installScript", callback); +} + +export function subscribeScriptDelete(messageQueue: MessageQueue, callback: (message: { uuid: string }) => void) { + return messageQueue.subscribe("deleteScript", callback); +} + +export type ScriptEnableCallbackValue = { uuid: string; enable: boolean }; + +export function subscribeScriptEnable( + messageQueue: MessageQueue, + callback: (message: ScriptEnableCallbackValue) => void +) { + return messageQueue.subscribe("enableScript", callback); +} + +export function subscribeScriptRunStatus( + messageQueue: MessageQueue, + callback: (message: { uuid: string; runStatus: SCRIPT_RUN_STATUS }) => void +) { + return messageQueue.subscribe("scriptRunStatus", callback); +} diff --git a/src/app/service/sandbox/client.ts b/src/app/service/sandbox/client.ts index c4fa954..29db38a 100644 --- a/src/app/service/sandbox/client.ts +++ b/src/app/service/sandbox/client.ts @@ -3,9 +3,17 @@ import { sendMessage } from "@Packages/message/client"; import { WindowMessage } from "@Packages/message/window_message"; export function enableScript(msg: WindowMessage, data: ScriptRunResouce) { - return sendMessage(msg, "enableScript", data); + return sendMessage(msg, "sandbox/enableScript", data); } export function disableScript(msg: WindowMessage, uuid: string) { - return sendMessage(msg, "disableScript", uuid); + return sendMessage(msg, "sandbox/disableScript", uuid); +} + +export function runScript(msg: WindowMessage, data: ScriptRunResouce) { + return sendMessage(msg, "sandbox/runScript", data); +} + +export function stopScript(msg: WindowMessage, uuid: string) { + return sendMessage(msg, "sandbox/stopScript", uuid); } diff --git a/src/app/service/sandbox/index.ts b/src/app/service/sandbox/index.ts index fe858d6..293df48 100644 --- a/src/app/service/sandbox/index.ts +++ b/src/app/service/sandbox/index.ts @@ -5,7 +5,7 @@ import { Runtime } from "./runtime"; // sandbox环境的管理器 export class SandboxManager { - api: Server = new Server(this.windowMessage); + api: Server = new Server("sandbox", this.windowMessage); constructor(private windowMessage: WindowMessage) {} diff --git a/src/app/service/sandbox/runtime.ts b/src/app/service/sandbox/runtime.ts index e8b6207..0c0df17 100644 --- a/src/app/service/sandbox/runtime.ts +++ b/src/app/service/sandbox/runtime.ts @@ -269,18 +269,32 @@ export class Runtime { } } - stopScript(uuid: string) { + async stopScript(uuid: string) { const exec = this.execScripts.get(uuid); if (!exec) { + proxyUpdateRunStatus(this.windowMessage, { uuid: uuid, runStatus: SCRIPT_RUN_STATUS_COMPLETE }); return Promise.resolve(false); } exec.stop(); this.execScripts.delete(uuid); + proxyUpdateRunStatus(this.windowMessage, { uuid: uuid, runStatus: SCRIPT_RUN_STATUS_COMPLETE }); return Promise.resolve(true); } + async runScript(script: ScriptRunResouce) { + console.log("runScript", script); + const exec = this.execScripts.get(script.uuid); + // 如果正在运行,先释放 + if (exec) { + await this.stopScript(script.uuid); + } + return this.execScript(script, true); + } + init() { this.api.on("enableScript", this.enableScript.bind(this)); this.api.on("disableScript", this.disableScript.bind(this)); + this.api.on("runScript", this.runScript.bind(this)); + this.api.on("stopScript", this.stopScript.bind(this)); } } diff --git a/src/app/service/service_worker/client.ts b/src/app/service/service_worker/client.ts index a3e639c..eb0e859 100644 --- a/src/app/service/service_worker/client.ts +++ b/src/app/service/service_worker/client.ts @@ -1,13 +1,12 @@ import { Script, ScriptCode, ScriptRunResouce } from "@App/app/repo/scripts"; import { Client } from "@Packages/message/client"; import { InstallSource } from "."; -import { Broker } from "@Packages/message/message_queue"; import { Resource } from "@App/app/repo/resource"; import { MessageSend } from "@Packages/message/server"; export class ServiceWorkerClient extends Client { constructor(msg: MessageSend) { - super(msg); + super(msg, "serviceWorker"); } preparationOffscreen() { @@ -17,7 +16,7 @@ export class ServiceWorkerClient extends Client { export class ScriptClient extends Client { constructor(msg: MessageSend) { - super(msg, "script"); + super(msg, "serviceWorker/script"); } // 获取安装信息 @@ -52,7 +51,7 @@ export class ScriptClient extends Client { export class ResourceClient extends Client { constructor(msg: MessageSend) { - super(msg, "resource"); + super(msg, "serviceWorker/resource"); } getScriptResources(script: Script): Promise<{ [key: string]: Resource }> { @@ -62,7 +61,7 @@ export class ResourceClient extends Client { export class ValueClient extends Client { constructor(msg: MessageSend) { - super(msg, "value"); + super(msg, "serviceWorker/value"); } getScriptValue(script: Script) { @@ -70,19 +69,16 @@ export class ValueClient extends Client { } } -export function subscribeScriptInstall( - border: Broker, - callback: (message: { script: Script; update: boolean }) => void -) { - return border.subscribe("installScript", callback); -} +export class RuntimeClient extends Client { + constructor(msg: MessageSend) { + super(msg, "serviceWorker/runtime"); + } -export function subscribeScriptDelete(border: Broker, callback: (message: { uuid: string }) => void) { - return border.subscribe("deleteScript", callback); -} + runScript(uuid: string) { + return this.do("runScript", uuid); + } -export type ScriptEnableCallbackValue = { uuid: string; enable: boolean }; - -export function subscribeScriptEnable(border: Broker, callback: (message: ScriptEnableCallbackValue) => void) { - return border.subscribe("enableScript", callback); + stopScript(uuid: string) { + return this.do("stopScript", uuid); + } } diff --git a/src/app/service/service_worker/gm_api.ts b/src/app/service/service_worker/gm_api.ts index 483bb33..c826ddf 100644 --- a/src/app/service/service_worker/gm_api.ts +++ b/src/app/service/service_worker/gm_api.ts @@ -44,7 +44,7 @@ export default class GMApi { this.logger.trace("GM API request", { api: data.api, uuid: data.uuid, param: data.params }); const api = PermissionVerify.apis.get(data.api); if (!api) { - return Promise.reject(new Error("api is not found")); + return Promise.reject(new Error("gm api is not found")); } const req = await this.parseRequest(data, { tabId: 0 }); try { diff --git a/src/app/service/service_worker/index.ts b/src/app/service/service_worker/index.ts index 93f4454..a41e688 100644 --- a/src/app/service/service_worker/index.ts +++ b/src/app/service/service_worker/index.ts @@ -25,11 +25,11 @@ export default class ServiceWorkerManager { const resource = new ResourceService(this.api.group("resource"), this.mq); resource.init(); - const value = new ValueService(this.api.group("value"), this.mq); + const value = new ValueService(this.api.group("value")); value.init(); const script = new ScriptService(this.api.group("script"), this.mq, value, resource); script.init(); - const runtime = new RuntimeService(this.api.group("runtime"), this.sender, this.mq, value); + const runtime = new RuntimeService(this.api.group("runtime"), this.sender, this.mq, value, script); runtime.init(); } } diff --git a/src/app/service/service_worker/runtime.ts b/src/app/service/service_worker/runtime.ts index 9170e15..2fcde18 100644 --- a/src/app/service/service_worker/runtime.ts +++ b/src/app/service/service_worker/runtime.ts @@ -1,9 +1,11 @@ import { MessageQueue } from "@Packages/message/message_queue"; -import { ScriptEnableCallbackValue } from "./client"; import { Group, MessageSend } from "@Packages/message/server"; import { Script, SCRIPT_STATUS_ENABLE, SCRIPT_TYPE_NORMAL, ScriptAndCode, ScriptDAO } from "@App/app/repo/scripts"; import { ValueService } from "./value"; import GMApi from "./gm_api"; +import { subscribeScriptEnable } from "../queue"; +import { ScriptService } from "./script"; +import { runScript, stopScript } from "../offscreen/client"; export class RuntimeService { scriptDAO: ScriptDAO = new ScriptDAO(); @@ -12,12 +14,13 @@ export class RuntimeService { private group: Group, private sender: MessageSend, private mq: MessageQueue, - private value: ValueService + private value: ValueService, + private script: ScriptService ) {} async init() { // 监听脚本开启 - this.mq.addListener("enableScript", async (data: ScriptEnableCallbackValue) => { + subscribeScriptEnable(this.mq, async (data) => { const script = await this.scriptDAO.getAndCode(data.uuid); if (!script) { return; @@ -44,7 +47,7 @@ export class RuntimeService { this.mq.publish("enableScript", { uuid: script.uuid, enable: true }); }); // 监听offscreen环境初始化, 初始化完成后, 再将后台脚本运行起来 - this.mq.addListener("preparationOffscreen", () => { + this.mq.subscribe("preparationOffscreen", () => { list.forEach((script) => { if (script.status !== SCRIPT_STATUS_ENABLE || script.type === SCRIPT_TYPE_NORMAL) { return; @@ -56,6 +59,24 @@ export class RuntimeService { // 启动gm api const gmApi = new GMApi(this.group, this.sender, this.value); gmApi.start(); + + this.group.on("stopScript", this.stopScript.bind(this)); + this.group.on("runScript", this.runScript.bind(this)); + } + + // 停止脚本 + stopScript(uuid: string) { + return stopScript(this.sender, uuid); + } + + // 运行脚本 + async runScript(uuid: string) { + const script = await this.scriptDAO.get(uuid); + if (!script) { + return; + } + const res = await this.script.buildScriptRunResource(script); + return runScript(this.sender, res); } registryPageScript(script: ScriptAndCode) { diff --git a/src/app/service/service_worker/script.ts b/src/app/service/service_worker/script.ts index 31e0caa..27cb558 100644 --- a/src/app/service/service_worker/script.ts +++ b/src/app/service/service_worker/script.ts @@ -235,7 +235,6 @@ export class ScriptService { } async updateRunStatus(params: { uuid: string; runStatus: SCRIPT_RUN_STATUS; error?: string; nextruntime?: number }) { - this.mq.publish("updateRunStatus", params); if ( (await this.scriptDAO.update(params.uuid, { runStatus: params.runStatus, @@ -246,6 +245,7 @@ export class ScriptService { ) { return Promise.reject("update error"); } + this.mq.publish("scriptRunStatus", params); return Promise.resolve(true); } diff --git a/src/app/service/service_worker/value.ts b/src/app/service/service_worker/value.ts index affc1ad..a2a9da3 100644 --- a/src/app/service/service_worker/value.ts +++ b/src/app/service/service_worker/value.ts @@ -3,7 +3,6 @@ import Logger from "@App/app/logger/logger"; import { Script, ScriptDAO } from "@App/app/repo/scripts"; import { ValueDAO } from "@App/app/repo/value"; import { storageKey } from "@App/runtime/utils"; -import { MessageQueue } from "@Packages/message/message_queue"; import { Group } from "@Packages/message/server"; export class ValueService { @@ -11,10 +10,7 @@ export class ValueService { scriptDAO: ScriptDAO = new ScriptDAO(); valueDAO: ValueDAO = new ValueDAO(); - constructor( - private group: Group, - private mq: MessageQueue - ) { + constructor(private group: Group) { this.logger = LoggerCore.logger().with({ service: "value" }); } diff --git a/src/pages/options/main.tsx b/src/pages/options/main.tsx index 3ffa9dc..07af97e 100644 --- a/src/pages/options/main.tsx +++ b/src/pages/options/main.tsx @@ -13,6 +13,7 @@ import LoggerCore from "@App/app/logger/core.ts"; import { LoggerDAO } from "@App/app/repo/logger.ts"; import DBWriter from "@App/app/logger/db_writer.ts"; import registerEditor from "@App/pkg/utils/monaco-editor.ts"; +import storeSubscribe from "../store/subscribe.ts"; // 初始化数据库 migrate(); @@ -25,6 +26,8 @@ const loggerCore = new LoggerCore({ loggerCore.logger().debug("page start"); +storeSubscribe(); + ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( diff --git a/src/pages/options/routes/ScriptList.tsx b/src/pages/options/routes/ScriptList.tsx index b0bc887..e30b52b 100644 --- a/src/pages/options/routes/ScriptList.tsx +++ b/src/pages/options/routes/ScriptList.tsx @@ -79,12 +79,14 @@ import { selectScripts, sortScript, upsertScript, + requestStopScript, + requestRunScript, } from "@App/pages/store/features/script"; import { selectScriptListColumnWidth } from "@App/pages/store/features/setting"; -import { Broker } from "@Packages/message/message_queue"; -import { subscribeScriptDelete, subscribeScriptInstall } from "@App/app/service/service_worker/client"; -import { ExtensionMessageSend } from "@Packages/message/extension_message"; -import { MessageConnect } from "@Packages/message/server"; +import { MessageQueue, Unsubscribe } from "@Packages/message/message_queue"; +import { subscribeScriptDelete, subscribeScriptInstall, subscribeScriptRunStatus } from "@App/app/service/queue"; +import { RuntimeClient } from "@App/app/service/service_worker/client"; +import { ExtensionMessage, ExtensionMessageSend } from "@Packages/message/extension_message"; type ListType = Script & { loading?: boolean }; @@ -105,43 +107,10 @@ function ScriptList() { const [action, setAction] = useState(""); const [select, setSelect] = useState([]); const [selectColumn, setSelectColumn] = useState(0); - const { t } = useTranslation(); useEffect(() => { dispatch(fetchAndSortScriptList()); - // 监听脚本安装/运行 - const msg = new ExtensionMessageSend(); - const border = new Broker(msg); - const subCon: MessageConnect[] = []; - - subscribeScriptInstall(border, (message) => { - dispatch(upsertScript(message.script)); - }).then((con) => subCon.push(con)); - - subscribeScriptDelete(border, (message) => { - dispatch(deleteScript(message.uuid)); - }).then((con) => subCon.push(con)); - - return () => { - subCon.forEach((con) => { - con.disconnect(); - }); - }; - // const channel = runtimeCtrl.watchRunStatus(); - // channel.setHandler(([id, status]: any) => { - // setScriptList((list) => { - // return list.map((item) => { - // if (item.id === id) { - // item.runStatus = status; - // } - // return item; - // }); - // }); - // }); - // return () => { - // channel.disChannel(); - // }; }, [dispatch]); const columns: ColumnProps[] = [ @@ -314,7 +283,7 @@ function ScriptList() { if (item.type === SCRIPT_TYPE_BACKGROUND) { tooltip = t("background_script_tooltip"); } else { - tooltip = `${t("scheduled_script_tooltip")} ${nextTime(item.metadata.crontab[0])}`; + tooltip = `${t("scheduled_script_tooltip")} ${nextTime(item.metadata!.crontab![0])}`; } return ( @@ -532,19 +501,28 @@ function ScriptList() { onClick={async () => { if (item.runStatus === SCRIPT_RUN_STATUS_RUNNING) { // Stop script + Message.loading({ + id: "script-stop", + content: t("stopping_script"), + }); + await dispatch(requestStopScript(item.uuid)); + Message.success({ + id: "script-stop", + content: t("script_stopped"), + duration: 3000, + }); + } else { + Message.loading({ + id: "script-run", + content: t("starting_script"), + }); + await dispatch(requestRunScript(item.uuid)); + Message.success({ + id: "script-run", + content: t("script_started"), + duration: 3000, + }); } - console.log(item.runStatus); - // Stop script - // Message.loading({ - // id: "script-stop", - // content: t("stopping_script"), - // }); - // await runtimeCtrl.stopScript(item.id); - // Message.success({ - // id: "script-stop", - // content: t("script_stopped"), - // duration: 3000, - // }); }} style={{ color: "var(--color-text-2)", diff --git a/src/pages/store/features/script.ts b/src/pages/store/features/script.ts index eaeb67c..806485b 100644 --- a/src/pages/store/features/script.ts +++ b/src/pages/store/features/script.ts @@ -1,11 +1,18 @@ import { createAsyncThunk, PayloadAction } from "@reduxjs/toolkit"; import { createAppSlice } from "../hooks"; -import { Script, SCRIPT_STATUS_DISABLE, SCRIPT_STATUS_ENABLE, ScriptDAO } from "@App/app/repo/scripts"; +import { + Script, + SCRIPT_RUN_STATUS, + SCRIPT_STATUS_DISABLE, + SCRIPT_STATUS_ENABLE, + ScriptDAO, +} from "@App/app/repo/scripts"; import { arrayMove } from "@dnd-kit/sortable"; -import { ScriptClient } from "@App/app/service/service_worker/client"; +import { RuntimeClient, ScriptClient } from "@App/app/service/service_worker/client"; import { message } from "../global"; export const scriptClient = new ScriptClient(message); +export const runtimeClient = new RuntimeClient(message); export const fetchAndSortScriptList = createAsyncThunk("script/fetchScriptList", async () => { // 排序 @@ -28,6 +35,14 @@ export const requestEnableScript = createAsyncThunk( } ); +export const requestRunScript = createAsyncThunk("script/runScript", async (uuid: string) => { + return await runtimeClient.runScript(uuid); +}); + +export const requestStopScript = createAsyncThunk("script/stopScript", async (uuid: string) => { + return await runtimeClient.stopScript(uuid); +}); + export const requestDeleteScript = createAsyncThunk("script/deleteScript", async (uuid: string) => { return scriptClient.delete(uuid); }); @@ -70,12 +85,19 @@ export const scriptSlice = createAppSlice({ } state.scripts = newItems; }, + updateRunStatus: (state, action: PayloadAction<{ uuid: string; runStatus: SCRIPT_RUN_STATUS }>) => { + const script = state.scripts.find((s) => s.uuid === action.payload.uuid); + if (script) { + script.runStatus = action.payload.runStatus; + } + }, }, extraReducers: (builder) => { builder .addCase(fetchAndSortScriptList.fulfilled, (state, action) => { state.scripts = action.payload; }) + // 处理enableScript .addCase(requestEnableScript.fulfilled, (state, action) => { updateScript(state.scripts, action.meta.arg.uuid, (script) => { script.enableLoading = false; @@ -85,11 +107,25 @@ export const scriptSlice = createAppSlice({ .addCase(requestEnableScript.pending, (state, action) => updateScript(state.scripts, action.meta.arg.uuid, (s) => (s.enableLoading = true)) ) + // 处理deleteScript .addCase(requestDeleteScript.fulfilled, (state, action) => { state.scripts = state.scripts.filter((s) => s.uuid !== action.meta.arg); }) .addCase(requestDeleteScript.pending, (state, action) => updateScript(state.scripts, action.meta.arg, (s) => (s.actionLoading = true)) + ) + // 处理runScript和stopScript + .addCase(requestRunScript.pending, (state, action) => + updateScript(state.scripts, action.meta.arg, (s) => (s.actionLoading = true)) + ) + .addCase(requestRunScript.fulfilled, (state, action) => + updateScript(state.scripts, action.meta.arg, (s) => (s.actionLoading = false)) + ) + .addCase(requestStopScript.pending, (state, action) => + updateScript(state.scripts, action.meta.arg, (s) => (s.actionLoading = true)) + ) + .addCase(requestStopScript.fulfilled, (state, action) => + updateScript(state.scripts, action.meta.arg, (s) => (s.actionLoading = false)) ); }, selectors: { diff --git a/src/pages/store/global.ts b/src/pages/store/global.ts index d71bb67..174665f 100644 --- a/src/pages/store/global.ts +++ b/src/pages/store/global.ts @@ -1,3 +1,5 @@ import { ExtensionMessage } from "@Packages/message/extension_message"; +import { MessageQueue } from "@Packages/message/message_queue"; export const message = new ExtensionMessage(); +export const messageQueue = new MessageQueue(); diff --git a/src/pages/store/subscribe.ts b/src/pages/store/subscribe.ts new file mode 100644 index 0000000..9a547df --- /dev/null +++ b/src/pages/store/subscribe.ts @@ -0,0 +1,18 @@ +import { subscribeScriptDelete, subscribeScriptInstall, subscribeScriptRunStatus } from "@App/app/service/queue"; +import { messageQueue } from "./global"; +import { store } from "./store"; +import { deleteScript, scriptSlice, upsertScript } from "./features/script"; + +export default function storeSubscribe() { + subscribeScriptRunStatus(messageQueue, (data) => { + console.log("subscribeScriptRunStatus", data); + store.dispatch(scriptSlice.actions.updateRunStatus(data)); + }); + subscribeScriptInstall(messageQueue, (message) => { + store.dispatch(upsertScript(message.script)); + }); + + subscribeScriptDelete(messageQueue, (message) => { + store.dispatch(deleteScript(message.uuid)); + }); +} diff --git a/src/service_worker.ts b/src/service_worker.ts index b3e5e47..1f8a545 100644 --- a/src/service_worker.ts +++ b/src/service_worker.ts @@ -55,8 +55,8 @@ async function main() { }); loggerCore.logger().debug("service worker start"); // 初始化管理器 - const server = new Server(new ExtensionMessage()); - const manager = new ServiceWorkerManager(server, new MessageQueue(server), new ServiceWorkerMessageSend()); + const server = new Server("serviceWorker", new ExtensionMessage()); + const manager = new ServiceWorkerManager(server, new MessageQueue(), new ServiceWorkerMessageSend()); manager.initManager(); // 初始化沙盒环境 await setupOffscreenDocument(); diff --git a/tests/utils.ts b/tests/utils.ts index 461b2af..ddbd7b3 100644 --- a/tests/utils.ts +++ b/tests/utils.ts @@ -5,7 +5,6 @@ import migrate from "@App/app/migrate"; import { LoggerDAO } from "@App/app/repo/logger"; import { MockMessage } from "@Packages/message/mock_message"; import { Message, Server } from "@Packages/message/server"; -import { MessageQueue } from "@Packages/message/message_queue"; import { ValueService } from "@App/app/service/service_worker/value"; import GMApi from "@App/app/service/service_worker/gm_api"; import OffscreenGMApi from "@App/app/service/offscreen/gm_api"; @@ -57,8 +56,7 @@ export function initTestGMApi(): Message { const osMessage = new MockMessage(osEE); const serviceWorkerServer = new Server(wsMessage); - const mq = new MessageQueue(serviceWorkerServer); - const valueService = new ValueService(serviceWorkerServer.group("value"), mq); + const valueService = new ValueService(serviceWorkerServer.group("value")); const swGMApi = new GMApi(serviceWorkerServer.group("runtime"), osMessage, valueService); valueService.init();