优化

src/hooks/useSubtitleService.ts

@@ -21,7 +21,7 @@ import {useAsyncEffect, useInterval} from 'ahooks'
 import {getModelMaxTokens, getWholeText} from '../utils/biz_util'
 import {MESSAGE_TO_INJECT_GET_SUBTITLE} from '../consts/const'
 import useMessage from '../messaging/layer2/useMessage'
-import { injectWaiter } from '@/messaging/layer2/useMessageService'
+import { msgWaiter } from '@/messaging/layer2/useMessageService'
 
 /**
  * Service是单例，类似后端的服务概念
@@ -95,7 +95,7 @@ const useSubtitleService = () => {
 
   useAsyncEffect(async () => {
     // 等待inject准备好
-    await injectWaiter.wait()
+    await msgWaiter.wait()
     // 初始获取列表
     sendInject(MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO, {force: true})
     // 初始获取设置信息

src/messaging/README.md

@@ -1,4 +1,5 @@
 ## 消息通信库封装
+此消息通信库设计为通用的，后面可能会提取到单独的项目中。
 
 ### 消息端
 

src/messaging/const.ts

@@ -13,7 +13,7 @@ export type L2ResMsg<L2Res = any> = {
 }
 
 export const MESSAGE_TO_EXTENSION_HANDSHAKE = '_handshake'
-export const MESSAGE_TO_EXTENSION_ROUTE_MSG = '_routeMsg'
+export const MESSAGE_TO_EXTENSION_ROUTE = '_route'
 
 export const TAG_TARGET_INJECT = 'target:inject'
 export const TAG_TARGET_APP = 'target:app'

src/messaging/layer2/ExtensionMessage.ts

@@ -1,33 +1,33 @@
 import Layer1Protocol from '../layer1/Layer1Protocol'
-import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE_MSG } from '../const'
+import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE } from '../const'
 
-type PortContext = {
+type PortContext<L2ReqMsg, L2ResMsg> = {
   id: string
   name: string //暂时没什么用
   port: chrome.runtime.Port
-  portMessageHandler: Layer1Protocol
+  portMessageHandler: Layer1Protocol<L2ReqMsg, L2ResMsg>
   ready: boolean
 
   tabId?: number // 所属tab
   tags?: string[] // 标签，用来筛选消息发送目标
 }
 
-type L2MethodHandler = (params: any, context: MethodContext, portContext: PortContext) => Promise<any>
-type L2MethodHandlers = {
-  [key: string]: L2MethodHandler
+type L2MethodHandler<L2ReqMsg, L2ResMsg> = (params: any, context: MethodContext, portContext: PortContext<L2ReqMsg, L2ResMsg>) => Promise<any>
+type L2MethodHandlers<L2ReqMsg, L2ResMsg> = {
+  [key: string]: L2MethodHandler<L2ReqMsg, L2ResMsg>
 }
 
 class ExtensionMessage {
-  portIdToPort: Map<string, PortContext> = new Map()
-  methods?: L2MethodHandlers
+  portIdToPort: Map<string, PortContext<L2ReqMsg, L2ResMsg>> = new Map()
+  methods?: L2MethodHandlers<L2ReqMsg, L2ResMsg>
 
   debug = (...args: any[]) => {
     console.debug('[Extension Messaging]', ...args)
   }
 
-  init = (methods: L2MethodHandlers) => {
-    const innerMethods: L2MethodHandlers = {
-      [MESSAGE_TO_EXTENSION_HANDSHAKE]: async (params: any, context: MethodContext, portContext: PortContext) => {
+  init = (methods: L2MethodHandlers<L2ReqMsg, L2ResMsg>) => {
+    const innerMethods: L2MethodHandlers<L2ReqMsg, L2ResMsg> = {
+      [MESSAGE_TO_EXTENSION_HANDSHAKE]: async (params: any, context: MethodContext, portContext: PortContext<L2ReqMsg, L2ResMsg>) => {
         const tags = params.tags
         let tabId = params.tabId
 
@@ -44,7 +44,7 @@ class ExtensionMessage {
         portContext.tags = tags
         portContext.ready = true
       },
-      [MESSAGE_TO_EXTENSION_ROUTE_MSG]: async (params: any, context: MethodContext) => {
+      [MESSAGE_TO_EXTENSION_ROUTE]: async (params: any, context: MethodContext) => {
         return this.broadcastMessageExact([context.tabId!], params.tags, params.method, params.params)
       },
     }
@@ -84,7 +84,7 @@ class ExtensionMessage {
         }
       }, port)
       // 创建portContext
-      const portContext: PortContext = { id, name, port, portMessageHandler, ready: false }
+      const portContext: PortContext<L2ReqMsg, L2ResMsg> = { id, name, port, portMessageHandler, ready: false }
       this.portIdToPort.set(id, portContext)
 
       // 监听断开连接
@@ -110,8 +110,7 @@ class ExtensionMessage {
         //check tags
         if (tags == null || tags.some(tag => portContext.tags?.includes(tag))) {
           try {
-            const req: L2ReqMsg = { method, params, from: 'extension' }
-            res = await portContext.portMessageHandler.sendMessage(req)
+            res = await portContext.portMessageHandler.sendMessage({ method, params, from: 'extension' })
           } catch (e) {
             console.error('send message to port error', portContext.id, e)
           }

src/messaging/layer2/InjectMessage.ts

@@ -1,5 +1,5 @@
 import Layer1Protocol from '../layer1/Layer1Protocol'
-import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE_MSG, TAG_TARGET_APP, TAG_TARGET_INJECT } from '../const'
+import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_HANDSHAKE, MESSAGE_TO_EXTENSION_ROUTE, TAG_TARGET_APP, TAG_TARGET_INJECT } from '../const'
 
 class InjectMessage {
     port?: chrome.runtime.Port
@@ -94,7 +94,7 @@ class InjectMessage {
         if (method === 'setVideoInfo') {
             console.log('sendApp>>>', method, params)
         }
-        return this.sendExtension(MESSAGE_TO_EXTENSION_ROUTE_MSG, {
+        return this.sendExtension(MESSAGE_TO_EXTENSION_ROUTE, {
             tags: [TAG_TARGET_APP],
             method,
             params,

src/messaging/layer2/useMessage.ts

@@ -1,12 +1,12 @@
-import { injectWaiter } from './useMessageService'
+import { msgWaiter } from './useMessageService'
 import { useCallback } from 'react'
 import Layer1Protocol from '../layer1/Layer1Protocol'
-import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_ROUTE_MSG, TAG_TARGET_INJECT } from '../const'
+import { L2ReqMsg, L2ResMsg, MESSAGE_TO_EXTENSION_ROUTE, TAG_TARGET_INJECT } from '../const'
 
 const useMessage = () => {
     const sendExtension = useCallback(async <T = any>(method: string, params?: any) => {
         // wait
-        const pmh = await injectWaiter.wait() as Layer1Protocol<L2ReqMsg, L2ResMsg>
+        const pmh = await msgWaiter.wait() as Layer1Protocol<L2ReqMsg, L2ResMsg>
         // send message
         const res = await pmh.sendMessage({
             from: 'app',
@@ -21,7 +21,7 @@ const useMessage = () => {
     }, [])
 
     const sendInject = useCallback(async <T = any>(method: string, params?: any): Promise<T> => {
-        return await sendExtension(MESSAGE_TO_EXTENSION_ROUTE_MSG, {
+        return await sendExtension(MESSAGE_TO_EXTENSION_ROUTE, {
             tags: [TAG_TARGET_INJECT],
             method,
             params: params ?? {},

src/messaging/layer2/useMessageService.ts

@@ -11,9 +11,9 @@ let portMessageHandlerInit: boolean = false
 let portMessageHandler: Layer1Protocol<L2ReqMsg, L2ResMsg> | undefined
 // let postInjectMessage: (method: string, params: PostMessagePayload) => Promise<PostMessageResponse> | undefined
 
-export const injectWaiter = new Waiter<any>(() => ({
+export const msgWaiter = new Waiter<Layer1Protocol<L2ReqMsg, L2ResMsg>>(() => ({
   finished: portMessageHandlerInit,
-  data: portMessageHandler
+  data: portMessageHandler!,
 }), 100, 15000)
 
 const useMessageService = (methods?: {