✨ 优化加载逻辑 #135

CodFrm · CodFrm · commit 5b9c37dfa488 · 2023-05-21T17:35:49.000+08:00
diff --git a/build/assets/template/background.html b/build/assets/template/background.html
@@ -2,11 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
-
   <body>
     <iframe
       src="/src/sandbox.html"
diff --git a/src/app/message/center.ts b/src/app/message/center.ts
@@ -16,14 +16,12 @@ export default class MessageCenter
   extends MessageHander
   implements IMessageBroadcast
 {
-  sandbox: Window;
+  sandbox?: Window;
 
   logger: Logger;
 
   constructor() {
     super();
-    // eslint-disable-next-line no-undef
-    this.sandbox = sandbox;
     this.logger = LoggerCore.getInstance().logger({
       component: "messageCenter",
     });
@@ -33,6 +31,10 @@ export default class MessageCenter
 
   streamMap: Map<string, string> = new Map();
 
+  setSandbox(sandbox: Window) {
+    this.sandbox = sandbox;
+  }
+
   public start() {
     // 基于chrome.runtime.onConnect去做
     chrome.runtime.onConnect.addListener((port) => {
@@ -80,7 +82,7 @@ export default class MessageCenter
       });
     });
     const sandboxMessage = new WarpChannelManager((data) => {
-      this.sandbox.postMessage(data, "*");
+      this.sandbox?.postMessage(data, "*");
     });
     // 监听沙盒消息
     window.addEventListener("message", (event) => {
@@ -124,7 +126,7 @@ export default class MessageCenter
       return;
     }
     if (target.tag === "sandbox") {
-      this.sandbox.postMessage(data, "*");
+      this.sandbox?.postMessage(data, "*");
       return;
     }
     const connectMap = this.connectMap.get(target.tag);
diff --git a/src/background.ts b/src/background.ts
@@ -18,6 +18,8 @@ import SystemManager from "./app/service/system/manager";
 import SynchronizeManager from "./app/service/synchronize/manager";
 import SubscribeManager from "./app/service/subscribe/manager";
 
+console.log(new Date().getTime(), "bg");
+
 // 数据库初始化
 migrate();
 // 初始化日志组件
@@ -28,12 +30,11 @@ const loggerCore = new LoggerCore({
 });
 
 loggerCore.logger().debug("background start");
-// 沙盒通讯
-// eslint-disable-next-line no-undef
-const sandboxConnect = new MessageSandbox(sandbox);
 // 通讯中心
 const center = new MessageCenter();
 center.start();
+console.log(new Date().getTime(), "bg");
+
 IoC.registerInstance(MessageCenter, center).alias([
   MessageHander,
   MessageBroadcast,
@@ -44,33 +45,34 @@ ListenerMessage(new LoggerDAO(), center);
 IoC.instance(SystemConfig).init();
 
 // 等待沙盒启动后再进行后续的步骤
-const sandboxOnload = () => {
-  IoC.instance(SystemManager).init();
-  // 资源管理器
-  const resourceManager = new ResourceManager(center);
-  // value管理器
-  const valueManager = new ValueManager(center, center);
-  const runtime = new Runtime(
-    center,
-    sandboxConnect,
-    resourceManager,
-    valueManager
-  );
-  IoC.registerInstance(Runtime, runtime);
-  // 脚本后台处理器
-  runtime.start();
-  // 值后台处理器
-  valueManager.start();
-  // 资源后台处理器
-  resourceManager.start();
-  (IoC.instance(ScriptManager) as ScriptManager).start();
-  (IoC.instance(SubscribeManager) as SubscribeManager).start();
-  // 同步处理器
-  IoC.instance(SynchronizeManager).start();
-  return Promise.resolve(true);
-};
+IoC.instance(SystemManager).init();
+// 资源管理器
+const resourceManager = new ResourceManager(center);
+// value管理器
+const valueManager = new ValueManager(center, center);
+const runtime = new Runtime(center, resourceManager, valueManager);
+IoC.registerInstance(Runtime, runtime);
+// 脚本后台处理器
+runtime.start();
+// 值后台处理器
+valueManager.start();
+// 资源后台处理器
+resourceManager.start();
+(IoC.instance(ScriptManager) as ScriptManager).start();
+(IoC.instance(SubscribeManager) as SubscribeManager).start();
+// 同步处理器
+IoC.instance(SynchronizeManager).start();
 
-center.setHandler("sandboxOnload", sandboxOnload);
+// 监听沙盒加载
+window.onload = () => {
+  // 沙盒通讯
+  // eslint-disable-next-line no-undef
+  const sandboxConnect = new MessageSandbox(sandbox);
+  runtime.startSandbox(sandboxConnect);
+};
+center.setHandler("sandboxOnload", () => {
+  return Promise.resolve(true);
+});
 // 启动gm api的监听
 const gm = new GMApi(center, new PermissionVerify());
 gm.start();
diff --git a/src/runtime/background/gm_api.ts b/src/runtime/background/gm_api.ts
@@ -632,7 +632,7 @@ export default class GMApi {
   @PermissionVerify.API({
     listener() {
       PermissionVerify.textarea.style.display = "none";
-      document.body.appendChild(PermissionVerify.textarea);
+      document.documentElement.appendChild(PermissionVerify.textarea);
       document.addEventListener("copy", (e: ClipboardEvent) => {
         if (!GMApi.clipboardData || !e.clipboardData) {
           return;
diff --git a/src/runtime/background/runtime.ts b/src/runtime/background/runtime.ts
@@ -56,7 +56,7 @@ export type ScriptMenu = {
 // 后台脚本将会将代码注入到沙盒中
 @IoC.Singleton(MessageHander, MessageSandbox, ResourceManager, ValueManager)
 export default class Runtime extends Manager {
-  messageSandbox: MessageSandbox;
+  messageSandbox?: MessageSandbox;
 
   scriptDAO: ScriptDAO;
 
@@ -82,13 +82,11 @@ export default class Runtime extends Manager {
 
   constructor(
     message: MessageHander,
-    messageSandbox: MessageSandbox,
     resourceManager: ResourceManager,
     valueManager: ValueManager
   ) {
     super(message, "runtime");
     this.scriptDAO = new ScriptDAO();
-    this.messageSandbox = messageSandbox;
     this.resourceManager = resourceManager;
     this.valueManager = valueManager;
     this.scriptFlag = randomString(8);
@@ -136,25 +134,27 @@ export default class Runtime extends Manager {
     // 监听脚本运行状态
     this.listenScriptRunStatus();
 
+    // 启动普通脚本
     this.scriptDAO.table.toArray((items) => {
       items.forEach((item) => {
         // 容错处理
         if (!item) {
           this.logger.error("script is null");
           return;
         }
+        if (item.type !== SCRIPT_TYPE_NORMAL) {
+          return;
+        }
         // 加载所有的脚本
         if (item.status === SCRIPT_STATUS_ENABLE) {
           this.enable(item);
-          if (item.type !== SCRIPT_TYPE_NORMAL) {
-            this.runBackScript.set(item.id, item);
-          }
-        } else if (item.type === SCRIPT_TYPE_NORMAL) {
+        } else {
           // 只处理未开启的普通页面脚本
           this.disable(item);
         }
       });
     });
+
     // 接受消息,注入脚本
     // 获取注入源码
     const { scriptFlag } = this;
@@ -503,6 +503,28 @@ export default class Runtime extends Manager {
     );
   }
 
+  // 启动沙盒相关脚本
+  startSandbox(messageSandbox: MessageSandbox) {
+    this.messageSandbox = messageSandbox;
+    this.scriptDAO.table.toArray((items) => {
+      items.forEach((item) => {
+        // 容错处理
+        if (!item) {
+          this.logger.error("script is null");
+          return;
+        }
+        if (item.type === SCRIPT_TYPE_NORMAL) {
+          return;
+        }
+        // 加载所有的脚本
+        if (item.status === SCRIPT_STATUS_ENABLE) {
+          this.enable(item);
+          this.runBackScript.set(item.id, item);
+        }
+      });
+    });
+  }
+
   listenScriptRunStatus() {
     // 监听沙盒发送的脚本运行状态消息
     this.message.setHandler(
@@ -644,7 +666,7 @@ export default class Runtime extends Manager {
     this.runBackScript.set(script.id, script);
     return new Promise((resolve, reject) => {
       this.messageSandbox
-        .syncSend("enable", script)
+        ?.syncSend("enable", script)
         .then(() => {
           resolve(true);
         })
@@ -660,7 +682,7 @@ export default class Runtime extends Manager {
     this.runBackScript.delete(script.id);
     return new Promise((resolve, reject) => {
       this.messageSandbox
-        .syncSend("disable", script.id)
+        ?.syncSend("disable", script.id)
         .then(() => {
           resolve(true);
         })
@@ -673,14 +695,14 @@ export default class Runtime extends Manager {
 
   async startBackgroundScript(script: Script) {
     const scriptRes = await this.buildScriptRunResource(script);
-    this.messageSandbox.syncSend("start", scriptRes);
+    this.messageSandbox?.syncSend("start", scriptRes);
     return Promise.resolve(true);
   }
 
   stopBackgroundScript(scriptId: number) {
     return new Promise((resolve, reject) => {
       this.messageSandbox
-        .syncSend("stop", scriptId)
+        ?.syncSend("stop", scriptId)
         .then((resp) => {
           resolve(resp);
         })
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -82,6 +82,7 @@ const config: Configuration = {
         removeComments: true,
       },
       chunks: ["background"],
+      scriptLoading: "blocking",
     }),
     new HtmlWebpackPlugin({
       filename: `${dist}/ext/src/confirm.html`,
