diff --git a/src/messaging/README.md b/src/messaging/README.md index bb778cc..628d206 100644 --- a/src/messaging/README.md +++ b/src/messaging/README.md @@ -1,40 +1,37 @@ ## 消息通信库封装 ### 消息端 + 一共分3个端: + 1. 扩展端(`background.ts`):扩展后台服务,整个浏览器最多一个实例。 -2. 注入端(`inject.ts`):会注入到网页中运行,可以访问网页元素,每个网页可能n个实例(看注入的次数),但多个实例一般是不必要的,所以尽量控制。 -3. 应用端(`App.tsx`):会放入iframe中,然后iframe元素添加到网页上,每个iframe一个实例;或者options.html选项页面也是应用实例。 +2. 注入端(`inject.ts`):会注入到网页中运行,可以访问网页元素,每个网页可能n个实例(看注入的次数),但多个实例一般是不必要的,所以尽量控制在一个实例。 +3. 应用端(`App.tsx`):会放入iframe中,然后iframe元素添加到网页上,每个iframe一个实例;或者options.html选项页面也是应用实例;或者sidepanel.html页面也是应用实例。 + +### 消息协议 + +协议分两层: + +1. (底层)一层协议为`Layer1Protocol`,内部封装了port,支持双向通信(发送与接收) +2. (高层)二层协议分3个部分,基于一层协议: + 1. `ExtensionMessage`:扩展端的 + 2. `InjectMessage`:注入端端 + 3. `useMessageService`与`useMessage`:应用端的 + +### 通信方向 -### 消息通信 通信分为6个方向: -1. 扩展端 --> 注入端: - 1. 监听:`chrome.runtime.onMessage.addListener` - 2. 发送:`chrome.tabs.sendMessage` -2. 扩展端 --> 应用端: - 1. 监听:`chrome.runtime.onMessage.addListener` - 2. 发送:`chrome.tabs.sendMessage` + +1. 扩展端 --> 注入端 +2. 扩展端 --> 应用端 3. 注入端 --> 扩展端 - 1. 监听:`chrome.runtime.onMessage.addListener` - 2. 发送:`chrome.runtime.sendMessage` 4. 注入端 --> 应用端 - 1. 监听:`postmessage-promise`库 - 2. 发送:`postmessage-promise`库 5. 应用端 --> 注入端 - 1. 监听:`postmessage-promise`库 - 2. 发送:`postmessage-promise`库 6. 应用端 --> 扩展端 - 1. 监听:`chrome.runtime.onMessage.addListener` - 2. 发送:`chrome.runtime.sendMessage` -### 通信实现方式 -1. 浏览器扩展接口:对于注入端与应用端,可以用这种方式与扩展端互相通信。 - 1. `chrome.runtime.onMessage.addListener` - 2. `chrome.runtime.sendMessage` - 3. `chrome.tabs.sendMessage` -2. `postmessage-promise`库:应用端跟注入端双向通信用这个第三方库。 +应用端与注入端通信实现方式:通过扩展端中转。 -### 说明 -1. `chrome.tabs.sendMessage`这个方法是向标签页发送信息,标签页内的所有`注入端`与`应用端`都会收到信息。 -2. `chrome.runtime.sendMessage`这个方法是向扩展端发送信息 -3. `chrome.runtime.onMessage.addListener`这个监听器三个端都能放。 \ No newline at end of file +### 通信流程 + +1. 注入端:通过port连接扩展端,然后发送握手信息(里面包含了此端的一些信息) +2. 应用端:同注入端。 diff --git a/src/messaging/const.ts b/src/messaging/const.ts index 523a0de..6e66250 100644 --- a/src/messaging/const.ts +++ b/src/messaging/const.ts @@ -1,10 +1,8 @@ // 请求信息 export type L2ReqMsg = { from: 'extension' | 'inject' | 'app' - // target: string method: string params?: any - // [key: string]: any } // 响应信息 @@ -14,8 +12,8 @@ export type L2ResMsg = { data?: L2Res } -export const MESSAGE_TO_EXTENSION_HANDSHAKE = 'handshake' -export const MESSAGE_TO_EXTENSION_ROUTE_MSG = 'routeMsg' +export const MESSAGE_TO_EXTENSION_HANDSHAKE = '_handshake' +export const MESSAGE_TO_EXTENSION_ROUTE_MSG = '_routeMsg' export const TAG_TARGET_INJECT = 'target:inject' export const TAG_TARGET_APP = 'target:app' diff --git a/src/messaging/layer2/ExtensionMessage.ts b/src/messaging/layer2/ExtensionMessage.ts index cb138e2..56a2436 100644 --- a/src/messaging/layer2/ExtensionMessage.ts +++ b/src/messaging/layer2/ExtensionMessage.ts @@ -1,7 +1,7 @@ import Layer1Protocol from '../layer1/Layer1Protocol' import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE_MSG } from '../const' -export type PortContext = { +type PortContext = { id: string name: string //暂时没什么用 port: chrome.runtime.Port @@ -12,8 +12,8 @@ export type PortContext = { tags?: string[] // 标签,用来筛选消息发送目标 } -export type L2MethodHandler = (params: any, context: MethodContext, portContext: PortContext) => Promise -export type L2MethodHandlers = { +type L2MethodHandler = (params: any, context: MethodContext, portContext: PortContext) => Promise +type L2MethodHandlers = { [key: string]: L2MethodHandler }