优化

src/messaging/README.md

@@ -1,40 +1,37 @@
 ## 消息通信库封装
 
 ### 消息端
+
 一共分3个端：
+
 1. 扩展端（`background.ts`）：扩展后台服务，整个浏览器最多一个实例。
-2. 注入端（`inject.ts`）：会注入到网页中运行，可以访问网页元素，每个网页可能n个实例（看注入的次数），但多个实例一般是不必要的，所以尽量控制。
+2. 注入端（`inject.ts`）：会注入到网页中运行，可以访问网页元素，每个网页可能n个实例（看注入的次数），但多个实例一般是不必要的，所以尽量控制在一个实例。
-3. 应用端（`App.tsx`）：会放入iframe中，然后iframe元素添加到网页上，每个iframe一个实例；或者options.html选项页面也是应用实例。
+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`
+1. 扩展端 --> 注入端 
-    2. 发送：`chrome.tabs.sendMessage`
+2. 扩展端 --> 应用端
-2. 扩展端 --> 应用端: 
-    1. 监听：`chrome.runtime.onMessage.addListener`
-    2. 发送：`chrome.tabs.sendMessage`
 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`这个方法是向扩展端发送信息
+1. 注入端：通过port连接扩展端，然后发送握手信息（里面包含了此端的一些信息）
-3. `chrome.runtime.onMessage.addListener`这个监听器三个端都能放。
+2. 应用端：同注入端。

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<L2Res = any> = {
   data?: L2Res
 }
 
-export const MESSAGE_TO_EXTENSION_HANDSHAKE = 'handshake'
+export const MESSAGE_TO_EXTENSION_HANDSHAKE = '_handshake'
-export const MESSAGE_TO_EXTENSION_ROUTE_MSG = 'routeMsg'
+export const MESSAGE_TO_EXTENSION_ROUTE_MSG = '_routeMsg'
 
 export const TAG_TARGET_INJECT = 'target:inject'
 export const TAG_TARGET_APP = 'target:app'

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<any>
+type L2MethodHandler = (params: any, context: MethodContext, portContext: PortContext) => Promise<any>
-export type L2MethodHandlers = {
+type L2MethodHandlers = {
   [key: string]: L2MethodHandler
 }