## 消息通信库封装 此消息通信库设计为通用的,后面可能会提取到单独的项目中。 ### 消息端 一共分3个端: 1. 扩展端(`background.ts`):扩展后台服务,整个浏览器最多一个实例。 2. 注入端(`inject.ts`):会注入到网页中运行,可以访问网页元素,每个网页可能n个实例(看注入的次数),但多个实例一般是不必要的,所以尽量控制在一个实例。 3. 应用端(`App.tsx`):会放入iframe中,然后iframe元素添加到网页上,每个iframe一个实例;或者options.html选项页面也是应用实例;或者sidepanel.html页面也是应用实例。 ### 消息协议 协议分两层: 1. (底层)一层协议为`Layer1Protocol`,内部封装了port,支持双向通信(发送与接收) 2. (高层)二层协议分3个部分,基于一层协议: 1. `ExtensionMessaging`:扩展端的 2. `InjectMessaging`:注入端端 3. `useMessagingService`与`useMessaging`:应用端的 ### 通信方向 通信分为6个方向: 1. 扩展端 --> 注入端 2. 扩展端 --> 应用端 3. 注入端 --> 扩展端 4. 注入端 --> 应用端 5. 应用端 --> 注入端 6. 应用端 --> 扩展端 应用端与注入端通信实现方式:通过扩展端中转。 ### 通信流程 1. 注入端:通过port连接扩展端,然后发送握手信息(里面包含了此端的一些信息) 2. 应用端:同注入端。