bilibili-subtitle/src/messaging

消息通信库封装

消息端

一共分3个端：

1. 扩展端（background.ts）：扩展后台服务，整个浏览器最多一个实例。
2. 注入端（inject.ts）：会注入到网页中运行，可以访问网页元素，每个网页可能n个实例（看注入的次数），但多个实例一般是不必要的，所以尽量控制。
3. 应用端（App.tsx）：会放入iframe中，然后iframe元素添加到网页上，每个iframe一个实例；或者options.html选项页面也是应用实例。

消息通信

通信分为6个方向：

1. 扩展端 --> 注入端:
   1. 监听：chrome.runtime.onMessage.addListener
   2. 发送：chrome.tabs.sendMessage
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这个方法是向扩展端发送信息
3. chrome.runtime.onMessage.addListener这个监听器三个端都能放。