优化

src/chrome/background.ts

@@ -1,6 +1,6 @@
 import {v4} from 'uuid'
 import {handleTask, initTaskService, tasksMap} from './taskService'
-import { MESSAGE_TO_EXTENSION_ADD_TASK, MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL, MESSAGE_TO_EXTENSION_GET_TASK, MESSAGE_TO_EXTENSION_SHOW_FLAG, MESSAGE_TO_INJECT_TOGGLE_DISPLAY, STORAGE_ENV} from '@/consts/const'
+import { STORAGE_ENV} from '@/consts/const'
 import ExtensionMessaging from '@/messaging/layer2/ExtensionMessaging'
 import { TAG_TARGET_INJECT } from '@/messaging/const'
 

src/components/MoreBtn.tsx

@@ -13,7 +13,7 @@ import {Placement} from '@popperjs/core/lib/enums'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {setEnvData, setTempData} from '../redux/envReducer'
 import {EventBusContext} from '../Router'
-import {EVENT_EXPAND, MESSAGE_TO_INJECT_DOWNLOAD_AUDIO} from '../consts/const'
+import {EVENT_EXPAND} from '../consts/const'
 import {formatSrtTime, formatTime, formatVttTime} from '../utils/util'
 import {downloadText, openUrl} from '@kky002/kky-util'
 import toast from 'react-hot-toast'

src/consts/const.ts

@@ -1,23 +1,3 @@
-export const MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL = 'closeSidePanel'
-export const MESSAGE_TO_EXTENSION_ADD_TASK = 'addTask'
-export const MESSAGE_TO_EXTENSION_GET_TASK = 'getTask'
-export const MESSAGE_TO_EXTENSION_SHOW_FLAG = 'showFlag'
-
-export const MESSAGE_TO_INJECT_TOGGLE_DISPLAY = 'toggleDisplay'
-export const MESSAGE_TO_INJECT_FOLD = 'fold'
-export const MESSAGE_TO_INJECT_MOVE = 'move'
-export const MESSAGE_TO_INJECT_PLAY = 'play'
-export const MESSAGE_TO_INJECT_DOWNLOAD_AUDIO = 'downloadAudio'
-export const MESSAGE_TO_INJECT_GET_VIDEO_STATUS = 'getVideoStatus'
-export const MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO = 'getVideoElementInfo'
-export const MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO = 'refreshVideoInfo'
-export const MESSAGE_TO_INJECT_UPDATETRANSRESULT = 'updateTransResult'
-export const MESSAGE_TO_INJECT_HIDE_TRANS = 'hideTrans'
-export const MESSAGE_TO_INJECT_GET_SUBTITLE = 'getSubtitle'
-
-export const MESSAGE_TO_APP_SET_INFOS = 'setInfos'
-export const MESSAGE_TO_APP_SET_VIDEO_INFO = 'setVideoInfo'
-
 export const EVENT_EXPAND = 'expand'
 
 export const APP_DOM_ID = 'bilibili-subtitle'

src/hooks/useMessageService.ts

@@ -1,7 +1,6 @@
 import { setCurFetched, setCurInfo, setData, setInfos, setTitle, setUrl } from '@/redux/envReducer'
 import { useMemo } from 'react'
 import { useAppDispatch } from './redux'
