From c3b53a016c7b86cddaeffa704d5eac7fc02e261d Mon Sep 17 00:00:00 2001
From: IndieKKY <indiekky@gmail.com>
Date: Fri, 4 Oct 2024 13:15:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E9=80=9A=E4=BF=A1=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/chrome/backgroundUtil.ts | 14 +++++++++++++
 src/messaging/README.md      | 40 ++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 src/chrome/backgroundUtil.ts
 create mode 100644 src/messaging/README.md

diff --git a/src/chrome/backgroundUtil.ts b/src/chrome/backgroundUtil.ts
new file mode 100644
index 0000000..54c1981
--- /dev/null
+++ b/src/chrome/backgroundUtil.ts
@@ -0,0 +1,14 @@
+export const broadcastMessage = async (ignoreTabIds: number[] | undefined | null, target: string, method: string, params?: any) => {
+  const tabs = await chrome.tabs.query({
+    discarded: false,
+  })
+  for (const tab of tabs) {
+    try {
+      if (tab.id && ((ignoreTabIds == null) || !ignoreTabIds.includes(tab.id))) {
+        await chrome.tabs.sendMessage(tab.id, {target, method, params})
+      }
+    } catch (e) {
+      console.error('send message to tab error', tab.id, e)
+    }
+  }
+}
diff --git a/src/messaging/README.md b/src/messaging/README.md
new file mode 100644
index 0000000..bb778cc
--- /dev/null
+++ b/src/messaging/README.md
@@ -0,0 +1,40 @@
+## 消息通信库封装
+
+### 消息端
+一共分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`这个监听器三个端都能放。
\ No newline at end of file