fix

src/messaging/ExtensionMessage.ts

@@ -4,10 +4,12 @@ import Layer1Protocol from './Layer1Protocol'
 export type PortContext = {
   id: string
   name: string
-  tabId: number
-  type: 'inject' | 'app'
   port: chrome.runtime.Port
   portMessageHandler: Layer1Protocol
+  ready: boolean
+
+  tabId?: number
+  type?: 'inject' | 'app'
 }
 
 class ExtensionMessage {
@@ -68,42 +70,43 @@ class ExtensionMessage {
 
       const id = crypto.randomUUID()
       const name = port.name
+      const portMessageHandler = new Layer1Protocol<MessageData, MessageResult>(async (value: MessageData) => {
+        // 初始化
+        if (value.method === '_init') {
+          const type = value.params.type
+          let tabId = value.params.tabId
 
-      const listener = async (firstMessage: any) => {
-        console.log('firstMessage', name, firstMessage)
-
-        let tabId = firstMessage.tabId
-        let type = firstMessage.type
-        if (tabId == null) {
           //get current tabId
-          const tabs = await chrome.tabs.query({
+          if (tabId == null) {
-            active: true,
+            const tabs = await chrome.tabs.query({
-            currentWindow: true,
+              active: true,
-          })
+              currentWindow: true,
-          tabId = tabs[0]?.id
+            })
-          console.log('current tabId: ', tabId)
+            tabId = tabs[0]?.id
-        }
+          }
-        if (tabId != null) {
-          // @ts-ignore
-          const portContext: PortContext = {id, name, tabId, port, type}
-          const portMessageHandler = new Layer1Protocol<MessageData, MessageResult>(async (value: MessageData) => {
-            return handler(value, portContext)
-          }, port)
-          portContext.portMessageHandler = portMessageHandler
-          this.portIdToPort.set(id, portContext)
 
-          // 移除监听
+          portContext.tabId = tabId
-          port.onMessage.removeListener(listener)
+          portContext.type = type
-          // 开始监听
+          portContext.ready = true
-          portMessageHandler.startListen()
-        } else {
-          console.log('no tabId>>>', name)
-        }
-      }
-      port.onMessage.addListener(listener)
 
+          return {
+            success: true,
+            code: 200,
+          } as MessageResult
+        }
+
+        return handler(value, portContext)
+      }, port)
+      const portContext: PortContext = {id, name, port, portMessageHandler, ready: false}
+      this.portIdToPort.set(id, portContext)
+
+      // 开始监听
+      portMessageHandler.startListen()
+
+      // 监听断开连接
       port.onDisconnect.addListener(() => {
         this.portIdToPort.delete(id)
+        this.debug('onDisconnect', id)
       })
     })
   }
@@ -113,7 +116,7 @@ class ExtensionMessage {
     const targetType = target === MESSAGE_TARGET_INJECT ? 'inject' : 'app'
     let resp: MessageResult | undefined
     for (const portContext of this.portIdToPort.values()) {
-      if (tabIds.includes(portContext.tabId)) {
+      if (tabIds.includes(portContext.tabId!)) {
         if (targetType === portContext.type) {
           try {
             const messageData: MessageData = {target, method, params, from: 'extension'}

src/messaging/InjectMessage.ts

@@ -68,13 +68,18 @@ class InjectMessage {
     init(methods: {
         [key: string]: (params: any, context: MethodContext) => Promise<any>
     }) {
+        this.methods = methods
         this.port = chrome.runtime.connect(import.meta.env.VITE_EXTENSION_ID, {
             name: MESSAGE_TARGET_INJECT,
         })
         this.portMessageHandler = new Layer1Protocol<MessageData, MessageResult>(this.messageHandler, this.port)
         this.portMessageHandler!.startListen()
-        this.portMessageHandler!.init('inject')
+        this.portMessageHandler!.sendMessage({
-        this.methods = methods
+            method: '_init',
+            params: {
+                type: 'inject',
+            },
+        } as MessageData)
     }
 
     sendExtension = async <T = any>(method: string, params?: any): Promise<T> => {

src/messaging/Layer1Protocol.ts

@@ -30,12 +30,12 @@ class Layer1Protocol<L1Req = any, L1Res = any> {
     this.handler = handler
   }
 
-  init(type: 'inject' | 'app', tabId?: number) {
+  // init(type: 'inject' | 'app', tabId?: number) {
-    this.port.postMessage({
+  //   this.port.postMessage({
-      type,
+  //     type,
-      tabId,
+  //     tabId,
-    })
+  //   })
-  }
+  // }
 
   startListen() {
     // 持久监听 port.onMessage

src/messaging/useMessageService.ts

@@ -77,17 +77,19 @@ const useMessageService = (methods?: {
     if (messageHandler && port) {
       const pmh = new Layer1Protocol<MessageData, MessageResult>(messageHandler, port)
   
+      pmh.startListen()
       //get tabId from url params
-      let tabId = window.location.search.split('tabId=')[1]
+      let tabIdStr = window.location.search.split('tabId=')[1]
-      if (!tabId) {
+      let tabId = tabIdStr ? parseInt(tabIdStr) : undefined
-        pmh.startListen()
+      // 初始化
-        pmh.init('app')
+      pmh.sendMessage({
-        portMessageHandlerInit = true
+          method: '_init',
-      }else {
+          params: {
-        pmh.startListen()
+              type: 'app',
-        pmh.init('app', parseInt(tabId))
+              tabId,
-        portMessageHandlerInit = true
+          },
-      }
+      } as MessageData)
+      portMessageHandlerInit = true
   
       return pmh
     }