You've already forked bilibili-subtitle
1.9 KiB
1.9 KiB
消息通信库封装
消息端
一共分3个端：
- 扩展端（
background.ts）：扩展后台服务，整个浏览器最多一个实例。 - 注入端（
inject.ts）：会注入到网页中运行，可以访问网页元素，每个网页可能n个实例（看注入的次数），但多个实例一般是不必要的，所以尽量控制。 - 应用端（
App.tsx）：会放入iframe中，然后iframe元素添加到网页上，每个iframe一个实例；或者options.html选项页面也是应用实例。
消息通信
通信分为6个方向：
- 扩展端 --> 注入端:
- 监听：
chrome.runtime.onMessage.addListener - 发送：
chrome.tabs.sendMessage
- 监听：
- 扩展端 --> 应用端:
- 监听：
chrome.runtime.onMessage.addListener - 发送：
chrome.tabs.sendMessage
- 监听：
- 注入端 --> 扩展端
- 监听：
chrome.runtime.onMessage.addListener - 发送：
chrome.runtime.sendMessage
- 监听：
- 注入端 --> 应用端
- 监听：
postmessage-promise库 - 发送：
postmessage-promise库
- 监听：
- 应用端 --> 注入端
- 监听：
postmessage-promise库 - 发送：
postmessage-promise库
- 监听：
- 应用端 --> 扩展端
- 监听：
chrome.runtime.onMessage.addListener - 发送：
chrome.runtime.sendMessage
- 监听：
通信实现方式
- 浏览器扩展接口：对于注入端与应用端，可以用这种方式与扩展端互相通信。
chrome.runtime.onMessage.addListenerchrome.runtime.sendMessagechrome.tabs.sendMessage
postmessage-promise库：应用端跟注入端双向通信用这个第三方库。
说明
chrome.tabs.sendMessage这个方法是向标签页发送信息，标签页内的所有注入端与应用端都会收到信息。chrome.runtime.sendMessage这个方法是向扩展端发送信息chrome.runtime.onMessage.addListener这个监听器三个端都能放。