消息通信库封装

此消息通信库设计为通用的，后面可能会提取到单独的项目中。

消息端

一共分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. 扩展端 --> 注入端: chrome.tabs.sendMessage
2. 扩展端 --> 应用端: chrome.tabs.sendMessage or port
3. 注入端 --> 扩展端: chrome.runtime.sendMessage
4. 注入端 --> 应用端: chrome.runtime.sendMessage(通过扩展端中转)
5. 应用端 --> 注入端: chrome.runtime.sendMessage or port(通过扩展端中转)
6. 应用端 --> 扩展端: chrome.runtime.sendMessage or port

通信流程

1. 普通方式：应用端/注入端通过chrome.runtime.sendMessage向扩展端发送消息；扩展端通过chrome.tabs.sendMessage向应用端/注入端发送消息。
2. port方式：应用端/注入端通过chrome.runtime.connect连接扩展端，然后发送握手信息（里面包含了此端的一些信息），然后通过port双向通信。

ps

sidePanel里无法通过chrome.runtime.sendMessage向扩展端发送消息，所以才用port方式。 但长连接更占资源，且容易自动断掉，需要重连，因此如果没有用到sidePanel时不推荐使用。