codfrm/scriptcat-mv3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

三个页面之间的交互

Browse Source
This commit is contained in:
王一之
2025-01-08 18:04:28 +08:00
parent c4b47d117c
commit c2e5c7600e
22 changed files with 465 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
packages/message/extension_message.ts Normal file
View File

@ -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);
}
}

21
packages/message/message_queue.ts
View File

@ -1,16 +1,15 @@
import EventEmitter from "eventemitter3";
import { connect } from "./client";
import { ApiFunction, Server } from "./server";
import { ApiFunction, Message, MessageConnect, Server } from "./server";
export type SubscribeCallback = (message: any) => void;
export class Broker {
constructor() {}
constructor(private msg: Message) {}
// 订阅
async subscribe(topic: string, handler: SubscribeCallback): Promise<chrome.runtime.Port> {
const con = await connect("messageQueue", { action: "subscribe", topic });
con.onMessage.addListener((msg: { action: string; topic: string; message: any }) => {
async subscribe(topic: string, handler: SubscribeCallback): Promise<MessageConnect> {
const con = await this.msg.connect({ action: "messageQueue", data: { action: "subscribe", topic } });
con.onMessage((msg: { action: string; topic: string; message: any }) => {
if (msg.action === "message") {
handler(msg.message);
}
@ -26,7 +25,7 @@ export class Broker {
// 消息队列
export class MessageQueue {
topicConMap: Map<string, { name: string; con: chrome.runtime.Port }[]> = new Map();
topicConMap: Map<string, { name: string; con: MessageConnect }[]> = new Map();
private EE: EventEmitter = new EventEmitter();
@ -44,7 +43,7 @@ export class MessageQueue {
}
switch (action) {
case "subscribe":
this.subscribe(topic, con as chrome.runtime.Port);
this.subscribe(topic, con as MessageConnect);
break;
case "publish":
this.publish(topic, message);
@ -55,14 +54,14 @@ export class MessageQueue {
};
}
private subscribe(topic: string, con: chrome.runtime.Port) {
private subscribe(topic: string, con: MessageConnect) {
let list = this.topicConMap.get(topic);
if (!list) {
list = [];
this.topicConMap.set(topic, list);
}
list.push({ name: topic, con });
con.onDisconnect.addListener(() => {
con.onDisconnect(() => {
let list = this.topicConMap.get(topic);
// 移除断开连接的con
list = list!.filter((item) => item.con !== con);
@ -73,7 +72,7 @@ export class MessageQueue {
publish(topic: string, message: any) {
const list = this.topicConMap.get(topic);
list?.forEach((item) => {
item.con.postMessage({ action: "message", topic, message });
item.con.sendMessage({ action: "message", topic, message });
});
this.EE.emit(topic, message);
}

57
packages/message/server.ts
View File

@ -1,19 +1,36 @@
export type ApiFunction = (params: any, con: chrome.runtime.Port | chrome.runtime.MessageSender) => any;
export interface Message {
onConnect(callback: (data: any, con: MessageConnect) => void): void;
onMessage(callback: (data: any, sendResponse: (data: any) => void) => void): void;
connect(data: any): Promise<MessageConnect>;
sendMessage(data: any): Promise<any>;
}
export interface MessageConnect {
onMessage(callback: (data: any) => void): void;
sendMessage(data: any): void;
disconnect(): void;
onDisconnect(callback: () => void): void;
}
export type MessageSender = {
tabId: number;
};
export type ApiFunction = (params: any, con: MessageConnect | null) => any;
export class Server {
private apiFunctionMap: Map<string, ApiFunction> = new Map();
constructor(private env: string) {
chrome.runtime.onConnect.addListener((port) => {
const handler = (msg: { action: string; data: any }) => {
port.onMessage.removeListener(handler);
this.connectHandle(msg.action, msg.data, port);
};
port.onMessage.addListener(handler);
constructor(
private env: string,
message: Message
) {
message.onConnect((msg: any, con: MessageConnect) => {
this.connectHandle(msg.action, msg.data, con);
});
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
this.messageHandle(msg.action, msg.data, sender, sendResponse);
message.onMessage((msg, sendResponse) => {
return this.messageHandle(msg.action, msg.data, sendResponse);
});
}
@ -25,24 +42,26 @@ export class Server {
this.apiFunctionMap.set(name, func);
}
private connectHandle(msg: string, params: any, con: chrome.runtime.Port) {
private connectHandle(msg: string, params: any, con: MessageConnect) {
const func = this.apiFunctionMap.get(msg);
if (func) {
func(params, con);
}
}
private messageHandle(
msg: string,
params: any,
sender: chrome.runtime.MessageSender,
sendResponse: (response: any) => void
) {
private messageHandle(msg: string, params: any, sendResponse: (response: any) => void) {
const func = this.apiFunctionMap.get(msg);
if (func) {
try {
const ret = func(params, sender);
sendResponse({ code: 0, data: ret });
const ret = func(params, null);
if (ret instanceof Promise) {
ret.then((data) => {
sendResponse({ code: 0, data });
});
return true;
} else {
sendResponse({ code: 0, data: ret });
}
} catch (e: any) {
sendResponse({ code: -1, message: e.message });
}

58
packages/message/window_message.ts
View File

@ -1,4 +1,5 @@
import { v4 as uuidv4 } from "uuid";
import { Message, MessageConnect } from "./server";
// 通过 window.postMessage/onmessage 实现通信
@ -7,11 +8,11 @@ import EventEmitter from "eventemitter3";
// 消息体
export type WindowMessageBody = {
messageId: string; // 消息id
type: "sendMessage" | "respMessage" | "connect"; // 消息类型
type: "sendMessage" | "respMessage" | "connect" | "disconnect" | "connectMessage"; // 消息类型
data: any; // 消息数据
};
export class WindowMessage {
export class WindowMessage implements Message {
EE: EventEmitter = new EventEmitter();
// source: Window 消息来源
@ -22,7 +23,7 @@ export class WindowMessage {
) {
// 监听消息
this.source.addEventListener("message", (e) => {
if (e.source === this.target) {
if (e.source === this.target || e.source === this.source) {
this.messageHandle(e.data);
}
});
@ -47,22 +48,22 @@ export class WindowMessage {
} else if (data.type === "connect") {
this.EE.emit("connect", data.data, new WindowMessageConnect(data.messageId, this.EE, this.target));
} else if (data.type === "disconnect") {
this.EE.emit("disconnect", data.data, new WindowMessageConnect(data.messageId, this.EE, this.target));
this.EE.emit("disconnect:" + data.messageId);
} else if (data.type === "connectMessage") {
this.EE.emit("connectMessage", data.data, new WindowMessageConnect(data.messageId, this.EE, this.target));
this.EE.emit("connectMessage:" + data.messageId, data.data);
}
}
onConnect(callback: (data: any, con: WindowMessageConnect) => void) {
onConnect(callback: (data: any, con: MessageConnect) => void) {
this.EE.addListener("connect", callback);
}
connect(action: string, data?: any): Promise<WindowMessageConnect> {
connect(data: any): Promise<MessageConnect> {
return new Promise((resolve) => {
const body: WindowMessageBody = {
messageId: uuidv4(),
type: "connect",
data: { action, data },
data,
};
this.target.postMessage(body, "*");
resolve(new WindowMessageConnect(body.messageId, this.EE, this.target));
@ -73,12 +74,13 @@ export class WindowMessage {
this.EE.addListener("message", callback);
}
sendMessage(action: string, data?: any): Promise<any> {
// 发送消息 注意不进行回调的内存泄漏
sendMessage(data: any): Promise<any> {
return new Promise((resolve) => {
const body: WindowMessageBody = {
messageId: uuidv4(),
type: "sendMessage",
data: { action, data },
data,
};
const callback = (body: WindowMessageBody) => {
this.EE.removeListener("response:" + body.messageId, callback);
@ -90,10 +92,42 @@ export class WindowMessage {
}
}
export class WindowMessageConnect {
export class WindowMessageConnect implements MessageConnect {
constructor(
private messageId: string,
private EE: EventEmitter,
private target: Window
) {}
) {
this.onDisconnect(() => {
// 移除所有监听
this.EE.removeAllListeners("connectMessage:" + this.messageId);
this.EE.removeAllListeners("disconnect:" + this.messageId);
});
}
sendMessage(data: any) {
const body: WindowMessageBody = {
messageId: this.messageId,
type: "connectMessage",
data,
};
this.target.postMessage(body, "*");
}
onMessage(callback: (data: any) => void) {
this.EE.addListener("connectMessage:" + this.messageId, callback);
}
disconnect() {
const body: WindowMessageBody = {
messageId: this.messageId,
type: "disconnect",
data: null,
};
this.target.postMessage(body);
}
onDisconnect(callback: () => void) {
this.EE.addListener("disconnect:" + this.messageId, callback);
}
}