三个页面之间的交互

packages/message/extension_message.ts

@@ -0,0 +1,57 @@
+import { Message, MessageConnect } from "./server";
+
+export class ExtensionMessage implements Message {
+  onConnect(callback: (data: any, con: MessageConnect) => void) {
+    chrome.runtime.onConnect.addListener((port) => {
+      const handler = (msg: any) => {
+        port.onMessage.removeListener(handler);
+        callback(msg, new ExtensionMessageConnect(port));
+      };
+      port.onMessage.addListener(handler);
+    });
+  }
+
+  connect(data: any): Promise<MessageConnect> {
+    return new Promise((resolve) => {
+      const con = chrome.runtime.connect();
+      con.postMessage(data);
+      resolve(new ExtensionMessageConnect(con));
+    });
+  }
+
+  // 注意chrome.runtime.onMessage.addListener的回调函数需要返回true才能处理异步请求
+  onMessage(callback: (data: any, sendResponse: (data: any) => void) => void) {
+    chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
+      return callback(msg, sendResponse);
+    });
+  }
+
+  // 发送消息 注意不进行回调的内存泄漏
+  sendMessage(data: any): Promise<any> {
+    return new Promise((resolve) => {
+      chrome.runtime.sendMessage(data, (resp) => {
+        resolve(resp);
+      });
+    });
+  }
+}
+
+export class ExtensionMessageConnect implements MessageConnect {
+  constructor(private con: chrome.runtime.Port) {}
+
+  sendMessage(data: any) {
+    this.con.postMessage(data);
+  }
+
+  onMessage(callback: (data: any) => void) {
+    this.con.onMessage.addListener(callback);
+  }
+
+  disconnect() {
+    this.con.disconnect();
+  }
+
+  onDisconnect(callback: () => void) {
+    this.con.onDisconnect.addListener(callback);
+  }
+}