-import { MESSAGE_TO_APP_SET_INFOS, MESSAGE_TO_APP_SET_VIDEO_INFO } from '@/consts/const'
 import useMessagingService from '@/messaging/layer2/useMessagingService'
 
 const useMessageService = () => {
@@ -9,15 +8,15 @@ const useMessageService = () => {
   
   //methods
   const methods: {
-    [key: string]: (params: any, context: MethodContext) => Promise<any>
+    [K in AllAPPMessages['method']]: (params: Extract<AllAPPMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
   } = useMemo(() => ({
-    [MESSAGE_TO_APP_SET_INFOS]: async (params: any, context: MethodContext) => {
+    SET_INFOS: async (params, context: MethodContext) => {
       dispatch(setInfos(params.infos))
       dispatch(setCurInfo(undefined))
       dispatch(setCurFetched(false))
       dispatch(setData(undefined))
     },
-    [MESSAGE_TO_APP_SET_VIDEO_INFO]: async (params: any, context: MethodContext) => {
+    SET_VIDEO_INFO: async (params, context: MethodContext) => {
       dispatch(setInfos(params.infos))
       dispatch(setUrl(params.url))
       dispatch(setTitle(params.title))

src/hooks/useSubtitle.ts

@@ -1,7 +1,6 @@
 import {useAppDispatch, useAppSelector} from './redux'
 import React, {useCallback} from 'react'
 import {setNeedScroll, setReviewAction, setTempData} from '../redux/envReducer'
-import {MESSAGE_TO_INJECT_MOVE} from '../consts/const'
 import useMessaging from '../messaging/layer2/useMessaging'
 const useSubtitle = () => {
   const dispatch = useAppDispatch()

src/hooks/useSubtitleService.ts

@@ -16,10 +16,9 @@ import {
   setTempData,
 } from '../redux/envReducer'
 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, TOTAL_HEIGHT_DEF} from '../consts/const'
+import {EVENT_EXPAND, GEMINI_TOKENS, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_MIN, WORDS_RATE} from '../consts/const'
 import {useAsyncEffect, useInterval} from 'ahooks'
 import {getModelMaxTokens, getWholeText} from '../utils/bizUtil'
-import {MESSAGE_TO_INJECT_GET_SUBTITLE} from '../consts/const'
 import useMessaging from '../messaging/layer2/useMessaging'
 
 /**

src/hooks/useTranslate.ts

@@ -16,8 +16,6 @@ import {
 import {
   LANGUAGE_DEFAULT,
   LANGUAGES_MAP,
-  MESSAGE_TO_EXTENSION_ADD_TASK,
-  MESSAGE_TO_EXTENSION_GET_TASK,
   PROMPT_DEFAULTS,
   PROMPT_TYPE_ASK,
   PROMPT_TYPE_TRANSLATE,

src/inject/inject.ts

@@ -1,5 +1,4 @@
-import { TOTAL_HEIGHT_DEF, HEADER_HEIGHT, TOTAL_HEIGHT_MIN, TOTAL_HEIGHT_MAX, IFRAME_ID, MESSAGE_TO_INJECT_DOWNLOAD_AUDIO, MESSAGE_TO_APP_SET_INFOS, MESSAGE_TO_INJECT_TOGGLE_DISPLAY, STORAGE_ENV, MESSAGE_TO_EXTENSION_SHOW_FLAG } from '@/consts/const'
+import { TOTAL_HEIGHT_DEF, HEADER_HEIGHT, TOTAL_HEIGHT_MIN, TOTAL_HEIGHT_MAX, IFRAME_ID, STORAGE_ENV } from '@/consts/const'
-import { MESSAGE_TO_INJECT_FOLD, MESSAGE_TO_INJECT_MOVE, MESSAGE_TO_INJECT_GET_SUBTITLE, MESSAGE_TO_INJECT_GET_VIDEO_STATUS, MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO, MESSAGE_TO_INJECT_UPDATETRANSRESULT, MESSAGE_TO_INJECT_PLAY, MESSAGE_TO_INJECT_HIDE_TRANS, MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO } from '@/consts/const'
 import InjectMessaging from '@/messaging/layer2/InjectMessaging'
 
 const debug = (...args: any[]) => {
@@ -241,9 +240,9 @@ const debug = (...args: any[]) => {
   }
 
   const methods: {
-    [key: string]: (params: any, context: MethodContext) => Promise<any>
+    [K in AllInjectMessages['method']]: (params: Extract<AllInjectMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
   } = {
-    [MESSAGE_TO_INJECT_TOGGLE_DISPLAY]: async (params) => {
+    TOGGLE_DISPLAY: async (params) => {
       const iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement | undefined
       if (iframe != null) {
         iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none'
@@ -254,11 +253,11 @@ const debug = (...args: any[]) => {
         createIframe()
       }
     },
-    [MESSAGE_TO_INJECT_FOLD]: async (params) => {
+    FOLD: async (params) => {
       runtime.fold = params.fold
       updateIframeHeight()
     },
-    [MESSAGE_TO_INJECT_MOVE]: async (params) => {
+    MOVE: async (params) => {
       const video = getVideoElement()
       if (video != null) {
         video.currentTime = params.time
@@ -267,14 +266,14 @@ const debug = (...args: any[]) => {
         }
       }
     },
-    [MESSAGE_TO_INJECT_GET_SUBTITLE]: async (params) => {
+    GET_SUBTITLE: async (params) => {
       let url = params.info.subtitle_url
       if (url.startsWith('http://')) {
         url = url.replace('http://', 'https://')
       }
       return await fetch(url).then(res => res.json())
     },
-    [MESSAGE_TO_INJECT_GET_VIDEO_STATUS]: async (params) => {
+    GET_VIDEO_STATUS: async (params) => {
       const video = getVideoElement()
       if (video != null) {
         return {
@@ -283,17 +282,17 @@ const debug = (...args: any[]) => {
         }
       }
     },
-    [MESSAGE_TO_INJECT_GET_VIDEO_ELEMENT_INFO]: async (params) => {
+    GET_VIDEO_ELEMENT_INFO: async (params) => {
       refreshVideoElement()
       return {
         noVideo: runtime.videoElement == null,
         totalHeight: runtime.videoElementHeight,
       }
     },
-    [MESSAGE_TO_INJECT_REFRESH_VIDEO_INFO]: async (params) => {
+    REFRESH_VIDEO_INFO: async (params) => {
       refreshVideoInfo(params.force)
     },
-    [MESSAGE_TO_INJECT_UPDATETRANSRESULT]: async (params) => {
+    UPDATE_TRANS_RESULT: async (params) => {
       runtime.showTrans = true
       runtime.curTrans = params?.result
 
@@ -321,7 +320,7 @@ const debug = (...args: any[]) => {
       }
       text && (text.style.display = runtime.curTrans ? 'block' : 'none')
     },
-    [MESSAGE_TO_INJECT_HIDE_TRANS]: async (params) => {
+    HIDE_TRANS: async (params) => {
       runtime.showTrans = false
       runtime.curTrans = undefined
 
@@ -330,7 +329,7 @@ const debug = (...args: any[]) => {
         text.style.display = 'none'
       }
     },
-    [MESSAGE_TO_INJECT_PLAY]: async (params) => {
+    PLAY: async (params) => {
       const { play } = params
       const video = getVideoElement()
       if (video != null) {
@@ -341,7 +340,7 @@ const debug = (...args: any[]) => {
         }
       }
     },
-    [MESSAGE_TO_INJECT_DOWNLOAD_AUDIO]: async (params) => {
+    DOWNLOAD_AUDIO: async (params) => {
       const html = document.getElementsByTagName('html')[0].innerHTML
       const playInfo = JSON.parse(html.match(/window.__playinfo__=(.+?)<\/script/)?.[1] ?? '{}')
       const audioUrl = playInfo.data.dash.audio[0].baseUrl

src/messaging/layer2/InjectMessaging.ts

@@ -59,7 +59,7 @@ class InjectMessaging {
     }
 
     init(methods: {
-        [key: string]: (params: any, context: MethodContext) => Promise<any>
+        [K in AllInjectMessages['method']]: (params: Extract<AllInjectMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
     }) {
         this.methods = methods
         this.port = chrome.runtime.connect(import.meta.env.VITE_EXTENSION_ID, {

src/messaging/layer2/useMessagingService.ts

@@ -17,7 +17,7 @@ export const msgWaiter = new Waiter<Layer1Protocol<L2ReqMsg, L2ResMsg>>(() => ({
 }), 100, 15000)
 
 const useMessagingService = (methods?: {
-  [key: string]: (params: any, context: MethodContext) => Promise<any>
+  [K in AllAPPMessages['method']]: (params: Extract<AllAPPMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
 }) => {
   const messageHandler = useCallback(async (req: L2ReqMsg): Promise<L2ResMsg> => {
     debug(`[${req.from}] ${req.method}`, JSON.stringify(req))
@@ -28,7 +28,7 @@ const useMessagingService = (methods?: {
     //   msg: 'Target Error: ' + req.target,
     // }
 
-    const method = methods?.[req.method]
+    const method = methods?.[req.method as keyof typeof methods]
     if (method != null) {
       return method(req.params, {
         from: req.from,

src/pages/OptionsPage.tsx

@@ -1,20 +1,17 @@
 import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
-import {setEnvData, setTempData} from '../redux/envReducer'
+import {setEnvData} from '../redux/envReducer'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {
   ASK_ENABLED_DEFAULT,
   CUSTOM_MODEL_TOKENS,
   DEFAULT_SERVER_URL_OPENAI,
   GEMINI_TOKENS,
-  HEADER_HEIGHT,
   LANGUAGE_DEFAULT,
   LANGUAGES,
-  MESSAGE_TO_EXTENSION_CLOSE_SIDE_PANEL,
   MODEL_DEFAULT,
   MODEL_MAP,
   MODEL_TIP,
   MODELS,
-  PAGE_MAIN,
   PROMPT_DEFAULTS,
   PROMPT_TYPES,
   SUMMARIZE_LANGUAGE_DEFAULT,