🐛 Offscreen→SW 消息通道改用 postMessage 支持 Blob 传输

Offscreen 转发 GM API 请求到 ServiceWorker 时，原先走 ExtensionMessage
(chrome.runtime, JSON 序列化)，导致 Blob 等结构化数据丢失。
改为通过 postMessage 通道（结构化克隆）双向传输，所有 GM API 自动受益。

Author: CodFrm

packages/message/window_message.ts

@@ -1,4 +1,12 @@
-import type { Message, MessageConnect, MessageSend, RuntimeMessageSender, TMessage } from "./types";
+import type {
+  Message,
+  MessageConnect,
+  MessageSend,
+  OnConnectCallback,
+  OnMessageCallback,
+  RuntimeMessageSender,
+  TMessage,
+} from "./types";
 import { uuidv4 } from "@App/pkg/utils/uuid";
 import EventEmitter from "eventemitter3";
 
@@ -205,32 +213,46 @@ export class WindowMessageConnect implements MessageConnect {
 // service_worker和offscreen同时监听消息,会导致消息被两边同时接收,但是返回结果时会产生问题,导致报错
 // 不进行监听的话又无法从service_worker主动发送消息
 // 所以service_worker与offscreen使用ServiceWorker的方式进行通信
-export class ServiceWorkerMessageSend implements MessageSend {
+// 现在同时支持接收来自offscreen的请求(实现完整Message接口),使双向通道都走postMessage(结构化克隆,支持Blob)
+export class ServiceWorkerMessageSend implements Message {
   EE = new EventEmitter<string, any>();
 
   private target: PostMessage | undefined = undefined;
 
-  constructor() {}
-
-  listened: boolean = false;
+  constructor() {
+    // 在构造函数中设置监听,确保能接收来自offscreen的请求
+    self.addEventListener("message", (e: MessageEvent) => {
+      this.messageHandle(e.data, e.source as PostMessage);
+    });
+  }
 
   async init() {
     if (!this.target && self.clients) {
-      if (!this.listened) {
-        this.listened = true;
-        self.addEventListener("message", (e) => {
-          this.messageHandle(e.data);
-        });
-      }
       const list = await self.clients.matchAll({ includeUncontrolled: true, type: "window" });
       // 找到offscreen.html窗口
       this.target = list.find((client) => client.url == chrome.runtime.getURL("src/offscreen.html")) as PostMessage;
     }
   }
 
-  messageHandle(data: WindowMessageBody) {
+  messageHandle(data: WindowMessageBody, source?: PostMessage) {
     // 处理消息
-    if (data.type === "respMessage") {
+    if (data.type === "sendMessage" && source) {
+      // 接收到来自offscreen的请求消息
+      this.EE.emit("message", data.data, (resp: any) => {
+        if (!data.messageId) {
+          return;
+        }
+        const body: WindowMessageBody = {
+          messageId: data.messageId,
+          type: "respMessage",
+          data: resp,
+        };
+        source.postMessage(body);
+      });
+    } else if (data.type === "connect" && source) {
+      // 接收到来自offscreen的连接请求
+      this.EE.emit("connect", data.data, new WindowMessageConnect(data.messageId, this.EE, source));
+    } else if (data.type === "respMessage") {
       // 接收到响应消息
       this.EE.emit(`response:${data.messageId}`, data);
     } else if (data.type === "disconnect") {
@@ -240,6 +262,14 @@ export class ServiceWorkerMessageSend implements MessageSend {
     }
   }
 
+  onMessage(callback: OnMessageCallback): void {
+    this.EE.addListener("message", callback);
+  }
+
+  onConnect(callback: OnConnectCallback): void {
+    this.EE.addListener("connect", callback);
+  }
+
   async connect(data: TMessage): Promise<MessageConnect> {
     await this.init();
     const body: WindowMessageBody<TMessage> = {
@@ -271,3 +301,61 @@ export class ServiceWorkerMessageSend implements MessageSend {
     });
   }
 }
+
+// Offscreen端通过navigator.serviceWorker.controller.postMessage向SW发送消息
+// 与ServiceWorkerMessageSend配对使用,实现Offscreen→SW的postMessage通道
+export class ServiceWorkerClientMessage implements MessageSend {
+  EE = new EventEmitter<string, any>();
+
+  constructor() {
+    navigator.serviceWorker.addEventListener("message", (e) => {
+      this.messageHandle(e.data);
+    });
+  }
+
+  messageHandle(data: WindowMessageBody) {
+    // 只处理响应类消息,请求类消息由WindowMessage处理
+    if (data.type === "respMessage") {
+      this.EE.emit(`response:${data.messageId}`, data);
+    } else if (data.type === "disconnect") {
+      this.EE.emit(`disconnect:${data.messageId}`);
+    } else if (data.type === "connectMessage") {
+      this.EE.emit(`connectMessage:${data.messageId}`, data.data);
+    }
+  }
+
+  private postToServiceWorker(message: any) {
+    navigator.serviceWorker.controller!.postMessage(message);
+  }
+
+  async connect(data: TMessage): Promise<MessageConnect> {
+    const body: WindowMessageBody<TMessage> = {
+      messageId: uuidv4(),
+      type: "connect",
+      data,
+    };
+    const target: PostMessage = {
+      postMessage: (msg) => this.postToServiceWorker(msg),
+    };
+    this.postToServiceWorker(body);
+    return new WindowMessageConnect(body.messageId, this.EE, target);
+  }
+
+  sendMessage<T = any>(data: TMessage): Promise<T> {
+    return new Promise((resolve: ((value: T) => void) | null) => {
+      const messageId = uuidv4();
+      const body: WindowMessageBody<TMessage> = {
+        messageId,
+        type: "sendMessage",
+        data,
+      };
+      const eventId = `response:${messageId}`;
+      this.EE.addListener(eventId, (body: WindowMessageBody<TMessage>) => {
+        this.EE.removeAllListeners(eventId);
+        resolve!(body.data as T);
+        resolve = null;
+      });
+      this.postToServiceWorker(body);
+    });
+  }
+}

src/app/service/offscreen/index.ts

@@ -2,8 +2,7 @@ import { forwardMessage, Server } from "@Packages/message/server";
 import type { MessageSend } from "@Packages/message/types";
 import { ScriptService } from "./script";
 import { type Logger } from "@App/app/repo/logger";
-import { WindowMessage } from "@Packages/message/window_message";
-import { ServiceWorkerClient } from "../service_worker/client";
+import { ServiceWorkerClientMessage, WindowMessage } from "@Packages/message/window_message";
 import { sendMessage } from "@Packages/message/client";
 import GMApi from "./gm_api";
 import { MessageQueue } from "@Packages/message/message_queue";
@@ -18,12 +17,13 @@ export class OffscreenManager {
 
   private messageQueue = new MessageQueue();
 
-  private serviceWorker: ServiceWorkerClient;
+  // 通过postMessage与SW通信,支持结构化克隆(Blob等)
+  private swPostMessage: ServiceWorkerClientMessage;
 
   constructor(private extMsgSender: MessageSend) {
     this.windowMessage = new WindowMessage(window, sandbox, true);
     this.windowServer = new Server("offscreen", this.windowMessage);
-    this.serviceWorker = new ServiceWorkerClient(this.extMsgSender);
+    this.swPostMessage = new ServiceWorkerClientMessage();
   }
 
   logger(data: Logger) {
@@ -36,7 +36,7 @@ export class OffscreenManager {
 
   preparationSandbox() {
     // 通知初始化好环境了
-    this.serviceWorker.preparationOffscreen();
+    sendMessage(this.swPostMessage, "serviceWorker/preparationOffscreen");
   }
 
   sendMessageToServiceWorker(data: { action: string; data: any }) {
@@ -55,8 +55,8 @@ export class OffscreenManager {
       this.messageQueue
     );
     script.init();
-    // 转发从sandbox来的gm api请求
-    forwardMessage("serviceWorker", "runtime/gmApi", this.windowServer, this.extMsgSender);
+    // 转发从sandbox来的gm api请求,通过postMessage通道传输(支持Blob等结构化克隆)
+    forwardMessage("serviceWorker", "runtime/gmApi", this.windowServer, this.swPostMessage);
     // 转发valueUpdate与emitEvent
     forwardMessage("sandbox", "runtime/valueUpdate", this.windowServer, this.windowMessage);
     forwardMessage("sandbox", "runtime/emitEvent", this.windowServer, this.windowMessage);

src/service_worker.ts

@@ -69,9 +69,11 @@ function main() {
     labels: { env: "service_worker" },
   });
   loggerCore.logger().debug("service worker start");
-  const server = new Server("serviceWorker", message);
+  const swMessage = new ServiceWorkerMessageSend();
+  // 同时接收ExtensionMessage(chrome.runtime)和ServiceWorkerMessageSend(postMessage)的消息
+  const server = new Server("serviceWorker", [message, swMessage]);
   const messageQueue = new MessageQueue();
-  const manager = new ServiceWorkerManager(server, messageQueue, new ServiceWorkerMessageSend());
+  const manager = new ServiceWorkerManager(server, messageQueue, swMessage);
   manager.initManager();
   // 初始化沙盒环境
   setupOffscreenDocument();