发送消息到offsreen

package.json

@@ -52,6 +52,7 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/semver": "^7.5.8",
+    "@types/serviceworker": "^0.0.120",
     "@unocss/postcss": "0.65.0-beta.2",
     "@vitest/coverage-v8": "2.1.4",
     "autoprefixer": "^10.4.20",

pnpm-lock.yaml

@@ -111,6 +111,9 @@ importers:
       '@types/semver':
         specifier: ^7.5.8
         version: 7.5.8
+      '@types/serviceworker':
+        specifier: ^0.0.120
+        version: 0.0.120
       '@unocss/postcss':
         specifier: 0.65.0-beta.2
         version: 0.65.0-beta.2(postcss@8.4.49)
@@ -1125,6 +1128,9 @@ packages:
   '@types/serve-static@1.15.7':
     resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
 
+  '@types/serviceworker@0.0.120':
+    resolution: {integrity: sha512-pVe9ZC82J4uRw+v35TAydtsBAbX1V79uZ0H0rQNtx7oFPImuKY1FTEqSbjTMOtAmb5AWS6z2FFCShu6WMylNng==}
+
   '@types/sockjs@0.3.36':
     resolution: {integrity: sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==}
 
@@ -4722,6 +4728,8 @@ snapshots:
       '@types/node': 22.10.2
       '@types/send': 0.17.4
 
+  '@types/serviceworker@0.0.120': {}
+
   '@types/sockjs@0.3.36':
     dependencies:
       '@types/node': 22.10.2

src/app/service/service_worker/gm_api.ts

@@ -79,7 +79,7 @@ export default class GMApi {
     console.log("xml request", request, con);
     // 先处理unsafe hearder
     // 再发送到offscreen, 处理请求
-    sendMessageToOffsreen("offscreen/gmApi/requestXhr", request.params);
+    sendMessageToOffscreen("offscreen/gmApi/requestXhr", request.params);
   }
 
   start() {
@@ -87,29 +87,14 @@ export default class GMApi {
   }
 }
 
-export async function sendMessageToOffsreen(action: string, data?: any) {
+
-  // service_worker通过chrome.scripting.executeScript调用window.postMessage主动发送消息
+export async function sendMessageToOffscreen(action: string, data?: any) {
   // service_worker和offscreen同时监听消息,会导致消息被两边同时接收,但是返回结果时会产生问题,导致报错
   // 不进行监听的话又无法从service_worker主动发送消息
-  const ctx = await chrome.runtime.getContexts({
+  // 所以这里通过clients.matchAll()获取到所有的client,然后通过postMessage发送消息
-    contextTypes: [chrome.runtime.ContextType.OFFSCREEN_DOCUMENT],
+  const list = await clients.matchAll();
-    documentUrls: [chrome.runtime.getURL("src/offscreen.html")],
+  list[0].postMessage({
-  });
+    type: "sendMessage",
-  chrome.scripting.executeScript({
+    data: { action, data },
-    target: {
-      documentIds: [ctx[0]!.documentId!],
-      tabId: -1,
-    },
-    func: (message) => {
-      // 在页面上下文中执行的代码
-      window.postMessage(
-        {
-          type: "sendMessage",
-          daat: message,
-        },
-        "*"
-      );
-    },
-    args: [{ action, data }],
   });
 }

src/app/service/service_worker/index.ts

@@ -21,6 +21,30 @@ export default class ServiceWorkerManager {
     group.on("preparationOffscreen", async () => {
       // 准备好环境
       this.mq.emit("preparationOffscreen", {});
+
+      const ctx = await chrome.runtime.getContexts({
+        contextTypes: [chrome.runtime.ContextType.OFFSCREEN_DOCUMENT],
+        documentUrls: [chrome.runtime.getURL("src/offscreen.html")],
+      });
+      console.log("ctx", ctx, chrome.runtime.getURL("src/offscreen.html"));
+      chrome.scripting.executeScript({
+        target: {
+          documentIds: [ctx[0]!.documentId!],
+          tabId: -1,
+        },
+        func: (message) => {
+          // 在页面上下文中执行的代码
+          console.log("tesss");
+          window.postMessage(
+            {
+              type: "sendMessage",
+              daat: message,
+            },
+            "*"
+          );
+        },
+        args: [{ action: "test", data: "test" }],
+      });
     });
 
     const resource = new ResourceService(group.group("resource"), this.mq);

src/types/main.d.ts

@@ -3,7 +3,9 @@ declare module "*.tpl";
 declare module "*.json";
 declare module "*.yaml";
 
-declare let sandbox: Window;
+declare const sandbox: Window;
+
+declare const clients: Clients;
 
 declare namespace GMSend {
   interface XHRDetails {