消息通信优化

src/hooks/useMessageService.ts

@@ -1,101 +0,0 @@
-import {useCallback, useContext, useEffect} from 'react'
-import {
-  MESSAGE_TARGET_APP,
-  MESSAGE_TARGET_EXTENSION,
-  MESSAGE_TARGET_INJECT,
-  MESSAGE_TO_APP_SET_INFOS,
-  MESSAGE_TO_APP_SET_VIDEO_INFO,
-} from '@/const'
-import {debug} from '@/util/biz_util'
-import {callServer, PostMessagePayload, PostMessageResponse} from 'postmessage-promise'
-import {useAppDispatch} from '../hooks/redux'
-import {Waiter} from '@kky002/kky-util'
-import {setInfos, setTitle, setUrl, setCurInfo, setCurFetched, setData} from '@/redux/envReducer'
-
-let postInjectMessage: (method: string, params: PostMessagePayload) => Promise<PostMessageResponse> | undefined
-
-export const injectWaiter = new Waiter<typeof postInjectMessage>(() => ({
-  finished: postInjectMessage != null,
-  data: postInjectMessage
-}), 100, 15000)
-
-const useMessageService = () => {
-  const dispatch = useAppDispatch()
-  const path = 'app' //useAppSelector(state => state.env.path)
-
-  const messageHandler = useCallback((method: string, params: any, from: string, context: any): boolean => {
-    switch (method) {
-      case MESSAGE_TO_APP_SET_INFOS:
-        dispatch(setInfos(params.infos))
-        dispatch(setCurInfo(undefined))
-        dispatch(setCurFetched(false))
-        dispatch(setData(undefined))
-        break
-      case MESSAGE_TO_APP_SET_VIDEO_INFO:
-        dispatch(setInfos(params.infos))
-        dispatch(setUrl(params.url))
-        dispatch(setTitle(params.title))
-        console.debug('video title: ', params.title)
-        break
-      default:
-        debug('unknown message method: ', method)
-        return false
-    }
-    return true
-  }, [dispatch])
-
-  // connect to inject
-  useEffect(() => {
-    if (path !== 'app') return
-
-    let destroyFunc: (() => void) | undefined
-
-    const serverObject = {
-      server: window.parent, // openedWindow / window.parent / window.opener;
-      origin: '*', // target-window's origin or *
-    }
-    const options = {}
-    callServer(serverObject, options).then(e => {
-      const { postMessage, listenMessage, destroy } = e
-      postInjectMessage = postMessage
-      destroyFunc = destroy
-
-      listenMessage((method, params, sendResponse) => {
-        debug('inject => ', method, params)
-
-        const success = messageHandler(method, params, MESSAGE_TARGET_INJECT, {})
-        sendResponse({
-          success,
-          code: success ? 200 : 500
-        })
-      })
-
-      debug('message ready')
-    }).catch(console.error)
-
-    return () => {
-      destroyFunc?.()
-    }
-  }, [messageHandler, path])
-
-  const extensionMessageCallback = useCallback((event: MessageData, sender: chrome.runtime.MessageSender, sendResponse: (response?: any) => void) => {
-    debug((sender.tab != null) ? `tab ${sender.tab.url??''} => ` : 'extension => ', JSON.stringify(event))
-
-    // check event target
-    if (!event || event.target !== MESSAGE_TARGET_APP) return
-
-    messageHandler(event.method, event.params, MESSAGE_TARGET_EXTENSION, {
-      sender
-    })
-  }, [messageHandler])
-
-  // listen for message
-  useEffect(() => {
-    chrome.runtime.onMessage.addListener(extensionMessageCallback)
-    return () => {
-      chrome.runtime.onMessage.removeListener(extensionMessageCallback)
-    }
-  }, [extensionMessageCallback])
-}
-
-export default useMessageService

src/hooks/useSubtitle.ts

@@ -1,15 +1,15 @@
 import {useAppDispatch, useAppSelector} from './redux'
 import React, {useCallback} from 'react'
 import {setNeedScroll, setReviewAction, setTempData} from '../redux/envReducer'
-import {sendInject} from '../util/biz_util'
 import {MESSAGE_TO_INJECT_MOVE} from '../const'
-
+import useMessage from '../messaging/useMessage'
 const useSubtitle = () => {
   const dispatch = useAppDispatch()
   const reviewed = useAppSelector(state => state.env.tempData.reviewed)
   const reviewAction = useAppSelector(state => state.env.reviewAction)
   const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
-
+  const {sendInject} = useMessage()
+  
   const move = useCallback((time: number, togglePause: boolean) => {
     sendInject(MESSAGE_TO_INJECT_MOVE, {time, togglePause})
 

src/hooks/useSubtitleService.ts

@@ -19,8 +19,8 @@ import {EventBusContext} from '../Router'
 import {EVENT_EXPAND, GEMINI_TOKENS, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_MIN, WORDS_RATE, MESSAGE_TO_INJECT_GET_VIDEO_STATUS, MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO, MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO, MESSAGE_TO_INJECT_HIDE_TRANS, MESSAGE_TO_INJECT_UPDATETRANSRESULT} from '../const'
 import {useInterval} from 'ahooks'
 import {getModelMaxTokens, getWholeText} from '../util/biz_util'
-import {sendInject} from '../util/biz_util'
 import {MESSAGE_TO_INJECT_GET_SUBTITLE} from '../const'
+import useMessage from '../messaging/useMessage'
 
 /**
  * Service是单例，类似后端的服务概念
@@ -44,6 +44,7 @@ const useSubtitleService = () => {
   const autoTranslate = useAppSelector(state => state.env.autoTranslate)
   const reviewed = useAppSelector(state => state.env.tempData.reviewed)
   const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
+  const {sendInject} = useMessage()
 
   //如果reviewActions达到15次，则设置reviewed为false
   useEffect(() => {

src/hooks/useTranslate.ts

@@ -29,9 +29,9 @@ import {
 } from '../const'
 import toast from 'react-hot-toast'
 import {useMemoizedFn} from 'ahooks/es'
-import {extractJsonArray, extractJsonObject, getModel, sendExtension} from '../util/biz_util'
+import {extractJsonArray, extractJsonObject, getModel} from '../util/biz_util'
 import {formatTime} from '../util/util'
-
+import useMessage from '@/messaging/useMessage'
 const useTranslate = () => {
   const dispatch = useAppDispatch()
   const data = useAppSelector(state => state.env.data)
@@ -45,7 +45,7 @@ const useTranslate = () => {
   const reviewed = useAppSelector(state => state.env.tempData.reviewed)
   const reviewAction = useAppSelector(state => state.env.reviewAction)
   const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
-
+  const {sendExtension} = useMessage()
   /**
    * 获取下一个需要翻译的行
    * 会检测冷却