Class ServiceWorkerMessageSend

packages/message/window_message.ts:220–313

// 所以service_worker与offscreen使用ServiceWorker的方式进行通信
// 现在同时支持接收来自offscreen的请求(实现完整Message接口),使双向通道都走postMessage(结构化克隆,支持Blob)
export class ServiceWorkerMessageSend implements Message {
  EE = new EventEmitter<string, any>();

  private target: PostMessage | undefined = undefined;

  constructor() {
    // 在构造函数中设置监听,确保能接收来自offscreen的请求
    self.addEventListener("message", (e: MessageEvent) => {
      this.messageHandle(e.data, e.source as PostMessage);
    });
  }

  async init() {
    if (!this.target && self.clients) {
      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, source?: PostMessage) {
    // 处理消息
    if (data.type === "sendMessage" && source) {
      // 接收到来自offscreen的请求消息
      // 第三个参数传空对象作为sender,避免Server中SenderRuntime访问undefined属性
      // 空对象经过getExtMessageSender()会得到tabId=-1等值,表示后台脚本
      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);
        },
        {} as RuntimeMessageSender
      );
    } 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") {
      this.EE.emit(`disconnect:${data.messageId}`);
    } else if (data.type === "connectMessage") {
      this.EE.emit(`connectMessage:${data.messageId}`, data.data);
    }
  }

  onMessage(callback: OnMessageCallback): void {
    this.EE.addListener("message", callback);
  }