You've already forked bilibili-subtitle
39 lines
1.4 KiB
Markdown
39 lines
1.4 KiB
Markdown
## 消息通信库封装
|
||
此消息通信库设计为通用的，后面可能会提取到单独的项目中。
|
||
|
||
### 消息端
|
||
|
||
一共分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. 应用端：同注入端。
|