chore: release 1.11.2

完善
哔哔君
2024-10-07 18:59:16 +08:00 · 2024-10-07 18:56:39 +08:00 · 2024-10-07 18:15:20 +08:00 · 2024-10-07 09:43:38 +08:00 · 2024-10-07 09:36:48 +08:00 · 2024-10-06 19:55:04 +08:00
84 changed files with 6768 additions and 4510 deletions
--- a/.cursorrules
+++ b/.cursorrules
@@ -0,0 +1 @@
+This chrome extension project use typescript, react, vite, tailwindcss, daisyui.
--- a/.env.development
+++ b/.env.development
@@ -1 +1,3 @@
 VITE_ENV=web-dev
+
+VITE_EXTENSION_ID=nejipfbcnfhckfpmlgibfommbnahchko
--- a/.env.production_chrome
+++ b/.env.production_chrome
@@ -1,3 +1,4 @@
 NODE_ENV=production

 VITE_ENV=chrome
+VITE_EXTENSION_ID=bciglihaegkdhoogebcdblfhppoilclp
--- a/README.md
+++ b/README.md
@@ -19,20 +19,23 @@

 ## 下载扩展

-[chrome商店](https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp)
+- [chrome商店](https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp)
+- [edge商店](https://microsoftedge.microsoft.com/addons/detail/lignnlhlpiefmcjkdkmfjdckhlaiajan)
+- [firefox商店](https://addons.mozilla.org/zh-CN/firefox/addon/bilibili-subtitle)

 ## 使用说明

 安装扩展后，在哔哩哔哩网站观看视频时，视频右侧会显示字幕列表面板。

+### 使用本地Ollama模型
+如果你使用本地Ollama模型，需要配置环境变量：`OLLAMA_ORIGINS=chrome-extension://bciglihaegkdhoogebcdblfhppoilclp`，否则访问会出现403错误。
+
+然后在插件配置里，apiKey随便填一个，服务器地址填`http://localhost:11434`，模型选自定义，然后填入自定义模型名如`llama2`。
+
+但是测试发现llama2 7b模型比较弱，无法返回需要的json格式，因此总结很可能会无法解析响应而报错(但提问功能不需要解析响应格式，因此没问题)。
+
 ## 交流联系

-QQ群：194536885
-
-微信公众号：IndieKKY
-
-twitter：[https://twitter.com/IndieKky](https://twitter.com/IndieKky)
-
 github: [IndieKKY](https://github.com/IndieKKY)

 ## 问题反馈
@@ -43,8 +46,10 @@ github: [IndieKKY](https://github.com/IndieKKY)
 node版本：18.15.0
 包管理器：pnpm

-本地开发时，`pnpm run dev`可以开启本地调试，但只能调试部分功能；
-`pnpm run build_chrome`可以构建项目，然后浏览器扩展中加载`dist`目录即可,此方式可以调试完整功能，但不是很方便，从改代码到构建完看到效果耗时比较长（取决于你的电脑性能）。
+- 本地调试：`pnpm run dev`，然后加载`dist`目录。
+- 打生产包：`pnpm run build`，然后加载`dist`目录。
+
+注：`./push.sh`是作者自用脚本，可以忽略。

 ## 贡献指南

@@ -60,7 +65,3 @@ node版本：18.15.0
 ## 许可证

 该项目采用 **MIT 许可证**，详情请参阅许可证文件。
-
-## 截图
-
-![完整截图](./screenshot/完整截图.png)
--- a/fix.cjs
+++ b/fix.cjs
@@ -0,0 +1,8 @@
+console.log('fix.js loaded');
+
+const fs = require('fs')
+
+//copy index.html to sidepanel.html
+fs.copyFileSync('./dist/index.html', './dist/sidepanel.html')
+
+console.log('fix.js done');
--- a/fixChrome.cjs
+++ b/fixChrome.cjs
@@ -1,11 +0,0 @@
-console.log('fixChrome.js loaded');
-
-const fs = require('fs')
-
-const manifest = require('./dist/manifest.json')
-manifest.web_accessible_resources[0].resources.push('index.html')
-manifest.action.default_popup = 'popup.html'
-//写回文件
-fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2))
-
-console.log('fixChrome.js done');
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="zh" data-theme="light">
  <head>
-    <title>bilibili-subtitle - 哔哩哔哩字幕</title>
+    <title>哔哔君 - 哔哩哔哩字幕列表</title>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="icon" href="/favicon-128x128.png" sizes="128x128">
@@ -11,6 +11,6 @@
    <meta name="keywords" content="哔哩哔哩,b站,字幕" />
  </head>
  <body>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/Main.tsx"></script>
  </body>
 </html>
--- a/manifest.config.ts
+++ b/manifest.config.ts
@@ -0,0 +1,62 @@
+import {defineManifest} from '@crxjs/vite-plugin'
+// @ts-ignore
+import packageJson from './package.json'
+
+const {version} = packageJson
+
+// Convert from Semver (example: 0.1.0-beta6)
+const [major, minor, patch, label = '0'] = version
+  // can only contain digits, dots, or dash
+  .replace(/[^\d.-]+/g, '')
+  // split into version parts
+  .split(/[.-]/)
+
+export default defineManifest(async (env) => ({
+  "name": "哔哔君 - 哔哩哔哩字幕列表",
+  "description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
+  "version": `${major}.${minor}.${patch}`,
+  "manifest_version": 3,
+  "permissions": [
+    "sidePanel",
+    "storage",
+  ],
+  "host_permissions": [
+    "http://localhost/*",
+    "http://127.0.0.1/*"
+  ],
+  "background": {
+    "service_worker": "src/chrome/background.ts",
+    "type": "module"
+  },
+  "options_page": "options.html",
+  "content_scripts": [
+    {
+      "matches": ["https://*.bilibili.com/*"],
+      "js": ["src/inject/inject.ts"]
+    }
+  ],
+  "icons": {
+    "16": "favicon-16x16.png",
+    "32": "favicon-32x32.png",
+    "48": "favicon-48x48.png",
+    "128": "favicon-128x128.png"
+  },
+  "action": {
+    // "default_popup": "popup.html",
+    "default_icon": {
+      "16": "favicon-16x16.png",
+      "32": "favicon-32x32.png",
+      "48": "favicon-48x48.png",
+      "128": "favicon-128x128.png"
+    }
+  },
+  "web_accessible_resources": [
+    {
+      "matches": ["https://*.bilibili.com/*"],
+      "resources": [
+        "index.html",
+      ],
+      "use_dynamic_url": true
+    }
+  ]
+}))
--- a/manifest.json
+++ b/manifest.json
@@ -1,33 +0,0 @@
-{
-  "name": "哔哩哔哩字幕列表",
-  "description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
-  "version": "1.7.4",
-  "manifest_version": 3,
-  "permissions": [
-    "storage"
-  ],
-  "background": {
-    "service_worker": "src/chrome/background.ts"
-  },
-  "content_scripts": [
-    {
-      "matches": ["https://www.bilibili.com/video/*", "https://www.bilibili.com/list/*"],
-      "js": ["src/chrome/content-script.cjs"]
-    }
-  ],
-  "icons": {
-    "16": "favicon-16x16.png",
-    "32": "favicon-32x32.png",
-    "48": "favicon-48x48.png",
-    "128": "favicon-128x128.png"
-  },
-  "action": {
-    "default_popup": "index.html",
-    "default_icon": {
-      "16": "favicon-16x16.png",
-      "32": "favicon-32x32.png",
-      "48": "favicon-48x48.png",
-      "128": "favicon-128x128.png"
-    }
-  }
-}
--- a/options.html
+++ b/options.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+  <head>
+    <title>哔哔君 - 哔哩哔哩字幕列表选项</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <link rel="icon" href="/favicon-16x16.png" sizes="16x16">
+    <link rel="icon" href="/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" href="/favicon-64x64.png" sizes="64x64">
+    <link rel="icon" href="/favicon-128x128.png" sizes="128x128">
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <script type="module" src="/src/Main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -1,15 +1,14 @@
 {
  "private": true,
  "name": "bilibili-subtitle",
-  "version": "1.7.4",
+  "version": "1.11.2",
  "type": "module",
  "description": "哔哩哔哩字幕列表",
  "main": "index.js",
  "scripts": {
    "dev": "vite",
-    "build_chrome": "tsc && vite build -m production_chrome && pnpm run fixChrome",
-    "fix": "eslint --fix --quiet .",
-    "fixChrome": "node fixChrome.cjs"
+    "build": "tsc && vite build && node fix.cjs",
+    "fix": "eslint --fix --quiet ."
  },
  "author": "IndieKKY",
  "license": "MIT",
@@ -17,7 +16,7 @@
    "@crxjs/vite-plugin": "^1.0.14",
    "@kky002/kky-hooks": "^1.2.1",
    "@kky002/kky-ui": "^1.0.9",
-    "@kky002/kky-util": "^1.4.2",
+    "@kky002/kky-util": "^1.13.13",
    "@logto/react": "1.0.0-beta.13",
    "@popperjs/core": "^2.11.6",
    "@reduxjs/toolkit": "^1.8.5",
@@ -47,9 +46,10 @@
  "devDependencies": {
    "@tailwindcss/line-clamp": "^0.4.2",
    "@tailwindcss/typography": "^0.5.8",
-    "@types/chrome": "^0.0.203",
+    "@types/chrome": "^0.0.277",
    "@types/js-search": "^1.4.0",
    "@types/lodash-es": "^4.17.6",
+    "@types/node": "^20.8.10",
    "@types/pako": "^2.0.0",
    "@types/qs": "^6.9.7",
    "@types/react": "^18.0.20",
@@ -58,7 +58,7 @@
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
-    "@vitejs/plugin-react": "^2.1.0",
+    "@vitejs/plugin-react": "^2.2.0",
    "autoprefixer": "^10.4.13",
    "eslint": "8.22.0",
    "eslint-config-standard": "^17.0.0",
@@ -72,6 +72,6 @@
    "rollup-plugin-visualizer": "^5.8.3",
    "tailwindcss": "^3.2.4",
    "typescript": "^4.8.3",
-    "vite": "^3.1.1"
+    "vite": "^3.2.7"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/bibijun.png
+++ b/public/bibijun.png
--- a/public/favicon-128x128.png
+++ b/public/favicon-128x128.png
--- a/public/favicon-16x16.png
+++ b/public/favicon-16x16.png
--- a/public/favicon-32x32.png
+++ b/public/favicon-32x32.png
--- a/public/favicon-48x48.png
+++ b/public/favicon-48x48.png
--- a/public/favicon-64x64.png
+++ b/public/favicon-64x64.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/popup.html
+++ b/public/popup.html
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh" style="width: 500px;">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <body>
-    <img src="shot.jpg" style="width: 100%; object-fit: contain;"/>
-  </body>
-</html>
--- a/public/shot.jpg
+++ b/public/shot.jpg
--- a/public/subtitle.svg
+++ b/public/subtitle.svg
@@ -1,3 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1672795365953" class="icon" viewBox="0 0 1303 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2585"
-     width="254.4921875" height="200"><path d="M110.964364 1023.720727c-60.509091 0-109.847273-48.872727-109.847273-108.916363V109.009455C1.117091 48.965818 50.455273 0 110.964364 0h1081.902545c60.509091 0 109.847273 48.872727 109.847273 108.916364v805.794909c0 60.043636-49.338182 108.916364-109.847273 108.916363H110.964364z m0-927.650909c-6.609455 0-12.101818 5.771636-12.101819 12.939637v805.794909c0 7.168 5.492364 13.032727 12.101819 13.032727h1081.902545c6.609455 0 12.101818-5.864727 12.101818-13.032727V109.009455c0-7.168-5.492364-13.032727-12.101818-13.032728H110.964364z" fill="#00AEEC" p-id="2586"></path><path d="M1003.054545 520.098909a51.572364 51.572364 0 0 1-50.26909 52.689455h-80.058182a51.572364 51.572364 0 0 1-50.269091-52.689455c0-29.137455 22.434909-52.782545 50.269091-52.782545h80.058182c27.834182 0 50.269091 23.645091 50.26909 52.782545zM1096.610909 270.149818c0 28.858182-22.341818 52.410182-49.989818 52.410182H232.541091a51.293091 51.293091 0 0 1-50.082909-52.410182c0-29.044364 22.434909-52.503273 50.082909-52.503273h814.08c27.648 0 50.082909 23.458909 50.082909 52.503273zM768.744727 520.098909c0 28.858182-22.341818 52.410182-50.082909 52.410182H232.541091a51.293091 51.293091 0 0 1-50.082909-52.410182c0-29.044364 22.434909-52.503273 50.082909-52.503273H718.661818c27.648 0 50.082909 23.458909 50.082909 52.503273zM1096.610909 735.976727c0 29.044364-22.341818 52.503273-49.989818 52.503273H560.500364a51.293091 51.293091 0 0 1-50.082909-52.503273c0-28.951273 22.341818-52.410182 50.082909-52.410182h486.120727c27.648 0 50.082909 23.458909 50.082909 52.410182z" fill="#00AEEC" p-id="2587"></path></svg>
--- a/public/youtube-subtitle.png
+++ b/public/youtube-subtitle.png
--- a/push.sh
+++ b/push.sh
@@ -17,13 +17,11 @@ done

 # Update the version in package.json
 sed -i '' "s/\"version\": \"$current_version\"/\"version\": \"$new_version\"/g" package.json
-# Update the version in manifest.json
-sed -i '' "s/\"version\": \"$current_version\"/\"version\": \"$new_version\"/g" manifest.json

 echo "Version updated to: $new_version"

 # build
-pnpm run build_chrome
+pnpm run build
 # zip dist
 rm -f dist.zip
 cd dist
--- a/screenshot/列表视图.png
+++ b/screenshot/列表视图.png
--- a/screenshot/完整截图.png
+++ b/screenshot/完整截图.png
--- a/screenshot/总结.png
+++ b/screenshot/总结.png
--- a/screenshot/文章视图.png
+++ b/screenshot/文章视图.png
--- a/screenshot/翻译.png
+++ b/screenshot/翻译.png
--- a/sidepanel.html
+++ b/sidepanel.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="zh" data-theme="light">
+  <head>
+    <title>哔哔君 - 哔哩哔哩字幕列表</title>
+    <meta charset="UTF-8" />
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+    <link rel="icon" href="/favicon-128x128.png" sizes="128x128">
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="哔哩哔哩字幕" />
+    <meta name="keywords" content="哔哩哔哩,b站,字幕" />
+  </head>
+  <body>
+    <script type="module" src="/src/Main.tsx"></script>
+  </body>
+</html>
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,44 +1,23 @@
-import React, {useCallback, useContext, useEffect, useMemo} from 'react'
+import React, {useCallback, useEffect, useMemo} from 'react'
 import 'tippy.js/dist/tippy.css'
 import {useAppDispatch, useAppSelector} from './hooks/redux'
-import {setEnvData, setEnvReady, setFold, setPage, setTempData, setTempReady} from './redux/envReducer'
-import Header from './biz/Header'
-import Body from './biz/Body'
-import useSubtitleService from './hooks/useSubtitleService'
+import {setEnvData, setEnvReady, setTempData, setTempReady} from './redux/envReducer'
 import {cloneDeep} from 'lodash-es'
-import {EVENT_EXPAND, PAGE_MAIN, PAGE_SETTINGS, STORAGE_ENV, STORAGE_TEMP} from './const'
-import {EventBusContext} from './Router'
-import useTranslateService from './hooks/useTranslateService'
-import Settings from './biz/Settings'
-import classNames from 'classnames'
+import {STORAGE_ENV, STORAGE_TEMP} from './consts/const'
+import OptionsPage from './pages/OptionsPage'
 import {handleJson} from '@kky002/kky-util'
 import {useLocalStorage} from '@kky002/kky-hooks'
 import {Toaster} from 'react-hot-toast'
-import {setTheme} from './util/biz_util'
+import useMessagingService from './hooks/useMessageService'
+import MainPage from './pages/MainPage'

 function App() {
  const dispatch = useAppDispatch()
  const envData = useAppSelector(state => state.env.envData)
  const tempData = useAppSelector(state => state.env.tempData)
-  const fold = useAppSelector(state => state.env.fold)
-  const eventBus = useContext(EventBusContext)
-  const page = useAppSelector(state => state.env.page)
-  const totalHeight = useAppSelector(state => state.env.totalHeight)
-
-  const foldCallback = useCallback(() => {
-    dispatch(setFold(!fold))
-    dispatch(setPage(PAGE_MAIN))
-    window.parent.postMessage({type: 'fold', fold: !fold}, '*')
-  }, [dispatch, fold])
-
-  // handle event
-  eventBus.useSubscription((event: any) => {
-    if (event.type === EVENT_EXPAND) {
-      if (fold) {
-        foldCallback()
-      }
-    }
-  })
+  const path = useAppSelector(state => state.env.path)
+  const envReady = useAppSelector(state => state.env.envReady)
+  const tempReady = useAppSelector(state => state.env.tempReady)

  // env数据
  const savedEnvData = useMemo(() => {
@@ -64,22 +43,13 @@ function App() {
  }, [dispatch])
  useLocalStorage<TempData>('chrome_client', STORAGE_TEMP, savedTempData, onLoadTemp)

-  // theme改变时，设置主题
-  useEffect(() => {
-    setTheme(envData.theme)
-  }, [envData.theme])
-
  // services
-  useSubtitleService()
-  useTranslateService()
+  useMessagingService()

-  return <div className={classNames('select-none', import.meta.env.VITE_ENV === 'web-dev'?'w-[350px]':'w-full')} style={{
-    height: fold?undefined:`${totalHeight}px`,
-  }}>
-    <Header foldCallback={foldCallback}/>
-    {!fold && page === PAGE_MAIN && <Body/>}
-    {!fold && page === PAGE_SETTINGS && <Settings/>}
-    <Toaster position='bottom-center'/>
+  return <div>
+    <Toaster position={path === 'app'?'bottom-center':'top-center'}/>
+    {path === 'app' && <MainPage/>}
+    {path === 'options' && envReady && tempReady && <OptionsPage/>}
  </div>
 }

--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,15 +1,20 @@
 import App from './App'
 import {useEventEmitter} from 'ahooks'
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useAppDispatch } from './hooks/redux'
+import { setPath } from './redux/envReducer'

 export const EventBusContext = React.createContext<any>(null)

 const map: { [key: string]: string } = {
+  '/options.html': 'options',
+  '/sidepanel.html': 'app',
  // '/close': 'close',
 }

 const Router = () => {
  const path = map[window.location.pathname] ?? 'app'
+  const dispatch = useAppDispatch()

  if (path === 'close') {
    window.close()
@@ -18,8 +23,12 @@ const Router = () => {
  // 事件总线
  const eventBus = useEventEmitter()

+  useEffect(() => {
+    dispatch(setPath(path as 'app' | 'options'))
+  }, [dispatch, path])
+
  return <EventBusContext.Provider value={eventBus}>
-    {path === 'app' && <App/>}
+    {(path === 'app' || path === 'options') && <App/>}
  </EventBusContext.Provider>
 }

--- a/src/biz/Body.tsx
+++ b/src/biz/Body.tsx
@@ -1,191 +0,0 @@
-import React, {useCallback, useEffect, useRef} from 'react'
-import {
-  setAutoScroll,
-  setAutoTranslate,
-  setCheckAutoScroll,
-  setCompact,
-  setFoldAll,
-  setNeedScroll,
-  setPage,
-  setSegmentFold
-} from '../redux/envReducer'
-import {useAppDispatch, useAppSelector} from '../hooks/redux'
-import {AiOutlineAim, FaRegArrowAltCircleDown, IoWarning, MdExpand, RiFileCopy2Line, RiTranslate} from 'react-icons/all'
-import classNames from 'classnames'
-import toast from 'react-hot-toast'
-import SegmentCard from './SegmentCard'
-import {HEADER_HEIGHT, PAGE_SETTINGS, SUMMARIZE_ALL_THRESHOLD, SUMMARIZE_TYPES, TITLE_HEIGHT} from '../const'
-import {FaClipboardList} from 'react-icons/fa'
-import useTranslate from '../hooks/useTranslate'
-import {getSummarize} from '../util/biz_util'
-
-const Body = () => {
-  const dispatch = useAppDispatch()
-  const noVideo = useAppSelector(state => state.env.noVideo)
-  const autoTranslate = useAppSelector(state => state.env.autoTranslate)
-  const autoScroll = useAppSelector(state => state.env.autoScroll)
-  const segments = useAppSelector(state => state.env.segments)
-  const foldAll = useAppSelector(state => state.env.foldAll)
-  const envData = useAppSelector(state => state.env.envData)
-  const compact = useAppSelector(state => state.env.compact)
-  const apiKey = useAppSelector(state => state.env.envData.apiKey)
-  const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx)
-  const translateEnable = useAppSelector(state => state.env.envData.translateEnable)
-  const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
-  const {addSummarizeTask} = useTranslate()
-  const bodyRef = useRef<any>()
-  const curOffsetTop = useAppSelector(state => state.env.curOffsetTop)
-  const checkAutoScroll = useAppSelector(state => state.env.checkAutoScroll)
-  const needScroll = useAppSelector(state => state.env.needScroll)
-  const totalHeight = useAppSelector(state => state.env.totalHeight)
-  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
-  const title = useAppSelector(state => state.env.title)
-
-  const normalCallback = useCallback(() => {
-    dispatch(setCompact(false))
-  }, [dispatch])
-
-  const compactCallback = useCallback(() => {
-    dispatch(setCompact(true))
-  }, [dispatch])
-
-  const posCallback = useCallback(() => {
-    dispatch(setNeedScroll(true))
-  }, [dispatch])
-
-  const onSummarizeAll = useCallback(() => {
-    if (!apiKey) {
-      dispatch(setPage(PAGE_SETTINGS))
-      toast.error('需要先设置ApiKey!')
-      return
-    }
-    const segments_ = []
-    for (const segment of segments ?? []) {
-      const summary = segment.summaries[curSummaryType]
-      if (!summary || summary.status === 'init' || (summary.status === 'done' && summary.error)) {
-        segments_.push(segment)
-      }
-    }
-    if (segments_.length === 0) {
-      toast.error('没有可总结的段落!')
-      return
-    }
-    if (segments_.length < SUMMARIZE_ALL_THRESHOLD || confirm(`确定总结${segments_.length}个段落?`)) {
-      for (const segment of segments_) {
-        addSummarizeTask(curSummaryType, segment).catch(console.error)
-      }
-      toast.success(`已添加${segments_.length}个总结任务!`)
-    }
-  }, [addSummarizeTask, apiKey, curSummaryType, dispatch, segments])
-
-  const onFoldAll = useCallback(() => {
-    dispatch(setFoldAll(!foldAll))
-    for (const segment of segments ?? []) {
-      dispatch(setSegmentFold({
-        segmentStartIdx: segment.startIdx,
-        fold: !foldAll
-      }))
-    }
-  }, [dispatch, foldAll, segments])
-
-  const toggleAutoTranslateCallback = useCallback(() => {
-    if (envData.apiKey) {
-      dispatch(setAutoTranslate(!autoTranslate))
-    } else {
-      dispatch(setPage(PAGE_SETTINGS))
-      toast.error('需要先设置ApiKey!')
-    }
-  }, [autoTranslate, dispatch, envData.apiKey])
-
-  const onEnableAutoScroll = useCallback(() => {
-    dispatch(setAutoScroll(true))
-    dispatch(setNeedScroll(true))
-  }, [dispatch])
-
-  const onWheel = useCallback(() => {
-    if (autoScroll) {
-      dispatch(setAutoScroll(false))
-    }
-  }, [autoScroll, dispatch])
-
-  const onCopy = useCallback(() => {
-    const [success, content] = getSummarize(title, segments, curSummaryType)
-    if (success) {
-      navigator.clipboard.writeText(content).then(() => {
-        toast.success('复制成功')
-      }).catch(console.error)
-    }
-  }, [curSummaryType, segments, title])
-
-  // 自动滚动
-  useEffect(() => {
-    if (checkAutoScroll && curOffsetTop && autoScroll && !needScroll) {
-      if (bodyRef.current.scrollTop <= curOffsetTop - bodyRef.current.offsetTop - (totalHeight-120) + (floatKeyPointsSegIdx != null ? 100 : 0) ||
-        bodyRef.current.scrollTop >= curOffsetTop - bodyRef.current.offsetTop - 40 - 10
-      ) {
-        dispatch(setNeedScroll(true))
-        dispatch(setCheckAutoScroll(false))
-        console.debug('need scroll')
-      }
-    }
-  }, [autoScroll, checkAutoScroll, curOffsetTop, dispatch, floatKeyPointsSegIdx, needScroll, totalHeight])
-
-  return <div className='relative'>
-    <div className='absolute top-1 left-6 flex-center gap-1'>
-      <AiOutlineAim className='cursor-pointer' onClick={posCallback} title='滚动到视频位置'/>
-      {segments != null && segments.length > 0 &&
-        <MdExpand className={classNames('cursor-pointer', foldAll ? 'text-accent' : '')} onClick={onFoldAll}
-                  title='展开/折叠全部'/>}
-    </div>
-    <div className='flex justify-center'>
-      <div className='tabs'>
-        <a className={classNames('tab tab-sm tab-bordered', !compact && 'tab-active')}
-           onClick={normalCallback}>列表视图</a>
-        <a className={classNames('tab tab-sm tab-bordered', compact && 'tab-active')}
-           onClick={compactCallback}>文章视图</a>
-      </div>
-    </div>
-    <div className='absolute top-1 right-6'>
-      {translateEnable && <div className='tooltip tooltip-left cursor-pointer' data-tip='点击切换自动翻译'
-                               onClick={toggleAutoTranslateCallback}>
-        <RiTranslate className={autoTranslate ? 'text-accent' : ''}/>
-      </div>}
-      {summarizeEnable &&
-        <div className='tooltip tooltip-left cursor-pointer z-[100] ml-2' data-tip='总结全部' onClick={onSummarizeAll}>
-          <FaClipboardList/>
-        </div>}
-      {noVideo && <div className='tooltip tooltip-left ml-2' data-tip='当前浏览器不支持视频跳转'>
-        <IoWarning className='text-warning'/>
-      </div>}
-    </div>
-    {!autoScroll && <div
-      className='absolute z-[999] top-[96px] right-6 tooltip tooltip-left cursor-pointer rounded-full bg-primary/25 hover:bg-primary/75 text-primary-content p-1.5 text-xl'
-      data-tip='开启自动滚动'
-      onClick={onEnableAutoScroll}>
-      <FaRegArrowAltCircleDown className={autoScroll ? 'text-accent' : ''}/>
-    </div>}
-    <div ref={bodyRef} onWheel={onWheel}
-         className={classNames('flex flex-col gap-1.5 overflow-y-auto select-text scroll-smooth', floatKeyPointsSegIdx != null && 'pb-[100px]')}
-         style={{
-           height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT}px`
-         }}
-    >
-      {segments?.map((segment, segmentIdx) => <SegmentCard key={segment.startIdx} segment={segment} segmentIdx={segmentIdx} bodyRef={bodyRef}/>)}
-      <div className='flex flex-col items-center text-center pt-1 pb-2'>
-        <div className='font-semibold text-accent'>💡<span className='underline underline-offset-4'>提示</span>💡</div>
-        <div className='text-sm desc px-2'>可以尝试将<span className='text-amber-600 font-semibold'>概览</span>生成的内容粘贴到<span className='text-secondary/75 font-semibold'>视频评论</span>里，发布后看看有什么效果🥳</div>
-        {(segments?.length??0) > 0 && <button className='mt-1.5 btn btn-xs btn-info' onClick={onCopy}>点击复制生成的{SUMMARIZE_TYPES[curSummaryType].name}<RiFileCopy2Line/></button>}
-      </div>
-      <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
-        <div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-subtitle.png' alt='youtube subtitle' className='w-8 h-8'/>Youtube Subtitle</div>
-        <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>Youtube</span>版的字幕列表</div>
-        <div className='flex gap-2'>
-          <a title='Chrome商店' href='https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf' className='link text-sm text-accent'>Chrome商店</a>
-          <a title='Edge商店' href='https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc' className='link text-sm text-accent'>Edge商店</a>
-        </div>
-      </div>
-    </div>
-  </div>
-}
-
-export default Body
--- a/src/biz/Settings.tsx
+++ b/src/biz/Settings.tsx
@@ -1,311 +0,0 @@
-import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
-import {setEnvData, setPage} from '../redux/envReducer'
-import {useAppDispatch, useAppSelector} from '../hooks/redux'
-import {
-  HEADER_HEIGHT,
-  LANGUAGE_DEFAULT,
-  LANGUAGES,
-  MODEL_DEFAULT,
-  MODELS,
-  PAGE_MAIN,
-  PROMPT_DEFAULTS,
-  PROMPT_TYPES,
-  SERVER_URL_THIRD,
-  SUMMARIZE_LANGUAGE_DEFAULT,
-  TRANSLATE_FETCH_DEFAULT,
-  TRANSLATE_FETCH_MAX,
-  TRANSLATE_FETCH_MIN,
-  TRANSLATE_FETCH_STEP,
-  WORDS_DEFAULT,
-} from '../const'
-import {IoWarning} from 'react-icons/all'
-import classNames from 'classnames'
-import toast from 'react-hot-toast'
-import {useBoolean, useEventTarget} from 'ahooks'
-import {useEventChecked} from '@kky002/kky-hooks'
-
-const Section = (props: {
-  title: ShowElement
-  htmlFor?: string
-} & PropsWithChildren) => {
-  const {title, htmlFor, children} = props
-  return <div className='flex flex-col gap-1'>
-    <label className='font-medium desc-lighter text-xs' htmlFor={htmlFor}>{title}</label>
-    <div className='flex flex-col gap-1 rounded py-2 px-2 bg-base-200/75'>{children}</div>
-  </div>
-}
-
-const FormItem = (props: {
-  title: ShowElement
-  tip?: string
-  htmlFor?: string
-} & PropsWithChildren) => {
-  const {title, tip, htmlFor, children} = props
-  return <div className='flex items-center gap-2'>
-    <div className={classNames('basis-3/12 flex-center', tip && 'tooltip tooltip-right z-[100] underline underline-offset-2 decoration-dashed')} data-tip={tip}>
-      <label className='font-medium desc' htmlFor={htmlFor}>{title}</label>
-    </div>
-    <div className='basis-9/12 flex items-center'>
-      {children}
-    </div>
-  </div>
-}
-
-const Settings = () => {
-  const dispatch = useAppDispatch()
-  const envData = useAppSelector(state => state.env.envData)
-  const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
-  // const {value: autoScrollValue, onChange: setAutoScrollValue} = useEventChecked(envData.autoScroll)
-  const {value: translateEnableValue, onChange: setTranslateEnableValue} = useEventChecked(envData.translateEnable)
-  const {value: summarizeEnableValue, onChange: setSummarizeEnableValue} = useEventChecked(envData.summarizeEnable)
-  const {value: summarizeFloatValue, onChange: setSummarizeFloatValue} = useEventChecked(envData.summarizeFloat)
-  const [apiKeyValue, { onChange: onChangeApiKeyValue }] = useEventTarget({initialValue: envData.apiKey??''})
-  const [serverUrlValue, setServerUrlValue] = useState(envData.serverUrl)
-  const [languageValue, { onChange: onChangeLanguageValue }] = useEventTarget({initialValue: envData.language??LANGUAGE_DEFAULT})
-  const [modelValue, { onChange: onChangeModelValue }] = useEventTarget({initialValue: envData.model??MODEL_DEFAULT})
-  const [summarizeLanguageValue, { onChange: onChangeSummarizeLanguageValue }] = useEventTarget({initialValue: envData.summarizeLanguage??SUMMARIZE_LANGUAGE_DEFAULT})
-  const [hideOnDisableAutoTranslateValue, setHideOnDisableAutoTranslateValue] = useState(envData.hideOnDisableAutoTranslate)
-  const [themeValue, setThemeValue] = useState(envData.theme)
-  const [fontSizeValue, setFontSizeValue] = useState(envData.fontSize)
-  const [transDisplayValue, setTransDisplayValue] = useState(envData.transDisplay)
-  const [wordsValue, setWordsValue] = useState<number | undefined>(envData.words??WORDS_DEFAULT)
-  const [fetchAmountValue, setFetchAmountValue] = useState(envData.fetchAmount??TRANSLATE_FETCH_DEFAULT)
-  const [moreFold, {toggle: toggleMoreFold}] = useBoolean(true)
-  const [promptsFold, {toggle: togglePromptsFold}] = useBoolean(true)
-  const fold = useAppSelector(state => state.env.fold)
-  const totalHeight = useAppSelector(state => state.env.totalHeight)
-  const [promptsValue, setPromptsValue] = useState<{[key: string]: string}>(envData.prompts??{})
-  // const wordsList = useMemo(() => {
-  //   const list = []
-  //   for (let i = WORDS_MIN; i <= WORDS_MAX; i += WORDS_STEP) {
-  //     list.push(i)
-  //   }
-  //   return list
-  // }, [])
-  const transFetchAmountList = useMemo(() => {
-    const list = []
-    for (let i = TRANSLATE_FETCH_MIN; i <= TRANSLATE_FETCH_MAX; i += TRANSLATE_FETCH_STEP) {
-      list.push(i)
-    }
-    return list
-  }, [])
-
-  const onChangeHideOnDisableAutoTranslate = useCallback((e: any) => {
-    setHideOnDisableAutoTranslateValue(e.target.checked)
-  }, [])
-
-  const onSave = useCallback(() => {
-    dispatch(setEnvData({
-      autoExpand: autoExpandValue,
-      apiKey: apiKeyValue,
-      serverUrl: serverUrlValue,
-      model: modelValue,
-      translateEnable: translateEnableValue,
-      language: languageValue,
-      hideOnDisableAutoTranslate: hideOnDisableAutoTranslateValue,
-      theme: themeValue,
-      transDisplay: transDisplayValue,
-      summarizeEnable: summarizeEnableValue,
-      summarizeFloat: summarizeFloatValue,
-      summarizeLanguage: summarizeLanguageValue,
-      words: wordsValue,
-      fetchAmount: fetchAmountValue,
-      fontSize: fontSizeValue,
-      prompts: promptsValue,
-    }))
-    dispatch(setPage(PAGE_MAIN))
-    toast.success('保存成功')
-  }, [modelValue, promptsValue, fontSizeValue, apiKeyValue, autoExpandValue, dispatch, fetchAmountValue, hideOnDisableAutoTranslateValue, languageValue, serverUrlValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, themeValue, transDisplayValue, translateEnableValue, wordsValue])
-
-  const onCancel = useCallback(() => {
-    dispatch(setPage(PAGE_MAIN))
-  }, [dispatch])
-
-  const onFetchAmountChange = useCallback((e: any) => {
-    setFetchAmountValue(parseInt(e.target.value))
-  }, [])
-
-  const onWordsChange = useCallback((e: any) => {
-    setWordsValue(parseInt(e.target.value))
-  }, [])
-
-  const onSel1 = useCallback(() => {
-    setTransDisplayValue('originPrimary')
-  }, [])
-
-  const onSel2 = useCallback(() => {
-    setTransDisplayValue('targetPrimary')
-  }, [])
-
-  const onSel3 = useCallback(() => {
-    setTransDisplayValue('target')
-  }, [])
-
-  const onSelTheme1 = useCallback(() => {
-    setThemeValue('system')
-  }, [])
-
-  const onSelTheme2 = useCallback(() => {
-    setThemeValue('light')
-  }, [])
-
-  const onSelTheme3 = useCallback(() => {
-    setThemeValue('dark')
-  }, [])
-
-  const onSelFontSize1 = useCallback(() => {
-    setFontSizeValue('normal')
-  }, [])
-
-  const onSelFontSize2 = useCallback(() => {
-    setFontSizeValue('large')
-  }, [])
-
-  return <div className='text-sm overflow-y-auto' style={{
-    height: fold?undefined:`${totalHeight-HEADER_HEIGHT}px`,
-  }}>
-    <div className="flex flex-col gap-3 p-2">
-      <Section title='通用配置'>
-        <FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'>
-          <input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue}
-                 onChange={setAutoExpandValue}/>
-        </FormItem>
-        <FormItem title='主题'>
-          <div className="btn-group">
-            <button onClick={onSelTheme1} className={classNames('btn btn-xs no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}>系统</button>
-            <button onClick={onSelTheme2} className={classNames('btn btn-xs no-animation', themeValue === 'light'?'btn-active':'')}>浅色</button>
-            <button onClick={onSelTheme3} className={classNames('btn btn-xs no-animation', themeValue === 'dark'?'btn-active':'')}>深色</button>
-          </div>
-        </FormItem>
-        <FormItem title='字体大小'>
-          <div className="btn-group">
-            <button onClick={onSelFontSize1} className={classNames('btn btn-xs no-animation', (!fontSizeValue || fontSizeValue === 'normal')?'btn-active':'')}>普通</button>
-            <button onClick={onSelFontSize2} className={classNames('btn btn-xs no-animation', fontSizeValue === 'large'?'btn-active':'')}>加大</button>
-          </div>
-        </FormItem>
-      </Section>
-      <Section title='openai配置'>
-        <FormItem title='ApiKey' htmlFor='apiKey'>
-          <input id='apiKey' type='text' className='input input-sm input-bordered w-full' placeholder='sk-xxx' value={apiKeyValue} onChange={onChangeApiKeyValue}/>
-        </FormItem>
-        <FormItem title='服务器' htmlFor='serverUrl'>
-          <input id='serverUrl' type='text' className='input input-sm input-bordered w-full' placeholder='服务器地址,默认使用官方地址' value={serverUrlValue} onChange={e => setServerUrlValue(e.target.value)}/>
-        </FormItem>
-        <div className='flex justify-center'>
-          <a className='link text-xs' onClick={toggleMoreFold}>{moreFold?'点击查看说明':'点击折叠说明'}</a>
-        </div>
-        {!moreFold && <div>
-          <ul className='pl-3 list-decimal desc text-xs'>
-            <li>官方服务器需要科学上网才能访问</li>
-            <li>官方网址：<a className='link' href='https://platform.openai.com/' target='_blank' rel="noreferrer">openai.com</a></li>
-            <li>支持官方代理(使用官方ApiKey)：<a className='link' onClick={() => setServerUrlValue(SERVER_URL_THIRD)} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://api2d.com/' target='_blank' rel="noreferrer">api2d</a> | <a className='link' onClick={() => setServerUrlValue('https://openai.api2d.net')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://openaimax.com/' target='_blank' rel="noreferrer">OpenAI-Max</a> | <a className='link' onClick={() => setServerUrlValue('https://api.openaimax.com')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://openai-sb.com/' target='_blank' rel="noreferrer">OpenAI-SB</a> | <a className='link' onClick={() => setServerUrlValue('https://api.openai-sb.com')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://www.ohmygpt.com/' target='_blank' rel="noreferrer">OhMyGPT</a> | <a className='link' onClick={() => setServerUrlValue('https://api.ohmygpt.com')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://aiproxy.io/' target='_blank' rel="noreferrer">AIProxy</a> | <a className='link' onClick={() => setServerUrlValue('https://api.aiproxy.io')} rel='noreferrer'>点击设置</a></li>
-            <li>支持代理(配合ApiKey)：<a className='link' href='https://key-rental.bowen.cool/' target='_blank' rel="noreferrer">Key Rental</a> | <a className='link' onClick={() => setServerUrlValue('https://key-rental-api.bowen.cool/openai')} rel='noreferrer'>点击设置</a></li>
-            <li>支持其他第三方代理，有问题可加群交流</li>
-          </ul>
-        </div>}
-        <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格'>
-          <select id='modelSel' className="select select-sm select-bordered" value={modelValue} onChange={onChangeModelValue}>
-            {MODELS.map(model => <option key={model.code} value={model.code}>{model.name}</option>)}
-          </select>
-        </FormItem>
-        <div className='flex justify-center'>
-          <a className='link text-xs' onClick={togglePromptsFold}>{promptsFold?'点击查看提示词':'点击折叠提示词'}</a>
-        </div>
-        {!promptsFold && <div>
-          {PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
-            <div>{item.name}</div>
-            <div className='link text-xs' onClick={() => {
-              setPromptsValue({
-                ...promptsValue,
-                // @ts-expect-error
-                [item.type]: PROMPT_DEFAULTS[item.type]??''
-              })
-            }}>点击填充默认</div>
-          </div>} htmlFor={`prompt-${item.type}`}>
-            <textarea id={`prompt-${item.type}`} className='mt-2 textarea input-bordered w-full' placeholder='留空使用默认提示词' value={promptsValue[item.type]??''} onChange={(e) => {
-              setPromptsValue({
-                ...promptsValue,
-                [item.type]: e.target.value
-              })
-            }}/>
-          </FormItem>)}
-        </div>}
-      </Section>
-      <Section title={<div className='flex items-center'>
-        翻译配置
-        {!apiKeyValue && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
-          <IoWarning className='text-sm text-warning'/>
-        </div>}
-      </div>}>
-        <FormItem title='启用翻译' htmlFor='translateEnable'>
-          <input id='translateEnable' type='checkbox' className='toggle toggle-primary' checked={translateEnableValue}
-                 onChange={setTranslateEnableValue}/>
-        </FormItem>
-        <FormItem title='目标语言' htmlFor='language'>
-          <select id='language' className="select select-sm select-bordered" value={languageValue} onChange={onChangeLanguageValue}>
-            {LANGUAGES.map(language => <option key={language.code} value={language.code}>{language.name}</option>)}
-          </select>
-        </FormItem>
-        <FormItem title='翻译条数' tip='每次翻译条数'>
-          <div className='flex-1 flex flex-col'>
-            <input type="range" min={TRANSLATE_FETCH_MIN} max={TRANSLATE_FETCH_MAX} step={TRANSLATE_FETCH_STEP} value={fetchAmountValue} className="range range-primary" onChange={onFetchAmountChange} />
-            <div className="w-full flex justify-between text-xs px-2">
-              {transFetchAmountList.map(amount => <span key={amount}>{amount}</span>)}
-            </div>
-          </div>
-        </FormItem>
-        <FormItem title='翻译显示'>
-          <div className="btn-group">
-            <button onClick={onSel1} className={classNames('btn btn-xs no-animation', (!transDisplayValue || transDisplayValue === 'originPrimary')?'btn-active':'')}>原文为主</button>
-            <button onClick={onSel2} className={classNames('btn btn-xs no-animation', transDisplayValue === 'targetPrimary'?'btn-active':'')}>翻译为主</button>
-            <button onClick={onSel3} className={classNames('btn btn-xs no-animation', transDisplayValue === 'target'?'btn-active':'')}>仅翻译</button>
-          </div>
-        </FormItem>
-        <FormItem title='隐藏翻译' tip='取消自动翻译时,隐藏已翻译内容' htmlFor='hideOnDisableAutoTranslate'>
-          <input id='hideOnDisableAutoTranslate' type='checkbox' className='toggle toggle-primary' checked={hideOnDisableAutoTranslateValue}
-                 onChange={onChangeHideOnDisableAutoTranslate}/>
-        </FormItem>
-      </Section>
-      <Section title={<div className='flex items-center'>
-        总结配置
-        {!apiKeyValue && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
-          <IoWarning className='text-sm text-warning'/>
-        </div>}
-      </div>}>
-        <FormItem title='启用总结' htmlFor='summarizeEnable'>
-          <input id='summarizeEnable' type='checkbox' className='toggle toggle-primary' checked={summarizeEnableValue}
-                 onChange={setSummarizeEnableValue}/>
-        </FormItem>
-        <FormItem title='浮动窗口' htmlFor='summarizeFloat' tip='当前总结离开视野时,是否显示浮动窗口'>
-          <input id='summarizeFloat' type='checkbox' className='toggle toggle-primary' checked={summarizeFloatValue}
-                 onChange={setSummarizeFloatValue}/>
-        </FormItem>
-        <FormItem title='总结语言' htmlFor='summarizeLanguage'>
-          <select id='summarizeLanguage' className="select select-sm select-bordered" value={summarizeLanguageValue} onChange={onChangeSummarizeLanguageValue}>
-            {LANGUAGES.map(language => <option key={language.code} value={language.code}>{language.name}</option>)}
-          </select>
-        </FormItem>
-        <FormItem htmlFor='words' title='分段字数' tip='注意，不同模型有不同字数限制'>
-          <div className='flex-1 flex flex-col'>
-            <input id='words' type='number' className='input input-sm input-bordered w-full' placeholder='默认2000' value={wordsValue} onChange={e => setWordsValue(e.target.value?parseInt(e.target.value):undefined)}/>
-            {/* <input type="range" min={WORDS_MIN} max={WORDS_MAX} step={WORDS_STEP} value={wordsValue} className="range range-primary" onChange={onWordsChange} /> */}
-            {/* <div className="w-full flex justify-between text-xs px-2"> */}
-            {/*  {wordsList.map(words => <span key={words}>{words}</span>)} */}
-            {/* </div> */}
-          </div>
-        </FormItem>
-      </Section>
-      <div className='flex justify-center gap-5'>
-        <button className='btn btn-primary btn-sm' onClick={onSave}>保存</button>
-        <button className='btn btn-sm' onClick={onCancel}>取消</button>
-      </div>
-    </div>
-  </div>
-}
-
-export default Settings
--- a/src/chrome/background.ts
+++ b/src/chrome/background.ts
@@ -1,59 +1,62 @@
 import {v4} from 'uuid'
 import {handleTask, initTaskService, tasksMap} from './taskService'
+import { STORAGE_ENV} from '@/consts/const'
+import ExtensionMessaging from '@/messaging/layer2/ExtensionMessaging'
+import { TAG_TARGET_INJECT } from '@/messaging/const'

-/**
- * 消息处理入口
- * 注意：需要异步sendResponse时返回true
- */
-chrome.runtime.onMessage.addListener((event, sender, sendResponse) => {
-  console.debug('收到请求: ', event)
-  if (event.type === 'p') { // 发出http请求
-    const {url, options} = event
-    // 发出请求
-    fetch('http://localhost:27081/oproxy/p', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        url,
-        options,
-      }),
-    }).then(async res => await res.json()).then(sendResponse).catch(console.error)
-    return true
-  } else if (event.type === 'syncGet') { // sync.get
-    chrome.storage.sync.get(event.keys, data => {
-      sendResponse(data)
-    })
-    return true
-  } else if (event.type === 'syncSet') { // sync.set
-    chrome.storage.sync.set(event.items).catch(console.error)
-  } else if (event.type === 'syncRemove') { // sync.remove
-    chrome.storage.sync.remove(event.keys).catch(console.error)
-  } else if (event.type === 'addTask') {
+const setBadgeOk = async (tabId: number, ok: boolean) => {
+  await chrome.action.setBadgeText({
+    text: ok ? '✓' : '',
+    tabId,
+  })
+  await chrome.action.setBadgeBackgroundColor({
+    color: '#3245e8',
+    tabId,
+  })
+  await chrome.action.setBadgeTextColor({
+    color: '#ffffff',
+    tabId,
+  })
+}
+
+const closeSidePanel = async () => {
+  chrome.sidePanel.setOptions({
+    enabled: false,
+  })
+  chrome.sidePanel.setPanelBehavior({
+    openPanelOnActionClick: false,
+  })
+}
+
+const methods: {
+  [K in AllExtensionMessages['method']]: (params: Extract<AllExtensionMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
+} = {
+  CLOSE_SIDE_PANEL: async (params, context) => {
+    closeSidePanel()
+  },
+  ADD_TASK: async (params, context) => {
    // 新建任务
    const task: Task = {
      id: v4(),
      startTime: Date.now(),
      status: 'pending',
-      def: event.taskDef,
+      def: params.taskDef,
    }
    tasksMap.set(task.id, task)

    // 立即触发任务
    handleTask(task).catch(console.error)

+    return task
+  },
+  GET_TASK: async (params, context) => {
    // 返回任务信息
-    sendResponse(task)
-  } else if (event.type === 'getTask') {
-    // 返回任务信息
-    const taskId = event.taskId
+    const taskId = params.taskId
    const task = tasksMap.get(taskId)
    if (task == null) {
-      sendResponse({
+      return {
        code: 'not_found',
-      })
-      return
+      }
    }

    // 检测删除缓存
@@ -62,11 +65,59 @@ chrome.runtime.onMessage.addListener((event, sender, sendResponse) => {
    }

    // 返回任务
-    sendResponse({
+    return {
      code: 'ok',
      task,
+    }
+  },
+  SHOW_FLAG: async (params, context) => {
+    await setBadgeOk(context.tabId!, params.show)
+  },
+}
+// 初始化backgroundMessage
+const extensionMessaging = new ExtensionMessaging()
+extensionMessaging.init(methods)
+
+chrome.runtime.onMessage.addListener((event: any, sender: chrome.runtime.MessageSender, sendResponse: (result: any) => void) => {
+  // debug((sender.tab != null) ? `tab ${sender.tab.url ?? ''} => ` : 'extension => ', event)
+
+  // legacy
+  if (event.type === 'syncGet') { // sync.get
+    chrome.storage.sync.get(event.keys, data => {
+      sendResponse(data)
    })
+    return true
+  } else if (event.type === 'syncSet') { // sync.set
+    chrome.storage.sync.set(event.items).catch(console.error)
+    return
+  } else if (event.type === 'syncRemove') { // sync.remove
+    chrome.storage.sync.remove(event.keys).catch(console.error)
+    return
  }
 })

+//点击扩展图标
+chrome.action.onClicked.addListener(async (tab) => {
+  chrome.storage.sync.get(STORAGE_ENV, (envDatas) => {
+    const envDataStr = envDatas[STORAGE_ENV]
+    const envData = envDataStr ? JSON.parse(envDataStr) : {}
+    if (envData.sidePanel) {
+      chrome.sidePanel.setOptions({
+        enabled: true,
+        tabId: tab.id!,
+        path: '/sidepanel.html?tabId=' + tab.id,
+      })
+      chrome.sidePanel.setPanelBehavior({
+        openPanelOnActionClick: true,
+      })
+      chrome.sidePanel.open({
+        tabId: tab.id!,
+      })
+    } else {
+      closeSidePanel()
+      extensionMessaging.broadcastMessageExact([tab.id!], [TAG_TARGET_INJECT], 'TOGGLE_DISPLAY').catch(console.error)
+    }
+  })
+})
+
 initTaskService()
--- a/src/chrome/content-script.cjs
+++ b/src/chrome/content-script.cjs
@@ -1,252 +0,0 @@
-const {TOTAL_HEIGHT_DEF, HEADER_HEIGHT, TOTAL_HEIGHT_MIN, TOTAL_HEIGHT_MAX, IFRAME_ID} = require("../const");
-var totalHeight = TOTAL_HEIGHT_DEF
-
-const getVideoElement = () => {
-  const videoWrapper = document.getElementById('bilibili-player')
-  return videoWrapper.querySelector('video')
-}
-
-const timerIframe = setInterval(function () {
-  var danmukuBox = document.getElementById('danmukuBox')
-  if (danmukuBox) {
-    clearInterval(timerIframe)
-
-    //延迟插入iframe（插入太快，网络较差时容易出现b站网页刷新，原因暂时未知，可能b站的某种机制？）
-    setTimeout(() => {
-      var vKey = ''
-      for (const key in danmukuBox?.dataset) {
-        if (key.startsWith('v-')) {
-          vKey = key
-          break
-        }
-      }
-
-      const iframe = document.createElement('iframe')
-      iframe.id = IFRAME_ID
-      iframe.src = chrome.runtime.getURL('index.html')
-      iframe.style = 'border: none; width: 100%; height: 44px;'
-      iframe.allow = 'clipboard-read; clipboard-write;'
-      if (vKey) {
-        iframe.dataset[vKey] = danmukuBox?.dataset[vKey]
-      }
-      //insert before first child
-      danmukuBox?.insertBefore(iframe, danmukuBox?.firstChild)
-
-      console.debug('iframe inserted')
-    }, 1500)
-  }
-}, 1000)
-
-let aid = 0
-let title = ''
-let pages = []
-let pagesMap = {}
-
-let lastAidOrBvid = null
-const refreshVideoInfo = async () => {
-  const iframe = document.getElementById(IFRAME_ID)
-  if (!iframe) return
-
-  // fix: https://github.com/IndieKKY/bilibili-subtitle/issues/5
-  // 处理稍后再看的url( https://www.bilibili.com/list/watchlater?bvid=xxx&oid=xxx )
-  const pathSearchs = {}
-  location.search.slice(1).replace(/([^=&]*)=([^=&]*)/g, (matchs, a, b, c) => pathSearchs[a] = b)
-
-  // bvid
-  let aidOrBvid = pathSearchs.bvid // 默认为稍后再看
-  if (!aidOrBvid) {
-    let path = location.pathname
-    if (path.endsWith('/')) {
-      path = path.slice(0, -1)
-    }
-    const paths = path.split('/')
-    aidOrBvid = paths[paths.length - 1]
-  }
-
-  if (aidOrBvid !== lastAidOrBvid) {
-    // console.debug('refreshVideoInfo')
-
-    lastAidOrBvid = aidOrBvid
-    if (aidOrBvid) {
-      //aid,pages
-      let cid
-      let subtitles
-      if (aidOrBvid.toLowerCase().startsWith('av')) {//avxxx
-        aid = aidOrBvid.slice(2)
-        pages = await fetch(`https://api.bilibili.com/x/player/pagelist?aid=${aid}`, {credentials: 'include'}).then(res => res.json()).then(res => res.data)
-        cid = pages[0].cid
-        title = pages[0].part
-        await fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, {credentials: 'include'}).then(res => res.json()).then(res => {
-          subtitles = res.data.subtitle.subtitles
-        })
-      } else {//bvxxx
-        await fetch(`https://api.bilibili.com/x/web-interface/view?bvid=${aidOrBvid}`, {credentials: 'include'}).then(res => res.json()).then(async res => {
-          title = res.data.title
-          aid = res.data.aid
-          cid = res.data.cid
-          pages = res.data.pages
-        })
-        await fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, {credentials: 'include'}).then(res => res.json()).then(res => {
-          subtitles = res.data.subtitle.subtitles
-        })
-      }
-
-      //pagesMap
-      pagesMap = {}
-      pages.forEach(page => {
-        pagesMap[page.page + ''] = page
-      })
-
-      console.debug('refreshVideoInfo: ', aid, cid, pages, subtitles)
-
-      //send setVideoInfo
-      iframe.contentWindow.postMessage({
-        type: 'setVideoInfo',
-        title,
-        aid,
-        pages,
-        infos: subtitles,
-      }, '*')
-    }
-  }
-}
-
-let lastAid = null
-let lastCid = null
-const refreshSubtitles = () => {
-  const iframe = document.getElementById(IFRAME_ID)
-  if (!iframe) return
-
-  const urlSearchParams = new URLSearchParams(window.location.search)
-  const p = urlSearchParams.get('p') || 1
-  const page = pagesMap[p]
-  if (!page) return
-  const cid = page.cid
-
-  if (aid !== lastAid || cid !== lastCid) {
-    console.debug('refreshSubtitles', aid, cid)
-
-    lastAid = aid
-    lastCid = cid
-    if (aid && cid) {
-      fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, {
-        credentials: 'include',
-      })
-        .then(res => res.json())
-        .then(res => {
-          // console.log('refreshSubtitles: ', aid, cid, res)
-          iframe.contentWindow.postMessage({
-            type: 'setInfos',
-            infos: res.data.subtitle.subtitles
-          }, '*')
-        })
-    }
-  }
-}
-
-// 监听消息
-window.addEventListener("message", (event) => {
-  const {data} = event
-
-  if (data.type === 'fold') {
-    const iframe = document.getElementById(IFRAME_ID)
-    iframe.style.height = (data.fold ? HEADER_HEIGHT : totalHeight) + 'px'
-  }
-
-  if (data.type === 'move') {
-    const video = getVideoElement()
-    if (video) {
-      video.currentTime = data.time
-    }
-  }
-
-  //刷新视频信息
-  if (data.type === 'refreshVideoInfo') {
-    refreshVideoInfo().catch(console.error)
-  }
-  //刷新字幕
-  if (data.type === 'refreshSubtitles') {
-    refreshSubtitles()
-  }
-  if (data.type === 'getSubtitle') {
-    let url = data.info.subtitle_url
-    if (url.startsWith('http://')) {
-      url = url.replace('http://', 'https://')
-    }
-    fetch(url).then(res => res.json()).then(res => {
-      event.source.postMessage({
-        data: {
-          info: data.info,
-          data: res,
-        }, type: 'setSubtitle'
-      }, '*')
-    })
-  }
-
-  if (data.type === 'getCurrentTime') {
-    const video = getVideoElement()
-    if (video) {
-      event.source.postMessage({
-        data: {
-          currentTime: video.currentTime
-        }, type: 'setCurrentTime'
-      }, '*')
-    }
-  }
-
-  if (data.type === 'getSettings') {
-    const videoElement = getVideoElement()
-    totalHeight = videoElement ? Math.min(Math.max(videoElement.offsetHeight, TOTAL_HEIGHT_MIN), TOTAL_HEIGHT_MAX) : TOTAL_HEIGHT_DEF
-    event.source.postMessage({
-      data: {
-        noVideo: !videoElement,
-        totalHeight,
-      }, type: 'setSettings'
-    }, '*')
-  }
-
-  if (data.type === 'downloadAudio') {
-    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
-
-    fetch(audioUrl).then(res => res.blob()).then(blob => {
-      const a = document.createElement('a')
-      a.href = URL.createObjectURL(blob)
-      a.download = `${title}.m4s`
-      a.click()
-    })
-  }
-
-  if (data.type === 'updateTransResult') {
-    const trans = data.result??''
-    let text = document.getElementById('trans-result-text')
-    if (text) {
-      text.innerHTML = trans
-    } else {
-      const container = document.getElementsByClassName('bpx-player-subtitle-panel-wrap')?.[0]
-      if (container) {
-        const div = document.createElement('div')
-        div.style.display = 'flex'
-        div.style.justifyContent = 'center'
-        div.style.margin = '2px'
-        text = document.createElement('text')
-        text.id = 'trans-result-text'
-        text.innerHTML = trans
-        text.style.fontSize = '1rem'
-        text.style.padding = '5px'
-        text.style.color = 'white'
-        text.style.background = 'rgba(0, 0, 0, 0.4)'
-        div.append(text)
-
-        container.append(div)
-      }
-    }
-    text && (text.style.display = trans ? 'block' : 'none')
-  }
-}, false);
-
-setInterval(() => {
-  refreshVideoInfo().catch(console.error)
-  refreshSubtitles()
-}, 1000)
--- a/src/chrome/openaiService.ts
+++ b/src/chrome/openaiService.ts
@@ -1,4 +1,14 @@
-import {getServerUrl} from '../util/biz_util'
+import {DEFAULT_SERVER_URL_OPENAI} from '../consts/const'
+
+const getServerUrl = (serverUrl?: string) => {
+  if (!serverUrl) {
+    return DEFAULT_SERVER_URL_OPENAI
+  }
+  if (serverUrl.endsWith('/')) {
+    serverUrl = serverUrl.slice(0, -1)
+  }
+  return serverUrl
+}

 export const handleChatCompleteTask = async (task: Task) => {
  const data = task.def.data
@@ -18,3 +28,16 @@ export const handleChatCompleteTask = async (task: Task) => {
    throw new Error(`${task.resp.error.code as string??''} ${task.resp.error.message as string ??''}`)
  }
 }
+
+export const handleGeminiChatCompleteTask = async (task: Task) => {
+  const data = task.def.data
+  const resp = await fetch('https://generativelanguage.googleapis.com/v1/models/gemini-pro:generateContent', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'x-goog-api-key': task.def.extra.geminiApiKey,
+    },
+    body: JSON.stringify(data),
+  })
+  task.resp = await resp.json()
+}
--- a/src/chrome/taskService.ts
+++ b/src/chrome/taskService.ts
@@ -1,5 +1,5 @@
-import {TASK_EXPIRE_TIME} from '../const'
-import {handleChatCompleteTask} from './openaiService'
+import {TASK_EXPIRE_TIME} from '../consts/const'
+import {handleChatCompleteTask, handleGeminiChatCompleteTask} from './openaiService'

 export const tasksMap = new Map<string, Task>()

@@ -11,6 +11,9 @@ export const handleTask = async (task: Task) => {
      case 'chatComplete':
        await handleChatCompleteTask(task)
        break
+      case 'geminiChatComplete':
+        await handleGeminiChatCompleteTask(task)
+        break
      default:
        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
        throw new Error(`任务类型不支持: ${task.def.type}`)
--- a/src/components/ApiKeyReminder.tsx
+++ b/src/components/ApiKeyReminder.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useAppSelector } from '../hooks/redux';
+import { openOptionsPage } from '../utils/chromeUtils';
+
+const ApiKeyReminder: React.FC = () => {
+  const apiKey = useAppSelector(state => state.env.envData.apiKey);
+  const geminiApiKey = useAppSelector(state => state.env.envData.geminiApiKey);
+  const aiType = useAppSelector(state => state.env.envData.aiType);
+
+  if ((aiType === 'gemini' && geminiApiKey) || (aiType !== 'gemini' && apiKey)) {
+    return null;
+  }
+
+  return (
+    <div className="flex items-center justify-between p-2 bg-yellow-100 text-yellow-800 text-sm rounded-md">
+      <span>请先设置API密钥以使用总结及翻译功能</span>
+      <button
+        className="px-2 py-1 bg-yellow-200 hover:bg-yellow-300 rounded text-xs font-medium transition-colors"
+        onClick={openOptionsPage}
+      >
+        设置 →
+      </button>
+    </div>
+  );
+};
+
+export default ApiKeyReminder;
--- a/src/components/Ask.tsx
+++ b/src/components/Ask.tsx
@@ -0,0 +1,70 @@
+import {AiOutlineCloseCircle, BsDashSquare, BsPlusSquare, FaQuestion} from 'react-icons/all'
+import classNames from 'classnames'
+import Markdown from '../components/Markdown'
+import React, {useCallback} from 'react'
+import {delAskInfo, mergeAskInfo, setTempData} from '../redux/envReducer'
+import {useAppDispatch, useAppSelector} from '../hooks/redux'
+import toast from 'react-hot-toast'
+import useTranslate from '../hooks/useTranslate'
+
+const Ask = (props: {
+  ask: AskInfo
+}) => {
+  const {ask} = props
+  const dispatch = useAppDispatch()
+  const envData = useAppSelector(state => state.env.envData)
+  const fontSize = useAppSelector(state => state.env.envData.fontSize)
+  const segments = useAppSelector(state => state.env.segments)
+  const {addAskTask} = useTranslate()
+
+  const onRegenerate = useCallback(() => {
+    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
+    if (apiKey) {
+      if (segments != null && segments.length > 0) {
+        addAskTask(ask.id, segments[0], ask.question).catch(console.error)
+      }
+    } else {
+      toast.error('请先在选项页面设置ApiKey!')
+    }
+  }, [addAskTask, ask.id, ask.question, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
+
+  const onAskFold = useCallback(() => {
+    dispatch(mergeAskInfo({
+      id: ask.id,
+      fold: !ask.fold
+    }))
+  }, [ask, dispatch])
+
+  const onClose = useCallback(() => {
+    dispatch(delAskInfo(ask.id))
+  }, [ask, dispatch])
+
+  return <div className='shadow bg-base-200 my-0.5 mx-1.5 p-1.5 rounded flex flex-col justify-center items-center'>
+    <div className='w-full relative flex justify-center min-h-[20px]'>
+      <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>
+        {ask.fold
+          ? <BsPlusSquare className='cursor-pointer' onClick={onAskFold}/> :
+          <BsDashSquare className='cursor-pointer' onClick={onAskFold}/>}
+      </div>
+      <button className='absolute right-0 top-0 bottom-0 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClose}>
+        <AiOutlineCloseCircle/>
+      </button>
+      <div className="tabs">
+        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
+        <a className='tab tab-lifted tab-xs tab-active'><FaQuestion/>提问</a>
+        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
+      </div>
+    </div>
+    {!ask.fold && ask.question && <div className='text-sm font-medium max-w-[90%]'>{ask.question}</div>}
+    {!ask.fold && ask.content &&
+      <div className={classNames('font-medium max-w-[90%] mt-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
+        <Markdown content={ask.content}/>
+      </div>}
+    {!ask.fold && <button disabled={ask.status !== 'done'}
+                         className={classNames('btn btn-link btn-xs', ask.status === 'pending' && 'loading')}
+                         onClick={onRegenerate}>{ask.status === 'pending' ? '生成中' : '重新生成'}</button>}
+    {!ask.fold && ask.error && <div className='text-xs text-error'>{ask.error}</div>}
+  </div>
+}
+
+export default Ask
--- a/src/components/Body.tsx
+++ b/src/components/Body.tsx
@@ -0,0 +1,418 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import {
+  addAskInfo,
+  mergeAskInfo,
+  setAutoScroll,
+  setAutoTranslate,
+  setCheckAutoScroll,
+  setFoldAll,
+  setNeedScroll,
+  setSearchText,
+  setSegmentFold,
+  setTempData
+} from '../redux/envReducer'
+import { useAppDispatch, useAppSelector } from '../hooks/redux'
+import {
+  AiOutlineAim,
+  AiOutlineCloseCircle,
+  FaRegArrowAltCircleDown,
+  IoWarning,
+  MdExpand,
+  RiTranslate
+} from 'react-icons/all'
+import classNames from 'classnames'
+import toast from 'react-hot-toast'
+import SegmentCard from './SegmentCard'
+import {
+  ASK_ENABLED_DEFAULT,
+  HEADER_HEIGHT,
+  PAGE_SETTINGS,
+  SEARCH_BAR_HEIGHT,
+  SUMMARIZE_ALL_THRESHOLD,
+  TITLE_HEIGHT
+} from '../consts/const'
+import { FaClipboardList } from 'react-icons/fa'
+import useTranslate from '../hooks/useTranslate'
+import { openUrl } from '@kky002/kky-util'
+import useKeyService from '../hooks/useKeyService'
+import Ask from './Ask'
+import { v4 } from 'uuid'
+import RateExtension from '../components/RateExtension'
+import ApiKeyReminder from './ApiKeyReminder'
+
+const Body = () => {
+  const dispatch = useAppDispatch()
+  const inputting = useAppSelector(state => state.env.inputting)
+  const noVideo = useAppSelector(state => state.env.noVideo)
+  const autoTranslate = useAppSelector(state => state.env.autoTranslate)
+  const autoScroll = useAppSelector(state => state.env.autoScroll)
+  const segments = useAppSelector(state => state.env.segments)
+  const foldAll = useAppSelector(state => state.env.foldAll)
+  const envData = useAppSelector(state => state.env.envData)
+  const compact = useAppSelector(state => state.env.tempData.compact)
+  const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx)
+  const translateEnable = useAppSelector(state => state.env.envData.translateEnable)
+  const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
+  const { addSummarizeTask, addAskTask } = useTranslate()
+  // const infos = useAppSelector(state => state.env.infos)
+  const bodyRef = useRef<any>()
+  const curOffsetTop = useAppSelector(state => state.env.curOffsetTop)
+  const checkAutoScroll = useAppSelector(state => state.env.checkAutoScroll)
+  const needScroll = useAppSelector(state => state.env.needScroll)
+  const totalHeight = useAppSelector(state => state.env.totalHeight)
+  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
+  // const title = useAppSelector(state => state.env.title)
+  // const fontSize = useAppSelector(state => state.env.envData.fontSize)
+  const searchText = useAppSelector(state => state.env.searchText)
+  const asks = useAppSelector(state => state.env.asks)
+  // const recommendIdx = useMemo(() => random(0, 3), [])
+  const showSearchInput = useMemo(() => {
+    return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
+  }, [envData.askEnabled, envData.searchEnabled, segments])
+  const searchPlaceholder = useMemo(() => {
+    let placeholder = ''
+    if (envData.searchEnabled) {
+      if (envData.askEnabled ?? ASK_ENABLED_DEFAULT) {
+        placeholder = '搜索或提问字幕内容(按Enter提问)'
+      } else {
+        placeholder = '搜索字幕内容'
+      }
+    } else {
+      if (envData.askEnabled ?? ASK_ENABLED_DEFAULT) {
+        placeholder = '提问字幕内容'
+      }
+    }
+    return placeholder
+  }, [envData.askEnabled, envData.searchEnabled])
+
+  const normalCallback = useCallback(() => {
+    dispatch(setTempData({
+      compact: false
+    }))
+  }, [dispatch])
+
+  const compactCallback = useCallback(() => {
+    dispatch(setTempData({
+      compact: true
+    }))
+  }, [dispatch])
+
+  const posCallback = useCallback(() => {
+    dispatch(setNeedScroll(true))
+  }, [dispatch])
+
+  const onSummarizeAll = useCallback(() => {
+    const apiKey = envData.aiType === 'gemini' ? envData.geminiApiKey : envData.apiKey
+    if (!apiKey) {
+      toast.error('请先在选项页面设置ApiKey!')
+      return
+    }
+    const segments_ = []
+    for (const segment of segments ?? []) {
+      const summary = segment.summaries[curSummaryType]
+      if (!summary || summary.status === 'init' || (summary.status === 'done' && summary.error)) {
+        segments_.push(segment)
+      }
+    }
+    if (segments_.length === 0) {
+      toast.error('没有可总结的段落!')
+      return
+    }
+    if (segments_.length < SUMMARIZE_ALL_THRESHOLD || confirm(`确定总结${segments_.length}个段落?`)) {
+      for (const segment of segments_) {
+        addSummarizeTask(curSummaryType, segment).catch(console.error)
+      }
+      toast.success(`已添加${segments_.length}个总结任务!`)
+    }
+  }, [addSummarizeTask, curSummaryType, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey, segments])
+
+  const onFoldAll = useCallback(() => {
+    dispatch(setFoldAll(!foldAll))
+    for (const ask of asks) {
+      dispatch(mergeAskInfo({
+        id: ask.id,
+        fold: !foldAll
+      }))
+    }
+    for (const segment of segments ?? []) {
+      dispatch(setSegmentFold({
+        segmentStartIdx: segment.startIdx,
+        fold: !foldAll
+      }))
+    }
+  }, [asks, dispatch, foldAll, segments])
+
+  const toggleAutoTranslateCallback = useCallback(() => {
+    const apiKey = envData.aiType === 'gemini' ? envData.geminiApiKey : envData.apiKey
+    if (apiKey) {
+      dispatch(setAutoTranslate(!autoTranslate))
+    } else {
+      toast.error('请先在选项页面设置ApiKey!')
+    }
+  }, [autoTranslate, dispatch, envData.aiType, envData.apiKey, envData.geminiApiKey])
+
+  const onEnableAutoScroll = useCallback(() => {
+    dispatch(setAutoScroll(true))
+    dispatch(setNeedScroll(true))
+  }, [dispatch])
+
+  const onWheel = useCallback(() => {
+    if (autoScroll) {
+      dispatch(setAutoScroll(false))
+    }
+  }, [autoScroll, dispatch])
+
+  // const onCopy = useCallback(() => {
+  //   const [success, content] = getSummarize(title, segments, curSummaryType)
+  //   if (success) {
+  //     navigator.clipboard.writeText(content).then(() => {
+  //       toast.success('复制成功')
+  //     }).catch(console.error)
+  //   }
+  // }, [curSummaryType, segments, title])
+
+  const onSearchTextChange = useCallback((e: any) => {
+    const searchText = e.target.value
+    dispatch(setSearchText(searchText))
+  }, [dispatch])
+
+  const onClearSearchText = useCallback(() => {
+    dispatch(setSearchText(''))
+  }, [dispatch])
+
+  const onAsk = useCallback(() => {
+    if ((envData.askEnabled ?? ASK_ENABLED_DEFAULT) && searchText) {
+      const apiKey = envData.aiType === 'gemini' ? envData.geminiApiKey : envData.apiKey
+      if (apiKey) {
+        if (segments != null && segments.length > 0) {
+          const id = v4()
+          addAskTask(id, segments[0], searchText).catch(console.error)
+          // 添加ask
+          dispatch(addAskInfo({
+            id,
+            question: searchText,
+            status: 'pending',
+          }))
+        }
+      } else {
+        toast.error('请先在选项页面设置ApiKey!')
+      }
+    }
+  }, [addAskTask, dispatch, envData.aiType, envData.apiKey, envData.askEnabled, envData.geminiApiKey, searchText, segments])
+
+  // service
+  useKeyService()
+
+  // 自动滚动
+  useEffect(() => {
+    if (checkAutoScroll && curOffsetTop && autoScroll && !needScroll) {
+      if (bodyRef.current.scrollTop <= curOffsetTop - bodyRef.current.offsetTop - (totalHeight - 160) + (floatKeyPointsSegIdx != null ? 100 : 0) ||
+        bodyRef.current.scrollTop >= curOffsetTop - bodyRef.current.offsetTop - 40 - 10
+      ) {
+        dispatch(setNeedScroll(true))
+        dispatch(setCheckAutoScroll(false))
+        console.debug('need scroll')
+      }
+    }
+  }, [autoScroll, checkAutoScroll, curOffsetTop, dispatch, floatKeyPointsSegIdx, needScroll, totalHeight])
+
+  return <div className='relative'>
+    {/* title */}
+    <div className='absolute top-1 left-6 flex-center gap-1'>
+      <AiOutlineAim className='cursor-pointer' onClick={posCallback} title='滚动到视频位置' />
+      {segments != null && segments.length > 0 &&
+        <MdExpand className={classNames('cursor-pointer', foldAll ? 'text-accent' : '')} onClick={onFoldAll}
+          title='展开/折叠全部' />}
+    </div>
+    <div className='flex justify-center'>
+      <div className='tabs'>
+        <a className={classNames('tab tab-sm tab-bordered', !compact && 'tab-active')}
+          onClick={normalCallback}>列表视图</a>
+        <a className={classNames('tab tab-sm tab-bordered', compact && 'tab-active')}
+          onClick={compactCallback}>文章视图</a>
+      </div>
+    </div>
+    <div className='absolute top-1 right-6'>
+      {translateEnable && <div className='tooltip tooltip-left cursor-pointer' data-tip='点击切换自动翻译'
+        onClick={toggleAutoTranslateCallback}>
+        <RiTranslate className={autoTranslate ? 'text-accent' : ''} />
+      </div>}
+      {summarizeEnable &&
+        <div className='tooltip tooltip-left cursor-pointer z-[100] ml-2' data-tip='总结全部' onClick={onSummarizeAll}>
+          <FaClipboardList />
+        </div>}
+      {noVideo && <div className='tooltip tooltip-left ml-2' data-tip='当前浏览器不支持视频跳转'>
+        <IoWarning className='text-warning' />
+      </div>}
+    </div>
+
+    {/* search */}
+    {showSearchInput && <div className='px-2 py-1 flex flex-col relative'>
+      <input type='text' className='input input-xs bg-base-200' placeholder={searchPlaceholder} value={searchText} onChange={onSearchTextChange} onKeyDown={e => {
+        // enter
+        if (e.key === 'Enter') {
+          if (!inputting) {
+            e.preventDefault()
+            e.stopPropagation()
+            onAsk()
+            dispatch(setSearchText(''))
+          }
+        }
+      }} />
+      {searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle /></button>}
+    </div>}
+
+    {/* auto scroll btn */}
+    {!autoScroll && <div
+      className='absolute z-[999] top-[96px] right-6 tooltip tooltip-left cursor-pointer rounded-full bg-primary/25 hover:bg-primary/75 text-primary-content p-1.5 text-xl'
+      data-tip='开启自动滚动'
+      onClick={onEnableAutoScroll}>
+      <FaRegArrowAltCircleDown className={autoScroll ? 'text-accent' : ''} />
+    </div>}
+
+    {/* body */}
+    <div ref={bodyRef} onWheel={onWheel}
+      className={classNames('flex flex-col gap-1.5 overflow-y-auto select-text scroll-smooth', floatKeyPointsSegIdx != null && 'pb-[100px]')}
+      style={{
+        height: `${totalHeight - HEADER_HEIGHT - TITLE_HEIGHT - (showSearchInput ? SEARCH_BAR_HEIGHT : 0)}px`
+      }}
+    >
+      {/* asks */}
+      {asks.map(ask => <Ask key={ask.id} ask={ask} />)}
+
+      {/* segments */}
+      {segments?.map((segment, segmentIdx) => <SegmentCard key={segment.startIdx} segment={segment}
+        segmentIdx={segmentIdx} bodyRef={bodyRef} />)}
+
+      {/* tip */}
+      <div className='text-sm font-semibold text-center'>快捷键提示</div>
+      <ul className='list-disc text-sm desc pl-5'>
+        <li>单击字幕跳转，双击字幕跳转+切换暂停。</li>
+        <li>alt+单击字幕复制单条字幕。</li>
+        <li>上下方向键来移动当前字幕(可先点击字幕使焦点在字幕列表内)。</li>
+      </ul>
+
+      <ApiKeyReminder />
+
+      {/* <div className='flex flex-col items-center text-center pt-1 pb-2'> */}
+      {/*  <div className='font-semibold text-accent'>💡<span className='underline underline-offset-4'>提示</span>💡</div> */}
+      {/*  <div className='text-sm desc px-2'>可以尝试将<span className='text-amber-600 font-semibold'>概览</span>生成的内容粘贴到<span */}
+      {/*    className='text-secondary/75 font-semibold'>视频评论</span>里，发布后看看有什么效果🥳 */}
+      {/*  </div> */}
+      {/*  {(segments?.length ?? 0) > 0 && <button className='mt-1.5 btn btn-xs btn-info' */}
+      {/*                                          onClick={onCopy}>点击复制生成的{SUMMARIZE_TYPES[curSummaryType].name}<RiFileCopy2Line/> */}
+      {/*  </button>} */}
+      {/* </div> */}
+      <div className='flex flex-col'>
+        {/* <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'> */}
+        {/*  <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png' */}
+        {/*                                                                          alt='BibiGPT logo' */}
+        {/*                                                                          className='w-8 h-8'/>BibiGPT */}
+        {/*  </div> */}
+        {/*  <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span */}
+        {/*    className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频） */}
+        {/*  </div> */}
+        {/*  <div className='flex gap-2'> */}
+        {/*    <a title='BibiGPT' href='https://bibigpt.co/r/bilibili' */}
+        {/*       onClick={(e) => { */}
+        {/*         e.preventDefault() */}
+        {/*         openUrl('https://bibigpt.co/r/bilibili') */}
+        {/*       }} className='link text-sm text-accent'>✨ BibiGPT ✨</a> */}
+        {/*  </div> */}
+        {/* </div> */}
+        <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'>
+          <div className='font-semibold text-accent flex items-center gap-1'><img src='/youtube-caption.png'
+            alt='youtube caption logo'
+            className='w-8 h-8' />YouTube Caption
+          </div>
+          <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>YouTube</span>版的字幕列表
+          </div>
+          <div className='flex gap-2'>
+            <a title='Chrome商店' href='https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf'
+              onClick={(e) => {
+                e.preventDefault()
+                openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
+              }} className='link text-sm text-accent'>Chrome商店</a>
+            <a title='Edge商店'
+              href='https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc'
+              onClick={e => {
+                e.preventDefault()
+                openUrl('https://microsoftedge.microsoft.com/addons/detail/galeejdehabppfgooagmkclpppnbccpc')
+              }} className='link text-sm text-accent'>Edge商店</a>
+            <a title='Crx搜搜(国内可访问)'
+              href='https://www.crxsoso.com/webstore/detail/fiaeclpicddpifeflpmlgmbjgaedladf'
+              onClick={(e) => {
+                e.preventDefault()
+                openUrl('https://www.crxsoso.com/webstore/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
+              }} className='link text-sm text-accent'>Crx搜搜(国内可访问)</a>
+          </div>
+        </div>
+        {/* <div className='flex flex-col items-center text-center py-2 mx-4 border-t border-t-base-300'> */}
+        {/*  <div className='font-semibold text-accent flex items-center gap-1'><img src='/my-article-summarizer.png' */}
+        {/*                                                                          alt='My Article Summarizer logo' */}
+        {/*                                                                          className='w-8 h-8'/>My Article Summarizer */}
+        {/*  </div> */}
+        {/*  <div className='text-sm px-2 desc'>网页文章总结（有每日免费额度，无需apikey）。</div> */}
+        {/*  <div className='flex gap-2'> */}
+        {/*    <a title='Chrome商店' href='https://chromewebstore.google.com/detail/my-article-summarizer/nanlpakfialleijdidafldapoifndngn' */}
+        {/*       onClick={(e) => { */}
+        {/*         e.preventDefault() */}
+        {/*         openUrl('https://chromewebstore.google.com/detail/my-article-summarizer/nanlpakfialleijdidafldapoifndngn') */}
+        {/*       }} className='link text-sm text-accent'>Chrome商店</a> */}
+        {/*    <a title='Crx搜搜(国内可访问)' */}
+        {/*       href='https://www.crxsoso.com/webstore/detail/nanlpakfialleijdidafldapoifndngn' */}
+        {/*       onClick={(e) => { */}
+        {/*         e.preventDefault() */}
+        {/*         openUrl('https://www.crxsoso.com/webstore/detail/nanlpakfialleijdidafldapoifndngn') */}
+        {/*       }} className='link text-sm text-accent'>Crx搜搜(国内可访问)</a> */}
+        {/*  </div> */}
+        {/* </div> */}
+      </div>
+      <div className='p-2'><RateExtension /></div>
+    </div>
+    {/* recommend */}
+    {/* <div className='p-0.5' style={{ */}
+    {/*  height: `${RECOMMEND_HEIGHT}px` */}
+    {/* }}> */}
+    {/*  {recommendIdx === 0 && <div className='flex items-center gap-1.5 rounded shadow-sm bg-base-200/10'> */}
+    {/*    <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
+    {/*      e.preventDefault() */}
+    {/*      openUrl('https://bibigpt.co/r/bilibili') */}
+    {/*    }}><img src='/bibigpt.png' */}
+    {/*            alt='BibiGPT logo' */}
+    {/*            className='w-8 h-8'/>✨ BibiGPT ✨</a> */}
+    {/*    <span className='text-sm desc'>支持任意视频的网页版总结。</span> */}
+    {/*  </div>} */}
+    {/*  {recommendIdx === 1 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
+    {/*    <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
+    {/*      e.preventDefault() */}
+    {/*      openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf') */}
+    {/*    }}><img src='/youtube-caption.png' */}
+    {/*            alt='youtube caption logo' */}
+    {/*            className='w-8 h-8'/>YouTube Caption</a> */}
+    {/*    <span className='text-sm desc'>YouTube版的字幕列表。</span> */}
+    {/*  </div>} */}
+    {/*  {recommendIdx === 2 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
+    {/*    <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
+    {/*      e.preventDefault() */}
+    {/*      openUrl('https://chromewebstore.google.com/detail/nanlpakfialleijdidafldapoifndngn') */}
+    {/*    }}><img src='/my-article-summarizer.png' */}
+    {/*            alt='My Article Summarizer logo' */}
+    {/*            className='w-8 h-8'/>My Article Summarizer</a> */}
+    {/*    <span className='text-sm desc'>网页文章总结。</span> */}
+    {/*  </div>} */}
+    {/*  {recommendIdx === 3 && <div className='flex items-center gap-1 rounded shadow-sm bg-base-200/10'> */}
+    {/*    <a className='link link-accent link-hover font-semibold text-sm flex items-center' onClick={(e) => { */}
+    {/*      e.preventDefault() */}
+    {/*      openUrl('https://api.openai-up.com/register?aff=varM') */}
+    {/*    }}><img src='/openai-up.ico' */}
+    {/*            alt='Openai Up logo' */}
+    {/*            className='w-8 h-8'/>Openai代理</a> */}
+    {/*    <span className='text-sm desc flex items-center'>目前价格不到官方的6折<FaGripfire */}
+    {/*      className='text-amber-600'/></span> */}
+    {/*  </div>} */}
+    {/* </div> */}
+  </div>
+}
+
+export default Body
--- a/src/components/CompactSegmentItem.tsx
+++ b/src/components/CompactSegmentItem.tsx
@@ -1,20 +1,17 @@
 import React, {useMemo} from 'react'
 import {useAppSelector} from '../hooks/redux'
-import {getDisplay, getTransText} from '../util/biz_util'
+import {getDisplay, getTransText} from '../utils/bizUtil'
 import classNames from 'classnames'

 const CompactSegmentItem = (props: {
-  item: {
-    from: number
-    to: number
-    content: string
-  }
+  item: TranscriptItem
  idx: number
  isIn: boolean
  last: boolean
  moveCallback: (event: any) => void
+  move2Callback: (event: any) => void
 }) => {
-  const {item, idx, last, isIn, moveCallback} = props
+  const {item, idx, last, isIn, moveCallback, move2Callback} = props
  const transResult = useAppSelector(state => state.env.transResults[idx])
  const envData = useAppSelector(state => state.env.envData)
  const fontSize = useAppSelector(state => state.env.envData.fontSize)
@@ -23,10 +20,10 @@ const CompactSegmentItem = (props: {
  const display = useMemo(() => getDisplay(envData.transDisplay, item.content, transText), [envData.transDisplay, item.content, transText])

  return <div className={classNames('inline', fontSize === 'large'?'text-sm':'text-xs')}>
-    <span className={'pl-1 pr-0.5 py-0.5 cursor-pointer rounded-sm hover:bg-base-200'} onClick={moveCallback}>
+    <span className={'pl-1 pr-0.5 py-0.5 cursor-pointer rounded-sm hover:bg-base-200'} onClick={moveCallback} onDoubleClick={move2Callback}>
      <text className={classNames('font-medium', isIn ? 'text-primary underline' : '')}>{display.main}</text>
      {display.sub && <text className='desc'>({display.sub})</text>}</span>
-    <span>{!last && ', '}</span>
+    <span className='text-base-content/75'>{!last && ','}</span>
  </div>
 }

--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,7 +5,7 @@ import {find, remove} from 'lodash-es'
 import {setCurFetched, setCurInfo, setData, setInfos, setUploadedTranscript} from '../redux/envReducer'
 import MoreBtn from './MoreBtn'
 import classNames from 'classnames'
-import {parseTranscript} from '../util/biz_util'
+import {parseTranscript} from '../utils/bizUtil'

 const Header = (props: {
  foldCallback: () => void
@@ -16,6 +16,7 @@ const Header = (props: {
  const curInfo = useAppSelector(state => state.env.curInfo)
  const fold = useAppSelector(state => state.env.fold)
  const uploadedTranscript = useAppSelector(state => state.env.uploadedTranscript)
+  const envData = useAppSelector(state => state.env.envData)

  const upload = useCallback(() => {
    const input = document.createElement('input')
@@ -76,9 +77,14 @@ const Header = (props: {
    upload()
  }, [upload])

-  return <div className='rounded-[6px] bg-[#f1f2f3] dark:bg-base-100 h-[44px] flex justify-between items-center cursor-pointer' onClick={foldCallback}>
+  return <div className='rounded-[6px] bg-[#f1f2f3] dark:bg-base-100 h-[44px] flex justify-between items-center cursor-pointer' onClick={() => {
+    if (!envData.sidePanel) {
+      foldCallback()
+    }
+  }}>
    <div className='shrink-0 flex items-center'>
-      <span className='shrink-0 text-[15px] font-medium pl-[16px] pr-[14px]'>字幕列表</span>
+      <img src="bibijun.png" alt="Logo" className="w-auto h-6 ml-2 mr-1" />
+      {/* <span className='shrink-0 text-[15px] font-medium pl-1 pr-[14px]'>字幕列表</span> */}
      <MoreBtn placement={'right-start'}/>
    </div>
    <div className='flex gap-0.5 items-center mr-[16px]'>
@@ -91,7 +97,7 @@ const Header = (props: {
          {infos?.map((item: any) => <option key={item.id} value={item.subtitle_url}>{item.lan_doc}</option>)}
          <option key='upload' value='upload'>上传(vtt/srt)</option>
        </select>}
-      <IoIosArrowUp className={classNames('shrink-0 desc transform ease-in duration-300', fold?'rotate-180':'')}/>
+      {!envData.sidePanel && <IoIosArrowUp className={classNames('shrink-0 desc transform ease-in duration-300', fold?'rotate-180':'')}/>}
    </div>
  </div>
 }
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -0,0 +1,46 @@
+import classNames from 'classnames'
+import ReactMarkdown from 'react-markdown'
+import toast from 'react-hot-toast'
+
+function CopyBtn(props: {
+  content: string
+}) {
+  const {content} = props
+  return <div className='flex justify-center mt-1'>
+    <button className="btn btn-xs px-10 btn-primary normal-case" onClick={() => {
+      navigator.clipboard.writeText(content).then(() => {
+        toast.success('Copied!')
+      }).catch(console.error)
+    }}>Copy
+    </button>
+  </div>
+}
+
+function Markdown(props: {
+  content: string
+  codeBlockClass?: string
+}) {
+  const {content, codeBlockClass} = props
+
+  return <ReactMarkdown
+    className='markdown prose prose-sm dark:prose-invert prose-h1:text-center prose-h1:font-bold prose-h1:underline-offset-4 overflow-y-auto scrollbar-hide'
+    linkTarget={'_blank'}
+    components={{
+      code({node, inline, className, children, ...props}) {
+        if (inline) {
+          return <code
+            className={classNames(className, 'md-inline-block kbd kbd-xs rounded text-base-content/80')} {...props}>
+            {children}
+          </code>
+        } else {
+          return <code className={classNames(className, 'relative', codeBlockClass)} {...props}>
+            {children}
+            {className?.includes('language-copy') && <CopyBtn content={children[0] as string}/>}
+          </code>
+        }
+      }
+    }}
+  >{content}</ReactMarkdown>
+}
+
+export default Markdown
--- a/src/components/MoreBtn.tsx
+++ b/src/components/MoreBtn.tsx
@@ -11,14 +11,14 @@ import {
 import Popover from '../components/Popover'
 import {Placement} from '@popperjs/core/lib/enums'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
-import {setDownloadType, setEnvData, setPage} from '../redux/envReducer'
+import {setEnvData, setTempData} from '../redux/envReducer'
 import {EventBusContext} from '../Router'
-import {EVENT_EXPAND, PAGE_SETTINGS} from '../const'
-import {formatSrtTime, formatTime, formatVttTime} from '../util/util'
+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'
-import {getSummarize} from '../util/biz_util'
-
+import {getSummarize} from '../utils/bizUtil'
+import { useMessage } from '@/hooks/message'
 interface Props {
  placement: Placement
 }
@@ -62,38 +62,42 @@ const MoreBtn = (props: Props) => {
  const data = useAppSelector(state => state.env.data)
  const envReady = useAppSelector(state => state.env.envReady)
  const envData = useAppSelector(state => state.env.envData)
-  const downloadType = useAppSelector(state => state.env.downloadType)
+  const downloadType = useAppSelector(state => state.env.tempData.downloadType)
  const [moreVisible, setMoreVisible] = useState(false)
  const eventBus = useContext(EventBusContext)
  const segments = useAppSelector(state => state.env.segments)
+  const url = useAppSelector(state => state.env.url)
  const title = useAppSelector(state => state.env.title)
  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)

+  const {sendInject} = useMessage()
+
  const downloadCallback = useCallback((download: boolean) => {
    if (data == null) {
      return
    }

-    let s, fileName
+    let fileName = title
+    let s, suffix
    if (!downloadType || downloadType === 'text') {
-      s = ''
+      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
      for (const item of data.body) {
        s += item.content + '\n'
      }
-      fileName = 'download.txt'
+      suffix = 'txt'
    } else if (downloadType === 'textWithTime') {
-      s = ''
+      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
      for (const item of data.body) {
        s += formatTime(item.from) + ' ' + item.content + '\n'
      }
-      fileName = 'download.txt'
+      suffix = 'txt'
    } else if (downloadType === 'article') {
-      s = ''
+      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
      for (const item of data.body) {
        s += item.content + ', '
      }
      s = s.substring(0, s.length - 1) // remove last ','
-      fileName = 'download.txt'
+      suffix = 'txt'
    } else if (downloadType === 'srt') {
      /**
       * 1
@@ -112,7 +116,7 @@ const MoreBtn = (props: Props) => {
        s += ss
      }
      s = s.substring(0, s.length - 1)// remove last '\n'
-      fileName = 'download.srt'
+      suffix = 'srt'
    } else if (downloadType === 'vtt') {
      /**
       * WEBVTT title
@@ -133,36 +137,38 @@ const MoreBtn = (props: Props) => {
        s += ss
      }
      s = s.substring(0, s.length - 1)// remove last '\n'
-      fileName = 'download.vtt'
+      suffix = 'vtt'
    } else if (downloadType === 'json') {
      s = JSON.stringify(data)
-      fileName = 'download.json'
+      suffix = 'json'
    } else if (downloadType === 'summarize') {
+      s = `${title??'无标题'}\n${url??'无链接'}\n\n`
      const [success, content] = getSummarize(title, segments, curSummaryType)
      if (!success) return
-      s = content
-      fileName = '总结.txt'
+      s += content
+      fileName += ' - 总结'
+      suffix = 'txt'
    } else {
      return
    }
    if (download) {
-      downloadText(s, fileName)
+      downloadText(s, fileName+'.'+suffix)
    } else {
      navigator.clipboard.writeText(s).then(() => {
        toast.success('复制成功')
      }).catch(console.error)
    }
    setMoreVisible(false)
-  }, [curSummaryType, data, downloadType, segments, title])
+  }, [curSummaryType, data, downloadType, segments, title, url])

  const downloadAudioCallback = useCallback(() => {
-    window.parent.postMessage({
-      type: 'downloadAudio',
-    }, '*')
+    sendInject('DOWNLOAD_AUDIO', {})
  }, [])

  const selectCallback = useCallback((e: any) => {
-    dispatch(setDownloadType(e.target.value))
+    dispatch(setTempData({
+      downloadType: e.target.value,
+    }))
  }, [dispatch])

  const preventCallback = useCallback((e: any) => {
@@ -259,30 +265,41 @@ const MoreBtn = (props: Props) => {
            微信公众号(IndieKKY)
          </a>
        </li>
+        {/* <li className='hover:bg-accent'> */}
+        {/*  <a className='flex items-center' onClick={(e) => { */}
+        {/*    e.preventDefault() */}
+        {/*    e.stopPropagation() */}
+        {/*    openUrl('https://bibigpt.co/r/bilibili') */}
+        {/*  }}> */}
+        {/*    <img alt='BibiGPT' src='/bibigpt.png' className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/> */}
+        {/*    BibiGPT */}
+        {/*  </a> */}
+        {/* </li> */}
+        {/* <li className='hover:bg-accent'> */}
+        {/*  <a className='flex items-center' onClick={(e) => { */}
+        {/*    e.preventDefault() */}
+        {/*    e.stopPropagation() */}
+        {/*    openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf') */}
+        {/*  }}> */}
+        {/*    <img alt='youtube subtitle' src='/youtube-caption.png' */}
+        {/*         className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/> */}
+        {/*    Youtube Caption */}
+        {/*  </a> */}
+        {/* </li> */}
        <li className='hover:bg-accent'>
          <a className='flex items-center' onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-            openUrl('https://chromewebstore.google.com/detail/fiaeclpicddpifeflpmlgmbjgaedladf')
-          }}>
-            <img alt='youtube subtitle' src='/youtube-subtitle.png' className='w-[20px] h-[20px] bg-white rounded-sm p-0.5'/>
-            Youtube Subtitle
-          </a>
-        </li>
-        <li className='hover:bg-accent'>
-          <a className='flex items-center' onClick={(e) => {
-            dispatch(setPage(PAGE_SETTINGS))
+            chrome.runtime.openOptionsPage()
            setMoreVisible(false)
            e.preventDefault()
            e.stopPropagation()
          }}>
            <IoMdSettings className='w-[20px] h-[20px] text-primary/75 bg-white rounded-sm p-0.5'/>
-            设置
+            选项
          </a>
        </li>
      </ul>
    </Popover>}
-</>
+  </>
 }

 export default MoreBtn
--- a/src/components/NormalSegmentItem.tsx
+++ b/src/components/NormalSegmentItem.tsx
@@ -1,20 +1,17 @@
 import React, {useMemo} from 'react'
-import {formatTime} from '../util/util'
+import {formatTime} from '../utils/util'
 import {useAppSelector} from '../hooks/redux'
-import {getDisplay, getTransText} from '../util/biz_util'
+import {getDisplay, getTransText} from '../utils/bizUtil'
 import classNames from 'classnames'

 const NormalSegmentItem = (props: {
-  item: {
-    from: number
-    to: number
-    content: string
-  }
+  item: TranscriptItem
  idx: number
  isIn: boolean
  moveCallback: (event: any) => void
+  move2Callback: (event: any) => void
 }) => {
-  const {item, idx, isIn, moveCallback} = props
+  const {item, idx, isIn, moveCallback, move2Callback} = props
  const transResult = useAppSelector(state => state.env.transResults[idx])
  const envData = useAppSelector(state => state.env.envData)
  const fontSize = useAppSelector(state => state.env.envData.fontSize)
@@ -23,7 +20,7 @@ const NormalSegmentItem = (props: {
  const display = useMemo(() => getDisplay(envData.transDisplay, item.content, transText), [envData.transDisplay, item.content, transText])

  return <div className={classNames('flex py-0.5 cursor-pointer rounded-sm hover:bg-base-200', fontSize === 'large'?'text-sm':'text-xs')}
-              onClick={moveCallback}>
+              onClick={moveCallback} onDoubleClick={move2Callback}>
    <div className='desc w-[66px] flex justify-center'>{formatTime(item.from)}</div>
    <div className={'flex-1'}>
      <div className={classNames('font-medium', isIn ? 'text-primary underline' : '')}>{display.main}</div>
--- a/src/components/RateExtension.tsx
+++ b/src/components/RateExtension.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { FaStar } from 'react-icons/fa';
+import { IoMdClose } from 'react-icons/io';
+import { setTempData } from '../redux/envReducer';
+import { useAppDispatch, useAppSelector } from '../hooks/redux';
+import { openUrl } from '@kky002/kky-util';
+import { isEdgeBrowser } from '../utils/util';
+
+const RateExtension: React.FC = () => {
+  const dispatch = useAppDispatch()
+  const [isHovered, setIsHovered] = useState(false);
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+
+  const handleRateClick = () => {
+    dispatch(setTempData({
+      reviewed: true
+    }))
+    // Chrome Web Store URL for your extension
+    if (isEdgeBrowser()) {
+      openUrl('https://microsoftedge.microsoft.com/addons/detail/lignnlhlpiefmcjkdkmfjdckhlaiajan')
+    } else {
+      openUrl('https://chromewebstore.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp/reviews')
+    }
+  };
+
+  if (reviewed === true || reviewed === undefined) return null;
+
+  return (
+    <div className="relative bg-gradient-to-r from-primary to-secondary text-primary-content p-4 rounded-lg shadow-lg text-sm transition-all duration-300 ease-in-out hover:shadow-xl">
+      <button
+        onClick={() => {
+          dispatch(setTempData({
+            reviewed: true
+          }))
+        }}
+        className="absolute top-2 right-2 text-primary-content opacity-70 hover:opacity-100 transition-opacity"
+      >
+        <IoMdClose size={20} />
+      </button>
+      <h3 className="text-lg font-bold mb-2 animate-pulse">喜欢这个扩展吗？</h3>
+      <p className="mb-3">如果觉得有用，请给我们评分！</p>
+      <button
+        onClick={handleRateClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className="btn btn-accent btn-sm gap-2 transition-all duration-300 ease-in-out hover:scale-105"
+      >
+        <FaStar className={`inline-block text-yellow-300 ${isHovered ? 'animate-spin' : ''}`} />
+        去评分
+        <span className="transition-transform duration-300 ease-in-out transform inline-block">
+          {isHovered ? '🚀' : '→'}
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default RateExtension;
--- a/src/components/SegmentCard.tsx
+++ b/src/components/SegmentCard.tsx
@@ -1,16 +1,16 @@
 import React, {MutableRefObject, useCallback, useEffect, useMemo, useRef} from 'react'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
-import {setFloatKeyPointsSegIdx, setPage, setSegmentFold, setTempData} from '../redux/envReducer'
+import {setFloatKeyPointsSegIdx, setSegmentFold, setTempData} from '../redux/envReducer'
 import classNames from 'classnames'
 import {FaClipboardList} from 'react-icons/fa'
-import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../const'
+import {PAGE_MAIN, PAGE_SETTINGS, SUMMARIZE_THRESHOLD, SUMMARIZE_TYPES} from '../consts/const'
 import useTranslate from '../hooks/useTranslate'
-import {BsDashSquare, BsPlusSquare, CgFileDocument, GrOverview, RiFileCopy2Line} from 'react-icons/all'
+import {BsDashSquare, BsPlusSquare, CgFileDocument, FaQuestion, GrOverview, RiFileCopy2Line} from 'react-icons/all'
 import toast from 'react-hot-toast'
-import {getLastTime, getSummaryStr, isSummaryEmpty, parseStrTimeToSeconds} from '../util/biz_util'
+import {getLastTime, getSummaryStr, isSummaryEmpty, parseStrTimeToSeconds} from '../utils/bizUtil'
 import {useInViewport} from 'ahooks'
 import SegmentItem from './SegmentItem'
-import {stopPopFunc} from '../util/util'
+import {stopPopFunc} from '../utils/util'
 import useSubtitle from '../hooks/useSubtitle'

 const SummarizeItemOverview = (props: {
@@ -46,7 +46,7 @@ const SummarizeItemOverview = (props: {
    if (event.altKey) { // 复制
      navigator.clipboard.writeText(overviewItem.key).catch(console.error)
    } else {
-      move(time)
+      move(time, false)
    }
  }, [overviewItem.key, move, time])

@@ -66,19 +66,19 @@ const Summarize = (props: {
  const {segment, segmentIdx, summary, float} = props

  const dispatch = useAppDispatch()
-  const apiKey = useAppSelector(state => state.env.envData.apiKey)
+  const envData = useAppSelector(state => state.env.envData)
  const fontSize = useAppSelector(state => state.env.envData.fontSize)
  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
  const {addSummarizeTask} = useTranslate()

  const onGenerate = useCallback(() => {
+    const apiKey = envData.aiType === 'gemini'?envData.geminiApiKey:envData.apiKey
    if (apiKey) {
      addSummarizeTask(curSummaryType, segment).catch(console.error)
    } else {
-      dispatch(setPage(PAGE_SETTINGS))
-      toast.error('需要先设置ApiKey!')
+      toast.error('请先在选项页面设置ApiKey!')
    }
-  }, [addSummarizeTask, apiKey, curSummaryType, dispatch, segment])
+  }, [addSummarizeTask, curSummaryType, envData.aiType, envData.apiKey, envData.geminiApiKey, segment])

  const onCopy = useCallback(() => {
    if (summary != null) {
@@ -106,6 +106,13 @@ const Summarize = (props: {
        <div className={classNames('font-medium max-w-[90%]', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
          {summary.content.summary}
        </div>}
+      {summary?.type === 'question' && (summary.content != null) &&
+        <div className={classNames('max-w-[90%] flex flex-col gap-1', fontSize === 'large' ? 'text-sm' : 'text-xs')}>
+          {summary.content.map((question: any, idx: number) => <div key={idx}>
+            <h2 className={classNames('font-semibold underline', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.q}</h2>
+            <div className={classNames('font-normal', fontSize === 'large' ? 'text-sm' : 'text-xs')}>{question.a}</div>
+          </div>)}
+        </div>}
    </div>
    <div className='flex flex-col justify-center items-center'>
      {segment.text.length < SUMMARIZE_THRESHOLD && <div className='desc-lighter text-xs'>文字过短，无法总结.</div>}
@@ -137,8 +144,7 @@ const SegmentCard = (props: {
  const summarizeEnable = useAppSelector(state => state.env.envData.summarizeEnable)
  const summarizeFloat = useAppSelector(state => state.env.envData.summarizeFloat)
  const fold = useAppSelector(state => state.env.fold)
-  const page = useAppSelector(state => state.env.page)
-  const compact = useAppSelector(state => state.env.compact)
+  const compact = useAppSelector(state => state.env.tempData.compact)
  const floatKeyPointsSegIdx = useAppSelector(state => state.env.floatKeyPointsSegIdx)
  const showCurrent = useMemo(() => curIdx != null && segment.startIdx <= curIdx && curIdx <= segment.endIdx, [curIdx, segment.endIdx, segment.startIdx])
  const curSummaryType = useAppSelector(state => state.env.tempData.curSummaryType)
@@ -160,7 +166,7 @@ const SegmentCard = (props: {
  // 检测设置floatKeyPointsSegIdx
  useEffect(() => {
    if (summarizeFloat) { // 已启用
-      if (!fold && page === PAGE_MAIN && showCurrent) { // 当前Card有控制权
+      if (!fold && showCurrent) { // 当前Card有控制权
        if (!inViewport && (summary != null) && !isSummaryEmpty(summary)) {
          dispatch(setFloatKeyPointsSegIdx(segment.startIdx))
        } else {
@@ -168,7 +174,7 @@ const SegmentCard = (props: {
        }
      }
    }
-  }, [dispatch, fold, inViewport, page, segment.startIdx, showCurrent, summarizeFloat, summary])
+  }, [dispatch, fold, inViewport, segment.startIdx, showCurrent, summarizeFloat, summary])

  const onSelBrief = useCallback(() => {
    dispatch(setTempData({
@@ -188,6 +194,12 @@ const SegmentCard = (props: {
    }))
  }, [dispatch])

+  const onSelQuestion = useCallback(() => {
+    dispatch(setTempData({
+      curSummaryType: 'question'
+    }))
+  }, [dispatch])
+
  return <div
    className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1 shadow', showCurrent && 'shadow-primary')}>
    <div className='relative flex justify-center min-h-[20px]'>
@@ -202,6 +214,7 @@ const SegmentCard = (props: {
        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'brief' && 'tab-active')} onClick={onSelBrief}><CgFileDocument/>总结</a>
        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'overview' && 'tab-active')} onClick={onSelOverview}><GrOverview/>概览</a>
        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'keypoint' && 'tab-active')} onClick={onSelKeypoint}><FaClipboardList/>要点</a>
+        <a className={classNames('tab tab-lifted tab-xs', curSummaryType === 'question' && 'tab-active')} onClick={onSelQuestion}><FaQuestion/>问题</a>
        <a className="tab tab-lifted tab-xs tab-disabled cursor-default"></a>
      </div>}
      <div
--- a/src/components/SegmentItem.tsx
+++ b/src/components/SegmentItem.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef} from 'react'
+import React, {useCallback, useEffect, useMemo, useRef} from 'react'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import useSubtitle from '../hooks/useSubtitle'
 import {setCheckAutoScroll, setCurOffsetTop, setNeedScroll} from '../redux/envReducer'
@@ -7,27 +7,41 @@ import CompactSegmentItem from './CompactSegmentItem'

 const SegmentItem = (props: {
  bodyRef: any
-  item: {
-    from: number
-    to: number
-    content: string
-  }
+  item: TranscriptItem
  idx: number
  isIn: boolean
  needScroll?: boolean
  last: boolean
 }) => {
-  const dispatch = useAppDispatch()
  const {bodyRef, item, idx, isIn, needScroll, last} = props
+  const dispatch = useAppDispatch()
  const ref = useRef<any>()
  const {move} = useSubtitle()
-  const compact = useAppSelector(state => state.env.compact)
+
+  const compact = useAppSelector(state => state.env.tempData.compact)
+  const searchText = useAppSelector(state => state.env.searchText)
+  const searchResult = useAppSelector(state => state.env.searchResult)
+  const display = useMemo(() => {
+    if (searchText) {
+      return searchResult[item.idx+''] ? 'inline' : 'none'
+    } else {
+      return 'inline'
+    }
+  }, [item.idx, searchResult, searchText])

  const moveCallback = useCallback((event: any) => {
    if (event.altKey) { // 复制
      navigator.clipboard.writeText(item.content).catch(console.error)
    } else {
-      move(item.from)
+      move(item.from, false)
+    }
+  }, [item.content, item.from, move])
+
+  const move2Callback = useCallback((event: any) => {
+    if (event.altKey) { // 复制
+      navigator.clipboard.writeText(item.content).catch(console.error)
+    } else {
+      move(item.from, true)
    }
  }, [item.content, item.from, move])

@@ -47,7 +61,9 @@ const SegmentItem = (props: {
    }
  }, [dispatch, isIn])

-  return <span ref={ref}>
+  return <span ref={ref} style={{
+    display
+  }}>
    {compact
      ? <CompactSegmentItem
        item={item}
@@ -55,6 +71,7 @@ const SegmentItem = (props: {
        isIn={isIn}
        last={last}
        moveCallback={moveCallback}
+        move2Callback={move2Callback}
      />
      :
      <NormalSegmentItem
@@ -62,6 +79,7 @@ const SegmentItem = (props: {
        idx={idx}
        isIn={isIn}
        moveCallback={moveCallback}
+        move2Callback={move2Callback}
      />
    }
  </span>
--- a/src/consts/const.ts
+++ b/src/consts/const.ts
@@ -1,3 +1,5 @@
+export const EVENT_EXPAND = 'expand'
+
 export const APP_DOM_ID = 'bilibili-subtitle'

 export const IFRAME_ID = 'bilibili-subtitle-iframe'
@@ -8,7 +10,9 @@ export const STORAGE_TEMP = 'bilibili-subtitle_temp'
 export const PROMPT_TYPE_TRANSLATE = 'translate'
 export const PROMPT_TYPE_SUMMARIZE_OVERVIEW = 'summarize_overview'
 export const PROMPT_TYPE_SUMMARIZE_KEYPOINT = 'summarize_keypoint'
+export const PROMPT_TYPE_SUMMARIZE_QUESTION = 'summarize_question'
 export const PROMPT_TYPE_SUMMARIZE_BRIEF = 'summarize_brief'
+export const PROMPT_TYPE_ASK = 'ask'
 export const PROMPT_TYPES = [{
  name: '翻译',
  type: PROMPT_TYPE_TRANSLATE,
@@ -21,6 +25,12 @@ export const PROMPT_TYPES = [{
 }, {
  name: '总结',
  type: PROMPT_TYPE_SUMMARIZE_BRIEF,
+}, {
+  name: '问题',
+  type: PROMPT_TYPE_SUMMARIZE_QUESTION,
+}, {
+  name: '提问',
+  type: PROMPT_TYPE_ASK,
 }]

 export const SUMMARIZE_TYPES = {
@@ -42,6 +52,12 @@ export const SUMMARIZE_TYPES = {
    downloadName: '💡视频要点💡',
    promptType: PROMPT_TYPE_SUMMARIZE_KEYPOINT,
  },
+  question: {
+    name: '问题',
+    desc: '常见问题',
+    downloadName: '💡常见问题💡',
+    promptType: PROMPT_TYPE_SUMMARIZE_QUESTION,
+  },
 }

 export const PROMPT_DEFAULTS = {
@@ -119,10 +135,61 @@ The video's subtitles:

 '''
 {{segment}}
-'''`
-}
+'''`,
+  [PROMPT_TYPE_SUMMARIZE_QUESTION]: `You are a helpful assistant that skilled at extracting questions from video subtitle.

-export const EVENT_EXPAND = 'expand'
+## Context
+
+The video's title: '''{{title}}'''.
+The video's subtitles:
+
+'''
+{{segment}}
+'''
+
+## Command
+
+Accurately extract key questions and their corresponding answers from the video subtitles based on the actual content provided. The number of questions should be between 3 and 5.
+
+- Identify questions as sentences starting with interrogative words (e.g., "What", "How", "Why") and extract the following sentences that directly answer these questions.
+- Include only those questions and answers that are relevant to the main points of the video, and ensure they cover different aspects of the video's content.
+- If an answer spans multiple non-consecutive parts of the subtitles, concatenate them into a coherent response without adding any information not present in the subtitles.
+- In cases where the number of potential Q&As exceeds 5, prioritize the most informative and directly answered ones.
+- If clear questions and answers are not available in the subtitles, refrain from creating them and instead note the absence of direct Q&As.
+- Answer in language '{{language}}'.
+- Format the output in markdown json format, as specified.
+
+## Output format
+
+Provide an example to illustrate the expected output:
+
+\`\`\`json
+[
+    {
+        "q": "What is the main theme of the video?",
+        "a": "The main theme of the video is explained as..."
+    },
+    {
+        "q": "How is the topic developed?",
+        "a": "The topic is developed through various examples, including..."
+    }
+]
+\`\`\`
+`,
+  [PROMPT_TYPE_ASK]: `You are a helpful assistant who answers question related to video subtitles.
+Answer in language '{{language}}'.
+
+The video's title: '''{{title}}'''.
+The video's subtitles:
+
+'''
+{{segment}}
+'''
+
+Question: '''{{question}}'''
+Answer:
+`,
+}

 export const TASK_EXPIRE_TIME = 15*60*1000

@@ -141,26 +208,39 @@ export const TOTAL_HEIGHT_DEF = 520
 export const TOTAL_HEIGHT_MAX = 800
 export const HEADER_HEIGHT = 44
 export const TITLE_HEIGHT = 24
+export const SEARCH_BAR_HEIGHT = 32
+export const RECOMMEND_HEIGHT = 36

-export const WORDS_DEFAULT = import.meta.env.VITE_ENV === 'web-dev'?500:2000
+export const WORDS_RATE = 0.75
 export const WORDS_MIN = 500
 export const WORDS_MAX = 16000
 export const WORDS_STEP = 500
 export const SUMMARIZE_THRESHOLD = 100
 export const SUMMARIZE_LANGUAGE_DEFAULT = 'cn'
 export const SUMMARIZE_ALL_THRESHOLD = 5
+export const ASK_ENABLED_DEFAULT = true
+export const DEFAULT_SERVER_URL_OPENAI = 'https://api.openai.com'
+export const CUSTOM_MODEL_TOKENS = 16385

-export const SERVER_URL_OPENAI = 'https://api.openai.com'
-export const SERVER_URL_THIRD = 'https://op.kongkongye.com'
-
+export const MODEL_TIP = '推荐gpt-4o-mini，能力强，价格低，token上限大'
 export const MODELS = [{
-  code: 'gpt-3.5-turbo',
-  name: 'gpt-3.5-turbo',
+  code: 'gpt-4o-mini',
+  name: 'gpt-4o-mini',
+  tokens: 128000,
 }, {
-  code: 'gpt-3.5-turbo-16k',
-  name: 'gpt-3.5-turbo-16k',
+  code: 'gpt-3.5-turbo-0125',
+  name: 'gpt-3.5-turbo-0125',
+  tokens: 16385,
+}, {
+  code: 'custom',
+  name: '自定义',
 }]
+export const GEMINI_TOKENS = 32768
 export const MODEL_DEFAULT = MODELS[0].code
+export const MODEL_MAP: {[key: string]: typeof MODELS[number]} = {}
+for (const model of MODELS) {
+  MODEL_MAP[model.code] = model
+}

 export const LANGUAGES = [{
  code: 'en',
--- a/src/data/data.json
+++ b/src/data/data.json
@@ -1,864 +0,0 @@
-{
-  "font_size": 0.4,
-  "font_color": "#FFFFFF",
-  "background_alpha": 0.5,
-  "background_color": "#9C27B0",
-  "Stroke": "none",
-  "type": "AIsubtitle",
-  "lang": "zh",
-  "version": "a1.3.0.2",
-  "body": [
-    {
-      "from": 0.666,
-      "to": 1.799,
-      "location": 0,
-      "content": "各位听众朋友大家好"
-    },
-    {
-      "from": 1.8,
-      "to": 4.3,
-      "location": 0,
-      "content": "欢迎来到旧世代电台我是Lunmos"
-    },
-    {
-      "from": 4.4,
-      "to": 5.466,
-      "location": 0,
-      "content": "我们这期呢"
-    },
-    {
-      "from": 5.466,
-      "to": 6.966,
-      "location": 0,
-      "content": "来聊一个真正的"
-    },
-    {
-      "from": 6.966,
-      "to": 9.766,
-      "location": 0,
-      "content": "我觉得可能是新旧世代"
-    },
-    {
-      "from": 10.3,
-      "to": 12.333,
-      "location": 0,
-      "content": "分界线的这么一件事情"
-    },
-    {
-      "from": 12.733,
-      "to": 15.133,
-      "location": 0,
-      "content": "那首先呢还是来一个思维实验"
-    },
-    {
-      "from": 15.2,
-      "to": 17.5,
-      "location": 0,
-      "content": "上期其实我们也已经提到了"
-    },
-    {
-      "from": 17.5,
-      "to": 19.7,
-      "location": 0,
-      "content": "就是一个上世纪末的人"
-    },
-    {
-      "from": 19.7,
-      "to": 22.4,
-      "location": 0,
-      "content": "如果穿越到了2023年的现在"
-    },
-    {
-      "from": 22.733,
-      "to": 24.766,
-      "location": 0,
-      "content": "我们已经发展了20多年的"
-    },
-    {
-      "from": 24.8,
-      "to": 26.3,
-      "location": 0,
-      "content": "这么一个21世纪"
-    },
-    {
-      "from": 26.333,
-      "to": 27.766,
-      "location": 0,
-      "content": "就在此时此刻"
-    },
-    {
-      "from": 28,
-      "to": 28.8,
-      "location": 0,
-      "content": "那么"
-    },
-    {
-      "from": 29.7,
-      "to": 31.966,
-      "location": 0,
-      "content": "你问他他会被什么东西"
-    },
-    {
-      "from": 32.4,
-      "to": 34.533,
-      "location": 0,
-      "content": "所吓尿所吓到"
-    },
-    {
-      "from": 35.4,
-      "to": 35.933,
-      "location": 0,
-      "content": "那当然了"
-    },
-    {
-      "from": 35.933,
-      "to": 37.133,
-      "location": 0,
-      "content": "看过上期电台的朋友"
-    },
-    {
-      "from": 37.133,
-      "to": 39.099,
-      "location": 0,
-      "content": "已经知道我想说的那个答案了"
-    },
-    {
-      "from": 39.1,
-      "to": 41.3,
-      "location": 0,
-      "content": "不妨我们可以先来试试"
-    },
-    {
-      "from": 41.466,
-      "to": 42.966,
-      "location": 0,
-      "content": "感觉一下其他方面"
-    },
-    {
-      "from": 42.966,
-      "to": 45.599,
-      "location": 0,
-      "content": "我们有哪些地方发展的还算可以"
-    },
-    {
-      "from": 46.133,
-      "to": 47.599,
-      "location": 0,
-      "content": "比如说航空航天"
-    },
-    {
-      "from": 47.6,
-      "to": 51.066,
-      "location": 0,
-      "content": "他会被现在的航空航天科技所震惊吗"
-    },
-    {
-      "from": 51.066,
-      "to": 52.199,
-      "location": 0,
-      "content": "我觉得"
-    },
-    {
-      "from": 52.6,
-      "to": 53.366,
-      "location": 0,
-      "content": "不见得对吧"
-    },
-    {
-      "from": 53.366,
-      "to": 55.966,
-      "location": 0,
-      "content": "现在虽然说有了一些可回收的"
-    },
-    {
-      "from": 55.966,
-      "to": 57.499,
-      "location": 0,
-      "content": "航空航天的一些"
-    },
-    {
-      "from": 57.733,
-      "to": 59.599,
-      "location": 0,
-      "content": "科技虽然说有了一些"
-    },
-    {
-      "from": 59.6,
-      "to": 61,
-      "location": 0,
-      "content": "当时人们可能没太"
-    },
-    {
-      "from": 61,
-      "to": 62.466,
-      "location": 0,
-      "content": "见到的一些科技路线"
-    },
-    {
-      "from": 62.466,
-      "to": 63.266,
-      "location": 0,
-      "content": "但是"
-    },
-    {
-      "from": 63.966,
-      "to": 64.733,
-      "location": 0,
-      "content": "总体上来说"
-    },
-    {
-      "from": 64.733,
-      "to": 65.099,
-      "location": 0,
-      "content": "还是"
-    },
-    {
-      "from": 65.1,
-      "to": 67.8,
-      "location": 0,
-      "content": "现在的人被那个时候吓得还差不多"
-    },
-    {
-      "from": 67.8,
-      "to": 69.666,
-      "location": 0,
-      "content": "上个时期的美苏争霸时期"
-    },
-    {
-      "from": 69.666,
-      "to": 71.299,
-      "location": 0,
-      "content": "人们是有意愿在"
-    },
-    {
-      "from": 71.566,
-      "to": 73.866,
-      "location": 0,
-      "content": "航空航天的科技上去点科技术的"
-    },
-    {
-      "from": 73.866,
-      "to": 76.133,
-      "location": 0,
-      "content": "无论是为意志形态服务宣传也好"
-    },
-    {
-      "from": 76.133,
-      "to": 76.933,
-      "location": 0,
-      "content": "还是为了"
-    },
-    {
-      "from": 77.1,
-      "to": 78.9,
-      "location": 0,
-      "content": "真实可能存在的一种"
-    },
-    {
-      "from": 79.133,
-      "to": 79.666,
-      "location": 0,
-      "content": "更高的"
-    },
-    {
-      "from": 79.666,
-      "to": 82.666,
-      "location": 0,
-      "content": "所谓说更高维度的战争的形态也好"
-    },
-    {
-      "from": 82.866,
-      "to": 84.766,
-      "location": 0,
-      "content": "那么人类愿意去倾斜资源"
-    },
-    {
-      "from": 84.766,
-      "to": 86.966,
-      "location": 0,
-      "content": "去让那些在这些科技中"
-    },
-    {
-      "from": 87.466,
-      "to": 90.266,
-      "location": 0,
-      "content": "引领了发展进步的人成为英雄"
-    },
-    {
-      "from": 90.266,
-      "to": 91.399,
-      "location": 0,
-      "content": "那么这样"
-    },
-    {
-      "from": 91.4,
-      "to": 91.9,
-      "location": 0,
-      "content": "才能够"
-    },
-    {
-      "from": 91.9,
-      "to": 94.533,
-      "location": 0,
-      "content": "如愿以偿的得到他们想要的结果"
-    },
-    {
-      "from": 96.066,
-      "to": 97.466,
-      "location": 0,
-      "content": "好航空航天不太行"
-    },
-    {
-      "from": 97.466,
-      "to": 100.666,
-      "location": 0,
-      "content": "那么我们引以为豪的移动互联网"
-    },
-    {
-      "from": 100.666,
-      "to": 101.666,
-      "location": 0,
-      "content": "社交网络"
-    },
-    {
-      "from": 101.666,
-      "to": 103.366,
-      "location": 0,
-      "content": "这个你觉得可以吗"
-    },
-    {
-      "from": 103.366,
-      "to": 104.766,
-      "location": 0,
-      "content": "我觉得也不太行对吧"
-    },
-    {
-      "from": 104.766,
-      "to": 106.999,
-      "location": 0,
-      "content": "我们甚至很多现代人都觉得"
-    },
-    {
-      "from": 107.566,
-      "to": 108.699,
-      "location": 0,
-      "content": "从这些移动互联网"
-    },
-    {
-      "from": 108.7,
-      "to": 110.966,
-      "location": 0,
-      "content": "从这些社交网络中涉及到的东西"
-    },
-    {
-      "from": 110.966,
-      "to": 113.366,
-      "location": 0,
-      "content": "不一定是一个什么那么好的东西"
-    },
-    {
-      "from": 113.366,
-      "to": 114.466,
-      "location": 0,
-      "content": "那么他呢"
-    },
-    {
-      "from": 114.466,
-      "to": 116.133,
-      "location": 0,
-      "content": "当然也会觉得很新奇"
-    },
-    {
-      "from": 116.366,
-      "to": 118.266,
-      "location": 0,
-      "content": "但是他不会觉得这是一件"
-    },
-    {
-      "from": 118.7,
-      "to": 121.133,
-      "location": 0,
-      "content": "多么真正的了不起的事情"
-    },
-    {
-      "from": 121.133,
-      "to": 122.866,
-      "location": 0,
-      "content": "那无非就是把以前的摩尔定律"
-    },
-    {
-      "from": 122.866,
-      "to": 123.999,
-      "location": 0,
-      "content": "继续进行下去"
-    },
-    {
-      "from": 124,
-      "to": 126.266,
-      "location": 0,
-      "content": "然后不断的缩小计算机的体积"
-    },
-    {
-      "from": 126.866,
-      "to": 127.266,
-      "location": 0,
-      "content": "最终呢"
-    },
-    {
-      "from": 127.266,
-      "to": 129.533,
-      "location": 0,
-      "content": "总会能够实现的这么一件事对吧"
-    },
-    {
-      "from": 129.533,
-      "to": 130.733,
-      "location": 0,
-      "content": "手机能上网"
-    },
-    {
-      "from": 130.733,
-      "to": 132.266,
-      "location": 0,
-      "content": "无线网络如此之发达"
-    },
-    {
-      "from": 132.4,
-      "to": 134.466,
-      "location": 0,
-      "content": "也是一个基础设施的扩展"
-    },
-    {
-      "from": 134.466,
-      "to": 136.599,
-      "location": 0,
-      "content": "基础设施的扩张所能实现的事"
-    },
-    {
-      "from": 136.7,
-      "to": 139.166,
-      "location": 0,
-      "content": "那么人们其实并不会太折服于"
-    },
-    {
-      "from": 139.166,
-      "to": 140.899,
-      "location": 0,
-      "content": "使用大规模基础建设"
-    },
-    {
-      "from": 140.9,
-      "to": 143.166,
-      "location": 0,
-      "content": "就能够实现的某件事情"
-    },
-    {
-      "from": 143.166,
-      "to": 145.966,
-      "location": 0,
-      "content": "因为人们总会预期未来"
-    },
-    {
-      "from": 146.466,
-      "to": 147.333,
-      "location": 0,
-      "content": "未来的某一天"
-    },
-    {
-      "from": 147.333,
-      "to": 150.699,
-      "location": 0,
-      "content": "或慢或快的总会出现那么一个时代的"
-    },
-    {
-      "from": 150.7,
-      "to": 152.466,
-      "location": 0,
-      "content": "那就比如说大航海时代的人"
-    },
-    {
-      "from": 152.733,
-      "to": 153.799,
-      "location": 0,
-      "content": "他们也会想"
-    },
-    {
-      "from": 153.8,
-      "to": 156.5,
-      "location": 0,
-      "content": "未来的航路海运可能会非常的发达"
-    },
-    {
-      "from": 156.5,
-      "to": 158.733,
-      "location": 0,
-      "content": "那未来可能遍地都是像阿姆斯特丹"
-    },
-    {
-      "from": 158.733,
-      "to": 160.299,
-      "location": 0,
-      "content": "像伦敦这样的港口"
-    },
-    {
-      "from": 160.666,
-      "to": 161.799,
-      "location": 0,
-      "content": "虽然现在不是这样"
-    },
-    {
-      "from": 161.8,
-      "to": 162.166,
-      "location": 0,
-      "content": "但是"
-    },
-    {
-      "from": 162.166,
-      "to": 164.866,
-      "location": 0,
-      "content": "处在他们能想象的社会发展的极限"
-    },
-    {
-      "from": 165,
-      "to": 166.333,
-      "location": 0,
-      "content": "那我们也提到过游戏"
-    },
-    {
-      "from": 166.333,
-      "to": 168.533,
-      "location": 0,
-      "content": "但也就像有朋友在弹幕中提到的"
-    },
-    {
-      "from": 168.533,
-      "to": 170.599,
-      "location": 0,
-      "content": "想想时之笛是什么年代的游戏"
-    },
-    {
-      "from": 170.6,
-      "to": 171.3,
-      "location": 0,
-      "content": "那现在呢"
-    },
-    {
-      "from": 171.3,
-      "to": 174.066,
-      "location": 0,
-      "content": "甚至还在很多的游戏排行榜中"
-    },
-    {
-      "from": 174.066,
-      "to": 174.899,
-      "location": 0,
-      "content": "排在第一"
-    },
-    {
-      "from": 175.3,
-      "to": 176.8,
-      "location": 0,
-      "content": "那你想让那个时候的人"
-    },
-    {
-      "from": 176.8,
-      "to": 178.933,
-      "location": 0,
-      "content": "真正折服于现在的游戏呢"
-    },
-    {
-      "from": 179.466,
-      "to": 180.599,
-      "location": 0,
-      "content": "也没有那么容易对吧"
-    },
-    {
-      "from": 180.6,
-      "to": 181.7,
-      "location": 0,
-      "content": "在图形学上"
-    },
-    {
-      "from": 181.866,
-      "to": 182.399,
-      "location": 0,
-      "content": "我们也提到"
-    },
-    {
-      "from": 182.4,
-      "to": 183.3,
-      "location": 0,
-      "content": "图形学的发展"
-    },
-    {
-      "from": 183.3,
-      "to": 185.4,
-      "location": 0,
-      "content": "是不断把离线变成实时的过程"
-    },
-    {
-      "from": 185.666,
-      "to": 187.333,
-      "location": 0,
-      "content": "那么他们见过离线的东西"
-    },
-    {
-      "from": 187.333,
-      "to": 188.299,
-      "location": 0,
-      "content": "他们可以预测"
-    },
-    {
-      "from": 188.3,
-      "to": 191.4,
-      "location": 0,
-      "content": "这样的离线动画在将来会变成实时"
-    },
-    {
-      "from": 191.6,
-      "to": 193.166,
-      "location": 0,
-      "content": "那所以呢也不会觉得"
-    },
-    {
-      "from": 193.666,
-      "to": 194.899,
-      "location": 0,
-      "content": "超出认知对吧"
-    },
-    {
-      "from": 195.466,
-      "to": 196.933,
-      "location": 0,
-      "content": "那比如说生物医疗呢"
-    },
-    {
-      "from": 196.966,
-      "to": 198.899,
-      "location": 0,
-      "content": "那虽然说可以说有不少的进"
-    },
-    {
-      "from": 198.9,
-      "to": 199.566,
-      "location": 0,
-      "content": "展但还"
-    },
-    {
-      "from": 199.566,
-      "to": 201.733,
-      "location": 0,
-      "content": "是建立在去完善20世纪"
-    },
-    {
-      "from": 201.733,
-      "to": 203.066,
-      "location": 0,
-      "content": "这样一个科学大厦"
-    },
-    {
-      "from": 203.066,
-      "to": 204.566,
-      "location": 0,
-      "content": "生物大厦的基础上"
-    },
-    {
-      "from": 204.566,
-      "to": 205.866,
-      "location": 0,
-      "content": "对他进行了一些完善"
-    },
-    {
-      "from": 206.2,
-      "to": 208.166,
-      "location": 0,
-      "content": "你要说那些折磨着现代人的"
-    },
-    {
-      "from": 208.166,
-      "to": 209.399,
-      "location": 0,
-      "content": "各种各样的疾病"
-    },
-    {
-      "from": 209.466,
-      "to": 210.733,
-      "location": 0,
-      "content": "那个时候没有攻克的"
-    },
-    {
-      "from": 210.733,
-      "to": 213.366,
-      "location": 0,
-      "content": "现在有多少是被真正攻克了的呢"
-    },
-    {
-      "from": 213.366,
-      "to": 215.133,
-      "location": 0,
-      "content": "那其实也很少对吧"
-    },
-    {
-      "from": 215.266,
-      "to": 217.733,
-      "location": 0,
-      "content": "甚至可能我们连他的致病机理"
-    },
-    {
-      "from": 217.733,
-      "to": 219.499,
-      "location": 0,
-      "content": "还没有完全的搞清楚"
-    },
-    {
-      "from": 220.466,
-      "to": 221.699,
-      "location": 0,
-      "content": "其他可能还有一些比如"
-    },
-    {
-      "from": 221.933,
-      "to": 223.199,
-      "location": 0,
-      "content": "像可控核聚变"
-    },
-    {
-      "from": 223.2,
-      "to": 225.533,
-      "location": 0,
-      "content": "想更高效的电池技术这些"
-    },
-    {
-      "from": 226.3,
-      "to": 228.766,
-      "location": 0,
-      "content": "那就是目前可能还在发展的地方"
-    },
-    {
-      "from": 228.766,
-      "to": 229.899,
-      "location": 0,
-      "content": "怎么怎么说呢"
-    },
-    {
-      "from": 229.9,
-      "to": 230.733,
-      "location": 0,
-      "content": "就是到他"
-    },
-    {
-      "from": 230.733,
-      "to": 233.166,
-      "location": 0,
-      "content": "真正的出现了可以使用的成果之后呢"
-    },
-    {
-      "from": 233.166,
-      "to": 235.866,
-      "location": 0,
-      "content": "我们才能够去拿下来"
-    },
-    {
-      "from": 235.866,
-      "to": 238.533,
-      "location": 0,
-      "content": "让那些旧世代人的那些人"
-    },
-    {
-      "from": 238.533,
-      "to": 239.599,
-      "location": 0,
-      "content": "感到比较的震惊"
-    },
-    {
-      "from": 239.6,
-      "to": 239.9,
-      "location": 0,
-      "content": "但是"
-    },
-    {
-      "from": 239.9,
-      "to": 243.266,
-      "location": 0,
-      "content": "现在可能还没到那个完成的时间点吧"
-    },
-    {
-      "from": 244.4,
-      "to": 245.133,
-      "location": 0,
-      "content": "那么延续了"
-    },
-    {
-      "from": 245.133,
-      "to": 247.466,
-      "location": 0,
-      "content": "上个世纪的第三次科技革命中的"
-    },
-    {
-      "from": 247.466,
-      "to": 249.366,
-      "location": 0,
-      "content": "计算机软硬件的发展呢"
-    },
-    {
-      "from": 249.566,
-      "to": 251.599,
-      "location": 0,
-      "content": "其实惊喜也没有那么多"
-    },
-    {
-      "from": 251.6,
-      "to": 253.766,
-      "location": 0,
-      "content": "就上世纪的那些互联网应用"
-    },
-    {
-      "from": 253.9,
-      "to": 256.133,
-      "location": 0,
-      "content": "那很多时候其实已经挺好用了"
-    },
-    {
-      "from": 256.266,
-      "to": 257.733,
-      "location": 0,
-      "content": "论坛是上世纪的"
-    },
-    {
-      "from": 257.8,
-      "to": 260.133,
-      "location": 0,
-      "content": "那么i m软件是上世纪的"
-    },
-    {
-      "from": 260.133,
-      "to": 261.066,
-      "location": 0,
-      "content": "现在的互联网呢"
-    },
-    {
-      "from": 261.066,
-      "to": 264.766,
-      "location": 0,
-      "content": "是把他更多的做的是大规模是吧是吧"
-    },
-    {
-      "from": 264.766,
-      "to": 267.499,
-      "location": 0,
-      "content": "越来越多的人纳入到了这个体系中"
-    },
-    {
-      "from": 267.5,
-      "to": 269.566,
-      "location": 0,
-      "content": "所产生的这么一个规模效应"
-    },
-    {
-      "from": 269.933,
-      "to": 272.399,
-      "location": 0,
-      "content": "就当年操作系统能完成能做的事情呢"
-    }
-  ]
-}
--- a/src/data/keyPoints.json
+++ b/src/data/keyPoints.json
@@ -1,22 +0,0 @@
-[
-  {
-    "time": "00:10",
-    "emoji": "👍",
-    "key": "人们喜欢短。"
-  },
-  {
-    "time": "01:00",
-    "emoji": "👍",
-    "key": "晶体智力和流体智力"
-  },
-  {
-    "time": "03:00",
-    "emoji": "👍",
-    "key": "外向成长是围绕外界展开的成长活动，以输出为输入可以带来正向反馈。"
-  },
-  {
-    "time": "05:00",
-    "emoji": "👍",
-    "key": "制定学习计划时，要专注打造自己的外向晶体和木子，即找到清晰的输出点，搜刮对应的项目和参考，借鉴晶体。"
-  }
-]
--- a/src/hooks/message.ts
+++ b/src/hooks/message.ts
@@ -0,0 +1,3 @@
+import useMessaging from "@/messaging/layer2/useMessaging";
+
+export const useMessage = useMessaging<AllExtensionMessages, AllInjectMessages>
--- a/src/hooks/useKeyService.ts
+++ b/src/hooks/useKeyService.ts
@@ -0,0 +1,84 @@
+import {useEffect} from 'react'
+import {useMemoizedFn} from 'ahooks/es'
+import {useAppDispatch, useAppSelector} from './redux'
+import useSubtitle from './useSubtitle'
+import {setInputting} from '../redux/envReducer'
+
+const useKeyService = () => {
+  const dispatch = useAppDispatch()
+  const inputting = useAppSelector(state => state.env.inputting)
+  const curIdx = useAppSelector(state => state.env.curIdx)
+  const data = useAppSelector(state => state.env.data)
+  const {move} = useSubtitle()
+
+  // 输入中
+  useEffect(() => {
+    const onInputtingStart = (e: CompositionEvent) => {
+      dispatch(setInputting(true))
+    }
+    const onInputtingEnd = (e: CompositionEvent) => {
+      dispatch(setInputting(false))
+    }
+
+    document.addEventListener('compositionstart', onInputtingStart)
+    document.addEventListener('compositionend', onInputtingEnd)
+    return () => {
+      document.removeEventListener('compositionstart', onInputtingStart)
+      document.removeEventListener('compositionend', onInputtingEnd)
+    }
+  }, [dispatch])
+
+  const onKeyDown = useMemoizedFn((e: KeyboardEvent) => {
+    // 当前在输入中（如中文输入法）
+    if (inputting) {
+      return
+    }
+
+    // 有按其他控制键时，不触发
+    if (e.ctrlKey || e.metaKey || e.shiftKey) {
+      return
+    }
+
+    let cursorInInput = false
+    if (document.activeElement != null) {
+      const tagName = document.activeElement.tagName
+      if (tagName === 'INPUT' || tagName === 'TEXTAREA') {
+        cursorInInput = true
+      }
+    }
+    let prevent = false
+
+    // up arrow
+    if (e.key === 'ArrowUp') {
+      if (curIdx && (data != null) && !cursorInInput) {
+        prevent = true
+        const newCurIdx = Math.max(curIdx - 1, 0)
+        move(data.body[newCurIdx].from, false)
+      }
+    }
+    // down arrow
+    if (e.key === 'ArrowDown') {
+      if (curIdx !== undefined && (data != null) && !cursorInInput) {
+        prevent = true
+        const newCurIdx = Math.min(curIdx + 1, data.body.length - 1)
+        move(data.body[newCurIdx].from, false)
+      }
+    }
+
+    // 阻止默认事件
+    if (prevent) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+  })
+
+  // 检测快捷键
+  useEffect(() => {
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [onKeyDown])
+}
+
+export default useKeyService
--- a/src/hooks/useMessageService.ts
+++ b/src/hooks/useMessageService.ts
@@ -0,0 +1,30 @@
+import { setCurFetched, setCurInfo, setData, setInfos, setTitle, setUrl } from '@/redux/envReducer'
+import { useMemo } from 'react'
+import { useAppDispatch } from './redux'
+import useMessagingService from '@/messaging/layer2/useMessagingService'
+
+const useMessageService = () => {
+  const dispatch = useAppDispatch()
+  
+  //methods
+  const methods: {
+    [K in AllAPPMessages['method']]: (params: Extract<AllAPPMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
+  } = useMemo(() => ({
+    SET_INFOS: async (params, context: MethodContext) => {
+      dispatch(setInfos(params.infos))
+      dispatch(setCurInfo(undefined))
+      dispatch(setCurFetched(false))
+      dispatch(setData(undefined))
+    },
+    SET_VIDEO_INFO: async (params, context: MethodContext) => {
+      dispatch(setInfos(params.infos))
+      dispatch(setUrl(params.url))
+      dispatch(setTitle(params.title))
+      console.debug('video title: ', params.title)
+    },
+  }), [dispatch])
+
+  useMessagingService(methods)
+}
+
+export default useMessageService
--- a/src/hooks/useSearchService.ts
+++ b/src/hooks/useSearchService.ts
@@ -0,0 +1,61 @@
+import {useAppDispatch, useAppSelector} from './redux'
+import {useEffect, useMemo} from 'react'
+import {setSearchResult, setSearchText, } from '../redux/envReducer'
+import {Search} from '../utils/search'
+
+interface Document {
+  idx: number
+  s: string // searchKeys
+}
+
+const useSearchService = () => {
+  const dispatch = useAppDispatch()
+
+  const envData = useAppSelector(state => state.env.envData)
+  const data = useAppSelector(state => state.env.data)
+  const searchText = useAppSelector(state => state.env.searchText)
+
+  const {reset, search} = useMemo(() => Search('idx', 's', 256, {
+    cnSearchEnabled: envData.cnSearchEnabled
+  }), [envData.cnSearchEnabled]) // 搜索实例
+
+  // reset search
+  useEffect(() => {
+    if (!envData.searchEnabled) {
+      return
+    }
+    const startTime = Date.now()
+    const docs: Document[] = []
+    for (const item of data?.body??[]) {
+      docs.push({
+        idx: item.idx,
+        s: item.content,
+      })
+    }
+    reset(docs)
+    // 清空搜索文本
+    dispatch(setSearchText(''))
+    // 日志
+    const endTime = Date.now()
+    console.debug(`[Search]reset ${docs.length} docs, cost ${endTime-startTime}ms`)
+  }, [data?.body, dispatch, envData.searchEnabled, reset])
+
+  // search text
+  useEffect(() => {
+    const searchResult: Record<string, boolean> = {}
+
+    if (envData.searchEnabled && searchText) {
+      // @ts-expect-error
+      const documents: Document[] | undefined = search(searchText)
+      if (documents != null) {
+        for (const document of documents) {
+          searchResult[''+document.idx] = true
+        }
+      }
+    }
+
+    dispatch(setSearchResult(searchResult))
+  }, [dispatch, envData.searchEnabled, search, searchText])
+}
+
+export default useSearchService
--- a/src/hooks/useSubtitle.ts
+++ b/src/hooks/useSubtitle.ts
@@ -1,13 +1,25 @@
-import {useAppDispatch} from './redux'
+import {useAppDispatch, useAppSelector} from './redux'
 import React, {useCallback} from 'react'
-import {setNeedScroll} from '../redux/envReducer'
-
+import {setNeedScroll, setReviewAction, setTempData} from '../redux/envReducer'
+import { useMessage } from './message'
 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('MOVE', {time, togglePause})

-  const move = useCallback((time: number) => {
-    window.parent.postMessage({type: 'move', time}, '*')
-  }, [])
+    //review action
+    if (reviewed === undefined && !reviewAction) {
+      dispatch(setReviewAction(true))
+      dispatch(setTempData({
+        reviewActions: (reviewActions ?? 0) + 1
+      }))
+    }
+  }, [dispatch, reviewAction, reviewActions, reviewed])

  const scrollIntoView = useCallback((ref: React.RefObject<HTMLDivElement>) => {
    ref.current?.scrollIntoView({behavior: 'smooth', block: 'center'})
--- a/src/hooks/useSubtitleService.ts
+++ b/src/hooks/useSubtitleService.ts
@@ -12,11 +12,14 @@ import {
  setSegments,
  setTitle,
  setTotalHeight,
+  setUrl,
+  setTempData,
 } from '../redux/envReducer'
 import {EventBusContext} from '../Router'
-import {EVENT_EXPAND, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_DEFAULT, WORDS_MAX, WORDS_MIN} from '../const'
-import {useInterval} from 'ahooks'
-import {getWholeText} from '../util/biz_util'
+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 { useMessage } from './message'

 /**
 * Service是单例，类似后端的服务概念
@@ -38,54 +41,18 @@ const useSubtitleService = () => {
  const transResults = useAppSelector(state => state.env.transResults)
  const hideOnDisableAutoTranslate = useAppSelector(state => state.env.envData.hideOnDisableAutoTranslate)
  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(() => {
-    const listener = (event: MessageEvent) => {
-      const data = event.data
-
-      if (data.type === 'setVideoInfo') {
-        dispatch(setInfos(data.infos))
-        dispatch(setTitle(data.title))
-        console.debug('video title: ', data.title)
-      }
-
-      if (data.type === 'setInfos') {
-        dispatch(setInfos(data.infos))
-        dispatch(setCurInfo(undefined))
-        dispatch(setCurFetched(false))
-        dispatch(setData(undefined))
-        // console.log('setInfos', data.infos)
-      }
-
-      if (data.type === 'setSubtitle') {
-        const data_ = data.data.data
-        data_?.body?.forEach((item: TranscriptItem, idx: number) => {
-          item.idx = idx
-        })
-        // dispatch(setCurInfo(data.data.info))
-        dispatch(setCurFetched(true))
-        dispatch(setData(data_))
-        // console.log('setSubtitle', data.data)
-      }
-
-      if (data.type === 'setCurrentTime') {
-        dispatch(setCurrentTime(data.data.currentTime))
-      }
-      if (data.type === 'setSettings') {
-        dispatch(setNoVideo(data.data.noVideo))
-        if (data.data.totalHeight) {
-          dispatch(setTotalHeight(Math.min(Math.max(data.data.totalHeight, TOTAL_HEIGHT_MIN), TOTAL_HEIGHT_MAX)))
-        }
-      }
+    if (reviewed === undefined && reviewActions && reviewActions >= 15) {
+      dispatch(setTempData({
+        reviewed: false
+      }))
    }
-
-    window.addEventListener('message', listener)
-
-    return () => {
-      window.removeEventListener('message', listener)
-    }
-  }, [dispatch, eventBus])
+  }, [reviewActions, dispatch, reviewed])

  // 有数据时自动展开
  useEffect(() => {
@@ -94,11 +61,16 @@ const useSubtitleService = () => {
        type: EVENT_EXPAND
      })
    }
-  }, [data, eventBus])
+  }, [data, eventBus, infos])

  // 当前未展示 & (未折叠 | 自动展开) & 有列表 => 展示第一个
  useEffect(() => {
-    if (!curInfo && (!fold || (envReady && envData.autoExpand)) && (infos != null) && infos.length > 0) {
+    let autoExpand = envData.autoExpand
+    // 如果显示在侧边栏，则自动展开
+    if (envData.sidePanel) {
+      autoExpand = true
+    }
+    if (!curInfo && (!fold || (envReady && autoExpand)) && (infos != null) && infos.length > 0) {
      dispatch(setCurInfo(infos[0]))
      dispatch(setCurFetched(false))
    }
@@ -106,17 +78,37 @@ const useSubtitleService = () => {
  // 获取
  useEffect(() => {
    if (curInfo && !curFetched) {
-      window.parent.postMessage({type: 'getSubtitle', info: curInfo}, '*')
+      sendInject('GET_SUBTITLE', {info: curInfo}).then(data => {
+        data?.body?.forEach((item: TranscriptItem, idx: number) => {
+          item.idx = idx
+        })
+        // dispatch(setCurInfo(data.data.info))
+        dispatch(setCurFetched(true))
+        dispatch(setData(data))
+
+        console.log('subtitle', data)
+      })
    }
  }, [curFetched, curInfo])

-  useEffect(() => {
+  useAsyncEffect(async () => {
    // 初始获取列表
-    window.parent.postMessage({type: 'refreshVideoInfo'}, '*')
-    // 初始获取设置信息
-    window.parent.postMessage({type: 'getSettings'}, '*')
+    sendInject('REFRESH_VIDEO_INFO', {force: true})
  }, [])

+  useAsyncEffect(async () => {
+    // 更新设置信息
+    sendInject('GET_VIDEO_ELEMENT_INFO', {}).then(info => {
+      dispatch(setNoVideo(info.noVideo))
+      if (envData.sidePanel) {
+        // get screen height
+        dispatch(setTotalHeight(window.innerHeight))
+      }else {
+        dispatch(setTotalHeight(Math.min(Math.max(info.totalHeight, TOTAL_HEIGHT_MIN), TOTAL_HEIGHT_MAX)))
+      }
+    })
+  }, [envData.sidePanel, infos])
+
  // 更新当前位置
  useEffect(() => {
    let curIdx
@@ -156,8 +148,15 @@ const useSubtitleService = () => {
    const items = data?.body
    if (items != null) {
      if (envData.summarizeEnable) { // 分段
-        let size = envData.words??WORDS_DEFAULT
-        size = Math.min(Math.max(size, WORDS_MIN), WORDS_MAX)
+        let size = envData.words
+        if (!size) { // 默认
+          if (envData.aiType === 'gemini') {
+            size = GEMINI_TOKENS*WORDS_RATE
+          } else {
+            size = getModelMaxTokens(envData)*WORDS_RATE
+          }
+        }
+        size = Math.max(size, WORDS_MIN)

        segments = []
        let transcriptItems: TranscriptItem[] = []
@@ -191,25 +190,27 @@ const useSubtitleService = () => {
      }
    }
    dispatch(setSegments(segments))
-  }, [data?.body, dispatch, envData.summarizeEnable, envData.words])
+  }, [data?.body, dispatch, envData])

-  // 每秒更新当前视频时间
+  // 每0.5秒更新当前视频时间
  useInterval(() => {
-    window.parent.postMessage({type: 'getCurrentTime'}, '*')
+    sendInject('GET_VIDEO_STATUS', {}).then(status => {
+      dispatch(setCurrentTime(status.currentTime))
+    })
  }, 500)

  // show translated text in the video
  useEffect(() => {
    if (hideOnDisableAutoTranslate && !autoTranslate) {
-      window.parent.postMessage({type: 'updateTransResult'}, '*')
+      sendInject('HIDE_TRANS', {})
      return
    }

    const transResult = curIdx?transResults[curIdx]:undefined
    if (transResult?.code === '200' && transResult.data) {
-      window.parent.postMessage({type: 'updateTransResult', result: transResult.data}, '*')
+      sendInject('UPDATE_TRANS_RESULT', {result: transResult.data})
    } else {
-      window.parent.postMessage({type: 'updateTransResult'}, '*')
+      sendInject('HIDE_TRANS', {})
    }
  }, [autoTranslate, curIdx, hideOnDisableAutoTranslate, transResults])
 }
--- a/src/hooks/useTranslate.ts
+++ b/src/hooks/useTranslate.ts
@@ -4,29 +4,32 @@ import {
  addTaskId,
  addTransResults,
  delTaskId,
+  mergeAskInfo,
  setLastSummarizeTime,
  setLastTransTime,
  setSummaryContent,
  setSummaryError,
-  setSummaryStatus
+  setSummaryStatus,
+  setReviewAction,
+  setTempData
 } from '../redux/envReducer'
 import {
  LANGUAGE_DEFAULT,
  LANGUAGES_MAP,
-  MODEL_DEFAULT,
  PROMPT_DEFAULTS,
+  PROMPT_TYPE_ASK,
  PROMPT_TYPE_TRANSLATE,
  SUMMARIZE_LANGUAGE_DEFAULT,
  SUMMARIZE_THRESHOLD,
  SUMMARIZE_TYPES,
  TRANSLATE_COOLDOWN,
  TRANSLATE_FETCH_DEFAULT,
-} from '../const'
+} from '../consts/const'
 import toast from 'react-hot-toast'
 import {useMemoizedFn} from 'ahooks/es'
-import {extractJsonArray, extractJsonObject} from '../util/biz_util'
-import {formatTime} from '../util/util'
-
+import {extractJsonArray, extractJsonObject, getModel} from '../utils/bizUtil'
+import {formatTime} from '../utils/util'
+import { useMessage } from './message'
 const useTranslate = () => {
  const dispatch = useAppDispatch()
  const data = useAppSelector(state => state.env.data)
@@ -37,7 +40,10 @@ const useTranslate = () => {
  const language = LANGUAGES_MAP[envData.language??LANGUAGE_DEFAULT]
  const summarizeLanguage = LANGUAGES_MAP[envData.summarizeLanguage??SUMMARIZE_LANGUAGE_DEFAULT]
  const title = useAppSelector(state => state.env.title)
-
+  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()
  /**
   * 获取下一个需要翻译的行
   * 会检测冷却
@@ -82,23 +88,39 @@ const useTranslate = () => {
        prompt = prompt.replaceAll('{{subtitles}}', lineStr)

        const taskDef: TaskDef = {
-          type: 'chatComplete',
+          type: envData.aiType === 'gemini'?'geminiChatComplete':'chatComplete',
          serverUrl: envData.serverUrl,
-          data: {
-            model: envData.model??MODEL_DEFAULT,
-            messages: [
-              {
-                role: 'user',
-                content: prompt,
+          data: envData.aiType === 'gemini'
+            ?{
+                contents: [
+                  {
+                    parts: [
+                      {
+                        text: prompt
+                      }
+                    ]
+                  }
+                ],
+                generationConfig: {
+                  maxOutputTokens: 2048
+                }
              }
-            ],
-            temperature: 0,
-            n: 1,
-            stream: false,
-          },
+            :{
+                model: getModel(envData),
+                messages: [
+                  {
+                    role: 'user',
+                    content: prompt,
+                  }
+                ],
+                temperature: 0.25,
+                n: 1,
+                stream: false,
+              },
          extra: {
            type: 'translate',
            apiKey: envData.apiKey,
+            geminiApiKey: envData.geminiApiKey,
            startIdx,
            size: lines.length,
          }
@@ -113,14 +135,22 @@ const useTranslate = () => {
          }
        })
        dispatch(addTransResults(result))
-        const task = await chrome.runtime.sendMessage({type: 'addTask', taskDef})
+        const task = await sendExtension('ADD_TASK', {taskDef})
        dispatch(addTaskId(task.id))
      }
    }
-  }, [data?.body, dispatch, envData.apiKey, envData.fetchAmount, envData.serverUrl, envData.prompts, title, language.name])
+  }, [data?.body, envData, language.name, title, dispatch])

  const addSummarizeTask = useCallback(async (type: SummaryType, segment: Segment) => {
-    if (segment.text.length >= SUMMARIZE_THRESHOLD && envData.apiKey) {
+    //review action
+    if (reviewed === undefined && !reviewAction) {
+      dispatch(setReviewAction(true))
+      dispatch(setTempData({
+        reviewActions: (reviewActions ?? 0) + 1
+      }))
+    }
+
+    if (segment.text.length >= SUMMARIZE_THRESHOLD) {
      let subtitles = ''
      for (const item of segment.items) {
        subtitles += formatTime(item.from) + ' ' + item.content + '\n'
@@ -135,34 +165,107 @@ const useTranslate = () => {
      prompt = prompt.replaceAll('{{segment}}', segment.text)

      const taskDef: TaskDef = {
-        type: 'chatComplete',
+        type: envData.aiType === 'gemini'?'geminiChatComplete':'chatComplete',
        serverUrl: envData.serverUrl,
-        data: {
-          model: envData.model??MODEL_DEFAULT,
-          messages: [
-            {
-              role: 'user',
-              content: prompt,
+        data: envData.aiType === 'gemini'
+          ?{
+              contents: [
+                {
+                  parts: [
+                    {
+                      text: prompt
+                    }
+                  ]
+                }
+              ],
+              generationConfig: {
+                maxOutputTokens: 2048
+              }
            }
-          ],
-          temperature: 0,
-          n: 1,
-          stream: false,
-        },
+          :{
+              model: getModel(envData),
+              messages: [
+                {
+                  role: 'user',
+                  content: prompt,
+                }
+              ],
+              temperature: 0.5,
+              n: 1,
+              stream: false,
+            },
        extra: {
          type: 'summarize',
          summaryType: type,
          startIdx: segment.startIdx,
          apiKey: envData.apiKey,
+          geminiApiKey: envData.geminiApiKey,
        }
      }
      console.debug('addSummarizeTask', taskDef)
      dispatch(setSummaryStatus({segmentStartIdx: segment.startIdx, type, status: 'pending'}))
      dispatch(setLastSummarizeTime(Date.now()))
-      const task = await chrome.runtime.sendMessage({type: 'addTask', taskDef})
+      const task = await sendExtension('ADD_TASK', {taskDef})
      dispatch(addTaskId(task.id))
    }
-  }, [dispatch, envData.apiKey, envData.prompts, envData.serverUrl, summarizeLanguage.name, title])
+  }, [dispatch, envData, summarizeLanguage.name, title])
+
+  const addAskTask = useCallback(async (id: string, segment: Segment, question: string) => {
+    if (segment.text.length >= SUMMARIZE_THRESHOLD) {
+      let prompt: string = envData.prompts?.[PROMPT_TYPE_ASK]??PROMPT_DEFAULTS[PROMPT_TYPE_ASK]
+      // replace params
+      prompt = prompt.replaceAll('{{language}}', summarizeLanguage.name)
+      prompt = prompt.replaceAll('{{title}}', title??'')
+      prompt = prompt.replaceAll('{{segment}}', segment.text)
+      prompt = prompt.replaceAll('{{question}}', question)
+
+      const taskDef: TaskDef = {
+        type: envData.aiType === 'gemini'?'geminiChatComplete':'chatComplete',
+        serverUrl: envData.serverUrl,
+        data: envData.aiType === 'gemini'
+          ?{
+              contents: [
+                {
+                  parts: [
+                    {
+                      text: prompt
+                    }
+                  ]
+                }
+              ],
+              generationConfig: {
+                maxOutputTokens: 2048
+              }
+            }
+          :{
+              model: getModel(envData),
+              messages: [
+                {
+                  role: 'user',
+                  content: prompt,
+                }
+              ],
+              temperature: 0.5,
+              n: 1,
+              stream: false,
+            },
+        extra: {
+          type: 'ask',
+          // startIdx: segment.startIdx,
+          apiKey: envData.apiKey,
+          geminiApiKey: envData.geminiApiKey,
+          askId: id,
+        }
+      }
+      console.debug('addAskTask', taskDef)
+      dispatch(mergeAskInfo({
+        id,
+        status: 'pending'
+      }))
+      const task = await sendExtension('ADD_TASK', {taskDef})
+      dispatch(addTaskId(task.id))
+    }
+  }, [dispatch, envData, summarizeLanguage.name, title])

  const handleTranslate = useMemoizedFn((task: Task, content: string) => {
    let map: {[key: string]: string} = {}
@@ -215,13 +318,24 @@ const useTranslate = () => {
    console.debug('setSummary', task.def.extra.startIdx, summaryType, obj, task.error)
  })

+  const handleAsk = useMemoizedFn((task: Task, content?: string) => {
+    dispatch(mergeAskInfo({
+      id: task.def.extra.askId,
+      content,
+      status: 'done',
+      error: task.error,
+    }))
+
+    console.debug('setAsk', content, task.error)
+  })
+
  const getTask = useCallback(async (taskId: string) => {
-    const taskResp = await chrome.runtime.sendMessage({type: 'getTask', taskId})
+    const taskResp = await sendExtension('GET_TASK', {taskId})
    if (taskResp.code === 'ok') {
      console.debug('getTask', taskResp.task)
      const task: Task = taskResp.task
      const taskType: string | undefined = task.def.extra?.type
-      const content = task.resp?.choices?.[0]?.message?.content?.trim()
+      const content = envData.aiType === 'gemini'?task.resp?.candidates[0]?.content?.parts[0]?.text?.trim():task.resp?.choices?.[0]?.message?.content?.trim()
      if (task.status === 'done') {
        // 异常提示
        if (task.error) {
@@ -234,14 +348,16 @@ const useTranslate = () => {
          handleTranslate(task, content)
        } else if (taskType === 'summarize') { // 总结
          handleSummarize(task, content)
+        } else if (taskType === 'ask') { // 总结
+          handleAsk(task, content)
        }
      }
    } else {
      dispatch(delTaskId(taskId))
    }
-  }, [dispatch, handleSummarize, handleTranslate])
+  }, [dispatch, envData.aiType, handleAsk, handleSummarize, handleTranslate])

-  return {getFetch, getTask, addTask, addSummarizeTask}
+  return {getFetch, getTask, addTask, addSummarizeTask, addAskTask}
 }

 export default useTranslate
--- a/src/inject/inject.ts
+++ b/src/inject/inject.ts
@@ -0,0 +1,369 @@
+import { TOTAL_HEIGHT_DEF, HEADER_HEIGHT, TOTAL_HEIGHT_MIN, TOTAL_HEIGHT_MAX, IFRAME_ID, STORAGE_ENV } from '@/consts/const'
+import InjectMessaging from '@/messaging/layer2/InjectMessaging'
+
+const debug = (...args: any[]) => {
+  console.debug('[Inject]', ...args)
+}
+
+(async function () {
+  // 如果路径不是/video或/list，则不注入
+  if (!location.pathname.startsWith('/video') && !location.pathname.startsWith('/list')) {
+    debug('Not inject')
+    return
+  }
+
+  //读取envData
+  const envDataStr = (await chrome.storage.sync.get(STORAGE_ENV))[STORAGE_ENV]
+  let sidePanel: boolean | null = null
+  let manualInsert: boolean | null = null
+  if (envDataStr) {
+    try {
+      const envData = JSON.parse(envDataStr)
+      debug('envData: ', envData)
+
+      sidePanel = envData.sidePanel
+      manualInsert = envData.manualInsert
+    } catch (error) {
+      console.error('Error parsing envData:', error)
+    }
+  }
+
+  const runtime: {
+    injectMessaging: InjectMessaging<AllExtensionMessages, AllInjectMessages, AllAPPMessages>
+    // lastV?: string | null
+    // lastVideoInfo?: VideoInfo
+
+    fold: boolean
+
+    videoElement?: HTMLVideoElement
+    videoElementHeight: number
+
+    showTrans: boolean
+    curTrans?: string
+  } = {
+    injectMessaging: new InjectMessaging(),
+    fold: true,
+    videoElementHeight: TOTAL_HEIGHT_DEF,
+    showTrans: false,
+  }
+
+  const getVideoElement = () => {
+    const videoWrapper = document.getElementById('bilibili-player')
+    return videoWrapper?.querySelector('video') as HTMLVideoElement | undefined
+  }
+
+  /**
+   * @return if changed
+   */
+  const refreshVideoElement = () => {
+    const newVideoElement = getVideoElement()
+    const newVideoElementHeight = (newVideoElement != null) ? (Math.min(Math.max(newVideoElement.offsetHeight, TOTAL_HEIGHT_MIN), TOTAL_HEIGHT_MAX)) : TOTAL_HEIGHT_DEF
+    if (newVideoElement === runtime.videoElement && Math.abs(newVideoElementHeight - runtime.videoElementHeight) < 1) {
+      return false
+    } else {
+      runtime.videoElement = newVideoElement
+      runtime.videoElementHeight = newVideoElementHeight
+      // update iframe height
+      updateIframeHeight()
+      return true
+    }
+  }
+
+  const createIframe = () => {
+    var danmukuBox = document.getElementById('danmukuBox')
+    if (danmukuBox) {
+      var vKey = ''
+      for (const key in danmukuBox?.dataset) {
+        if (key.startsWith('v-')) {
+          vKey = key
+          break
+        }
+      }
+
+      const iframe = document.createElement('iframe')
+      iframe.id = IFRAME_ID
+      iframe.src = chrome.runtime.getURL('index.html')
+      iframe.style.border = 'none'
+      iframe.style.width = '100%'
+      iframe.style.height = '44px'
+      iframe.style.marginBottom = '3px'
+      iframe.allow = 'clipboard-read; clipboard-write;'
+
+      if (vKey) {
+        iframe.dataset[vKey] = danmukuBox?.dataset[vKey]
+      }
+
+      //insert before first child
+      danmukuBox?.insertBefore(iframe, danmukuBox?.firstChild)
+
+      // show badge
+      runtime.injectMessaging.sendExtension('SHOW_FLAG', {
+        show: true
+      })
+
+      debug('iframe inserted')
+
+      return iframe
+    }
+  }
+
+  if (!sidePanel && !manualInsert) {
+    const timerIframe = setInterval(function () {
+      var danmukuBox = document.getElementById('danmukuBox')
+      if (danmukuBox) {
+        clearInterval(timerIframe)
+
+        //延迟插入iframe（插入太快，网络较差时容易出现b站网页刷新，原因暂时未知，可能b站的某种机制？）
+        setTimeout(createIframe, 1500)
+      }
+    }, 1000)
+  }
+
+  let aid: number | null = null
+  let title = ''
+  let pages: any[] = []
+  let pagesMap: Record<string, any> = {}
+
+  let lastAidOrBvid: string | null = null
+  const refreshVideoInfo = async (force: boolean = false) => {
+    if (force) {
+      lastAidOrBvid = null
+    }
+    if (!sidePanel) {
+      const iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement | undefined
+      if (!iframe) return
+    }
+
+    // fix: https://github.com/IndieKKY/bilibili-subtitle/issues/5
+    // 处理稍后再看的url( https://www.bilibili.com/list/watchlater?bvid=xxx&oid=xxx )
+    const pathSearchs: Record<string, string> = {}
+    location.search.slice(1).replace(/([^=&]*)=([^=&]*)/g, (matchs, a, b, c) => pathSearchs[a] = b)
+
+    // bvid
+    let aidOrBvid = pathSearchs.bvid // 默认为稍后再看
+    if (!aidOrBvid) {
+      let path = location.pathname
+      if (path.endsWith('/')) {
+        path = path.slice(0, -1)
+      }
+      const paths = path.split('/')
+      aidOrBvid = paths[paths.length - 1]
+    }
+
+    if (aidOrBvid !== lastAidOrBvid) {
+      // console.debug('refreshVideoInfo')
+
+      lastAidOrBvid = aidOrBvid
+      if (aidOrBvid) {
+        //aid,pages
+        let cid
+        let subtitles
+        if (aidOrBvid.toLowerCase().startsWith('av')) {//avxxx
+          aid = parseInt(aidOrBvid.slice(2))
+          pages = await fetch(`https://api.bilibili.com/x/player/pagelist?aid=${aid}`, { credentials: 'include' }).then(res => res.json()).then(res => res.data)
+          cid = pages[0].cid
+          title = pages[0].part
+          await fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
+            subtitles = res.data.subtitle.subtitles
+          })
+        } else {//bvxxx
+          await fetch(`https://api.bilibili.com/x/web-interface/view?bvid=${aidOrBvid}`, { credentials: 'include' }).then(res => res.json()).then(async res => {
+            title = res.data.title
+            aid = res.data.aid
+            cid = res.data.cid
+            pages = res.data.pages
+          })
+          await fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
+            subtitles = res.data.subtitle.subtitles
+          })
+        }
+
+        //pagesMap
+        pagesMap = {}
+        pages.forEach(page => {
+          pagesMap[page.page + ''] = page
+        })
+
+        debug('refreshVideoInfo: ', aid, cid, pages, subtitles)
+
+        //send setVideoInfo
+        runtime.injectMessaging.sendApp('SET_VIDEO_INFO', {
+          url: location.origin + location.pathname,
+          title,
+          aid,
+          pages,
+          infos: subtitles,
+        })
+      }
+    }
+  }
+
+  let lastAid: number | null = null
+  let lastCid: number | null = null
+  const refreshSubtitles = () => {
+    if (!sidePanel) {
+      const iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement | undefined
+      if (!iframe) return
+    }
+
+    const urlSearchParams = new URLSearchParams(window.location.search)
+    const p = urlSearchParams.get('p') || 1
+    const page = pagesMap[p]
+    if (!page) return
+    const cid = page.cid
+
+    if (aid !== lastAid || cid !== lastCid) {
+      debug('refreshSubtitles', aid, cid)
+
+      lastAid = aid
+      lastCid = cid
+      if (aid && cid) {
+        fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, {
+          credentials: 'include',
+        })
+          .then(res => res.json())
+          .then(res => {
+            // console.log('refreshSubtitles: ', aid, cid, res)
+            runtime.injectMessaging.sendApp('SET_INFOS', {
+              infos: res.data.subtitle.subtitles
+            })
+          })
+      }
+    }
+  }
+
+  const updateIframeHeight = () => {
+    const iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement | undefined
+    if (iframe != null) {
+      iframe.style.height = (runtime.fold ? HEADER_HEIGHT : runtime.videoElementHeight) + 'px'
+    }
+  }
+
+  const methods: {
+    [K in AllInjectMessages['method']]: (params: Extract<AllInjectMessages, { method: K }>['params'], context: MethodContext) => Promise<any>
+  } = {
+    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'
+        runtime.injectMessaging.sendExtension('SHOW_FLAG', {
+          show: iframe.style.display !== 'none'
+        })
+      } else {
+        createIframe()
+      }
+    },
+    FOLD: async (params) => {
+      runtime.fold = params.fold
+      updateIframeHeight()
+    },
+    MOVE: async (params) => {
+      const video = getVideoElement()
+      if (video != null) {
+        video.currentTime = params.time
+        if (params.togglePause) {
+          video.paused ? video.play() : video.pause()
+        }
+      }
+    },
+    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())
+    },
+    GET_VIDEO_STATUS: async (params) => {
+      const video = getVideoElement()
+      if (video != null) {
+        return {
+          paused: video.paused,
+          currentTime: video.currentTime
+        }
+      }
+    },
+    GET_VIDEO_ELEMENT_INFO: async (params) => {
+      refreshVideoElement()
+      return {
+        noVideo: runtime.videoElement == null,
+        totalHeight: runtime.videoElementHeight,
+      }
+    },
+    REFRESH_VIDEO_INFO: async (params) => {
+      refreshVideoInfo(params.force)
+    },
+    UPDATE_TRANS_RESULT: async (params) => {
+      runtime.showTrans = true
+      runtime.curTrans = params?.result
+
+      let text = document.getElementById('trans-result-text')
+      if (text) {
+        text.innerHTML = runtime.curTrans ?? ''
+      } else {
+        const container = document.getElementsByClassName('bpx-player-subtitle-panel-wrap')?.[0]
+        if (container) {
+          const div = document.createElement('div')
+          div.style.display = 'flex'
+          div.style.justifyContent = 'center'
+          div.style.margin = '2px'
+          text = document.createElement('text')
+          text.id = 'trans-result-text'
+          text.innerHTML = runtime.curTrans ?? ''
+          text.style.fontSize = '1rem'
+          text.style.padding = '5px'
+          text.style.color = 'white'
+          text.style.background = 'rgba(0, 0, 0, 0.4)'
+          div.append(text)
+
+          container.append(div)
+        }
+      }
+      text && (text.style.display = runtime.curTrans ? 'block' : 'none')
+    },
+    HIDE_TRANS: async (params) => {
+      runtime.showTrans = false
+      runtime.curTrans = undefined
+
+      let text = document.getElementById('trans-result-text')
+      if (text) {
+        text.style.display = 'none'
+      }
+    },
+    PLAY: async (params) => {
+      const { play } = params
+      const video = getVideoElement()
+      if (video != null) {
+        if (play) {
+          await video.play()
+        } else {
+          video.pause()
+        }
+      }
+    },
+    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
+
+      fetch(audioUrl).then(res => res.blob()).then(blob => {
+        const a = document.createElement('a')
+        a.href = URL.createObjectURL(blob)
+        a.download = `${title}.m4s`
+        a.click()
+      })
+    },
+  }
+
+  // 初始化injectMessage
+  runtime.injectMessaging.init(methods)
+
+  setInterval(() => {
+    if (!sidePanel) {
+      const iframe = document.getElementById(IFRAME_ID) as HTMLIFrameElement | undefined
+      if (!iframe || iframe.style.display === 'none') return
+    }
+
+    refreshVideoInfo().catch(console.error)
+    refreshSubtitles()
+  }, 1000)
+})()
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,7 +4,7 @@ import './index.less'
 import store from './store'
 import {Provider} from 'react-redux'
 import Router from './Router'
-import {APP_DOM_ID} from './const'
+import { APP_DOM_ID } from './consts/const'

 const body = document.querySelector('body')
 const app = document.createElement('div')
--- a/src/message-typings.d.ts
+++ b/src/message-typings.d.ts
@@ -0,0 +1,89 @@
+//extension
+interface ExtensionCloseSidePanelMessage extends ExtensionMessage {
+    method: 'CLOSE_SIDE_PANEL';
+  }
+  
+  interface ExtensionAddTaskMessage extends ExtensionMessage<{ taskDef: TaskDef }, Task> {
+    method: 'ADD_TASK';
+  }
+  
+  interface ExtensionGetTaskMessage extends ExtensionMessage<{ taskId: string }, {
+    code: 'ok'
+    task: Task
+  } | {
+    code: 'not_found'
+  }> {
+    method: 'GET_TASK';
+  }
+  
+  interface ExtensionShowFlagMessage extends ExtensionMessage<{ show: boolean }> {
+    method: 'SHOW_FLAG';
+  }
+  
+  type AllExtensionMessages = ExtensionCloseSidePanelMessage | ExtensionAddTaskMessage | ExtensionGetTaskMessage | ExtensionShowFlagMessage
+  
+
+
+
+  //inject
+  interface InjectToggleDisplayMessage extends InjectMessage<{}> {
+    method: 'TOGGLE_DISPLAY';
+  }
+  
+  interface InjectFoldMessage extends InjectMessage<{ fold: boolean }> {
+    method: 'FOLD';
+  }
+  
+  interface InjectMoveMessage extends InjectMessage<{ time: number, togglePause: boolean }> {
+    method: 'MOVE';
+  }
+  
+  interface InjectGetSubtitleMessage extends InjectMessage<{ info: any }> {
+    method: 'GET_SUBTITLE';
+  }
+  
+  interface InjectGetVideoStatusMessage extends InjectMessage<{}> {
+    method: 'GET_VIDEO_STATUS';
+  }
+  
+  interface InjectGetVideoElementInfoMessage extends InjectMessage<{}> {
+    method: 'GET_VIDEO_ELEMENT_INFO';
+  }
+  
+  interface InjectRefreshVideoInfoMessage extends InjectMessage<{ force: boolean }> {
+    method: 'REFRESH_VIDEO_INFO';
+  }
+  
+  interface InjectUpdateTransResultMessage extends InjectMessage<{ result: string }> {
+    method: 'UPDATE_TRANS_RESULT';
+  }
+  
+  interface InjectHideTransMessage extends InjectMessage<{}> {
+    method: 'HIDE_TRANS';
+  }
+  
+  interface InjectPlayMessage extends InjectMessage<{ play: boolean }> {
+    method: 'PLAY';
+  }
+  
+  interface InjectDownloadAudioMessage extends InjectMessage<{}> {
+    method: 'DOWNLOAD_AUDIO';
+  }
+  
+  type AllInjectMessages = InjectToggleDisplayMessage | InjectFoldMessage | InjectMoveMessage | InjectGetSubtitleMessage | InjectGetVideoStatusMessage | InjectGetVideoElementInfoMessage | InjectRefreshVideoInfoMessage | InjectUpdateTransResultMessage | InjectHideTransMessage | InjectPlayMessage | InjectDownloadAudioMessage
+  
+
+
+  
+  //app
+  interface AppSetInfosMessage extends AppMessage<{ infos: any }> {
+    method: 'SET_INFOS';
+  }
+  
+  interface AppSetVideoInfoMessage extends AppMessage<{ url: string, title: string, aid: number | null, pages: any, infos: any }> {
+    method: 'SET_VIDEO_INFO';
+  }
+  
+  type AllAPPMessages = AppSetInfosMessage | AppSetVideoInfoMessage
+  
+  
--- a/src/messaging/README.md
+++ b/src/messaging/README.md
@@ -0,0 +1,38 @@
+## 消息通信库封装
+此消息通信库设计为通用的，后面可能会提取到单独的项目中。
+
+### 消息端
+
+一共分3个端：
+
+1. 扩展端（`background.ts`）：扩展后台服务，整个浏览器最多一个实例。
+2. 注入端（`inject.ts`）：会注入到网页中运行，可以访问网页元素，每个网页可能n个实例（看注入的次数），但多个实例一般是不必要的，所以尽量控制在一个实例。
+3. 应用端（`App.tsx`）：会放入iframe中，然后iframe元素添加到网页上，每个iframe一个实例；或者options.html选项页面也是应用实例；或者sidepanel.html页面也是应用实例。
+
+### 消息协议
+
+协议分两层：
+
+1. （底层）一层协议为`Layer1Protocol`，内部封装了port，支持双向通信（发送与接收）
+2. （高层）二层协议分3个部分，基于一层协议：
+    1. `ExtensionMessaging`：扩展端的
+    2. `InjectMessaging`：注入端端
+    3. `useMessagingService`与`useMessaging`：应用端的
+
+### 通信方向
+
+通信分为6个方向：
+
+1. 扩展端 --> 注入端 
+2. 扩展端 --> 应用端
+3. 注入端 --> 扩展端
+4. 注入端 --> 应用端
+5. 应用端 --> 注入端
+6. 应用端 --> 扩展端
+
+应用端与注入端通信实现方式：通过扩展端中转。
+
+### 通信流程
+
+1. 注入端：通过port连接扩展端，然后发送握手信息（里面包含了此端的一些信息）
+2. 应用端：同注入端。
--- a/src/messaging/const.ts
+++ b/src/messaging/const.ts
@@ -0,0 +1,16 @@
+// 请求信息
+export type L2ReqMsg = {
+    from: 'extension' | 'inject' | 'app'
+    method: string
+    params?: any
+}
+
+// 响应信息
+export type L2ResMsg<L2Res = any> = {
+  code: number
+  msg?: string
+  data?: L2Res
+}
+
+export const TAG_TARGET_INJECT = 'target:inject'
+export const TAG_TARGET_APP = 'target:app'
--- a/src/messaging/layer1/Layer1Protocol.ts
+++ b/src/messaging/layer1/Layer1Protocol.ts
@@ -0,0 +1,114 @@
+// 请求信息
+type ReqMsg<L1Req = any, L1Res = any> = {
+  id: string
+  // 类型
+  type: 'req' | 'res'
+  // 请求
+  req?: L1Req
+  // 响应
+  res?: RespMsg<L1Res>
+}
+
+// 响应信息
+type RespMsg<T = any> = {
+  code: number
+  data?: T
+  msg?: string
+}
+
+// 处理函数
+type Handler<L1Req = any, L1Res = any> = (req: L1Req) => Promise<L1Res>
+
+// 创建一个 Layer1Protocol 类，用于持久监听 port 并通过消息 ID 处理响应，支持超时
+class Layer1Protocol<L1Req = any, L1Res = any> {
+  private port: chrome.runtime.Port
+  private timeout: number
+  private requests: Map<string, { resolve: (value: L1Res) => void, reject: (reason?: any) => void, timer: number }>
+  private handler: Handler<L1Req, L1Res>
+
+  constructor(handler: Handler<L1Req, L1Res>, port: chrome.runtime.Port, autoDispose = true, timeout = 30000) {  // 默认超时 30 秒
+    this.port = port;
+    this.timeout = timeout;
+    this.requests = new Map();
+    this.handler = handler
+
+    // 开始监听
+    this.port.onMessage.addListener(this._messageListener);
+    if (autoDispose) {
+      this.port.onDisconnect.addListener(this.dispose);
+    }
+  }
+
+  // 生成唯一 ID（简单示例，可以使用更复杂的生成策略）
+  private _generateUniqueId() {
+    return crypto.randomUUID()
+  }
+
+  private _messageListener = (msg: ReqMsg<L1Req, L1Res>) => {
+    const { id, type, req, res } = msg;
+    if (type === 'req') {
+      this.handler(req!).then(res => {
+        const response: RespMsg<L1Res> = {
+          code: 200,
+          data: res
+        }
+        this.port.postMessage({ id, type: 'res', res: response });
+      }).catch(error => {//业务错误
+        const response: RespMsg<L1Res> = {
+          code: 500,
+          msg: error instanceof Error ? error.message : String(error),
+        }
+        this.port.postMessage({ id, type: 'res', res: response });
+      });
+    } else if (type === 'res') {
+      if (this.requests.has(id)) {
+        const { resolve, reject, timer } = this.requests.get(id)!;
+        // 清除超时定时器
+        clearTimeout(timer);
+        // 移除消息 ID
+        this.requests.delete(id);
+        // 通过 ID 找到对应的 Promise 并 resolve
+        if (res!.code === 200) {
+          resolve(res!.data!);
+        } else {//业务错误
+          reject(new Error(`${res!.code}: ${res!.msg || 'Unknown error'}`));
+        }
+      } else {
+        console.error('unknown response message id: ', id)
+      }
+    } else {//语法格式错误
+      console.error('unknown message type: ', type)
+    }
+  }
+
+  dispose() {
+    this.port.onMessage.removeListener(this._messageListener);
+    if (this.port.onDisconnect) {
+      this.port.onDisconnect.removeListener(this.dispose);
+    }
+    this.requests.forEach(({ timer }) => clearTimeout(timer));
+    this.requests.clear();
+  }
+
+  // 使用 Promise 发送消息并等待响应，支持超时
+  sendMessage(req: L1Req): Promise<L1Res> {
+    const id = this._generateUniqueId();
+
+    return new Promise<L1Res>((resolve, reject) => {
+      // 设置一个超时定时器
+      const timer = setTimeout(() => {
+        // 超时后执行 reject 并从 Map 中删除
+        this.requests.delete(id);
+        reject(new Error(`Request timed out after ${this.timeout / 1000} seconds`));
+      }, this.timeout);
+
+      // 将 resolve 和 timer 函数与消息 ID 绑定，存入 Map
+      this.requests.set(id, { resolve, reject, timer });
+
+      // 发送消息，并附带 ID
+      this.port.postMessage({ id, type: 'req', req });
+    });
+  }
+}
+
+export default Layer1Protocol
--- a/src/messaging/layer2/ExtensionMessaging.ts
+++ b/src/messaging/layer2/ExtensionMessaging.ts
@@ -0,0 +1,134 @@
+import Layer1Protocol from '../layer1/Layer1Protocol'
+import { L2ReqMsg, L2ResMsg } from '../const'
+
+type PortContext<L2ReqMsg, L2ResMsg> = {
+  id: string
+  name: string //暂时没什么用
+  port: chrome.runtime.Port
+  l1protocol: Layer1Protocol<L2ReqMsg, L2ResMsg>
+  ready: boolean
+
+  tabId?: number // 所属tab
+  tags?: string[] // 标签，用来筛选消息发送目标
+}
+
+type L2MethodHandler<M extends ExtensionMessage, K, L2ReqMsg, L2ResMsg> = (params: Extract<M, { method: K }>['params'], context: MethodContext, portContext: PortContext<L2ReqMsg, L2ResMsg>) => Promise<any>
+type L2MethodHandlers<M extends ExtensionMessage, L2ReqMsg, L2ResMsg> = {
+  [K in M['method']]: L2MethodHandler<M, K, L2ReqMsg, L2ResMsg>
+}
+
+class ExtensionMessaging<M extends ExtensionMessage, AllInjectMessagesType extends InjectMessage, AllAPPMessagesType extends AppMessage> {
+  portIdToPort: Map<string, PortContext<L2ReqMsg, L2ResMsg>> = new Map()
+  methods?: L2MethodHandlers<M, L2ReqMsg, L2ResMsg>
+
+  debug = (...args: any[]) => {
+    console.debug('[Extension Messaging]', ...args)
+  }
+
+  init = (methods: L2MethodHandlers<M, L2ReqMsg, L2ResMsg>) => {
+    const innerMethods: L2MethodHandlers<MessagingExtensionMessages, L2ReqMsg, L2ResMsg> = {
+      _HANDSHAKE: async (params, context: MethodContext, portContext: PortContext<L2ReqMsg, L2ResMsg>) => {
+        const tags = params.tags
+        let tabId = params.tabId
+
+        //get current tabId
+        if (tabId == null) {
+          const tabs = await chrome.tabs.query({
+            active: true,
+            currentWindow: true,
+          })
+          tabId = tabs[0]?.id
+        }
+
+        portContext.tabId = tabId
+        portContext.tags = tags
+        portContext.ready = true
+      },
+      _ROUTE: async (params, context: MethodContext) => {
+        return this.broadcastMessageExact([context.tabId!], params.tags, params.method as any, params.params)
+      },
+    }
+
+    this.methods = { ...innerMethods, ...methods }
+
+    chrome.runtime.onConnect.addListener((port: chrome.runtime.Port) => {
+      this.debug('onConnect', port)
+
+      const id = crypto.randomUUID()
+      const name = port.name
+      // 创建消息处理器
+      const l1protocol = new Layer1Protocol<L2ReqMsg, L2ResMsg>(async (req: L2ReqMsg) => {
+        const { tabId } = portContext
+        const method = this.methods?.[req.method as keyof typeof this.methods]
+        // console.log('msg>>>', tabId, req, method != null)
+        if (method != null) {
+          return method(req.params, {
+            from: req.from,
+            event: req,
+            tabId,
+            // sender: portContext.port.sender,
+          }, portContext).then((data) => ({
+            code: 200,
+            data,
+          })).catch((err) => {
+            console.error(err)
+            return {
+              code: 500,
+              msg: err.message,
+            }
+          })
+        } else {
+          return {
+            code: 501,
+            msg: 'Unknown method: ' + req.method,
+          }
+        }
+      }, port)
+      // 创建portContext
+      const portContext: PortContext<L2ReqMsg, L2ResMsg> = { id, name, port, l1protocol, ready: false }
+      this.portIdToPort.set(id, portContext)
+
+      // 监听断开连接
+      port.onDisconnect.addListener(() => {
+        this.debug('onDisconnect', id)
+        this.portIdToPort.delete(id)
+      })
+    })
+  }
+
+  //tags 如果为null，则不检查tags，如果为空数组，则不会发送消息
+  //返回：最后一个响应(因此如果只发送给一个tab，则返回的是该tab的响应)
+  broadcastMessageExact = async <M extends AllInjectMessagesType | AllAPPMessagesType, K extends M['method']>(tabIds: number[], tags: string[] | null, method: K, params?: Extract<M, { method: K }>['params']): Promise<Extract<M, { method: K }>['return']> => {
+    // 如果tags为空数组，则不会发送消息
+    if (tags != null && tags.length === 0) {
+      return
+    }
+
+    let res: L2ResMsg | undefined
+    for (const portContext of this.portIdToPort.values()) {
+      //check tabId
+      if (tabIds.includes(portContext.tabId!)) {
+        //check tags
+        if (tags == null || tags.some(tag => portContext.tags?.includes(tag))) {
+          try {
+            res = await portContext.l1protocol.sendMessage({ method, params, from: 'extension' })
+          } catch (e) {
+            console.error('send message to port error', portContext.id, e)
+          }
+        }
+      }
+    }
+    return res?.data
+  }
+
+  broadcastMessage = async <M extends AllInjectMessagesType | AllAPPMessagesType, K extends M['method']>(ignoreTabIds: number[] | undefined | null, tags: string[], method: K, params?: Extract<M, { method: K }>['params']): Promise<Extract<M, { method: K }>['return']> => {
+    const tabs = await chrome.tabs.query({
+      discarded: false,
+    })
+    const tabIds: number[] = tabs.map(tab => tab.id).filter(tabId => tabId != null) as number[]
+    const filteredTabIds: number[] = tabIds.filter(tabId => !ignoreTabIds?.includes(tabId))
+    return await this.broadcastMessageExact(filteredTabIds, tags, method, params) 
+  }
+}
+
+export default ExtensionMessaging
--- a/src/messaging/layer2/InjectMessaging.ts
+++ b/src/messaging/layer2/InjectMessaging.ts
@@ -0,0 +1,103 @@
+import Layer1Protocol from '../layer1/Layer1Protocol'
+import { L2ReqMsg, L2ResMsg, TAG_TARGET_APP, TAG_TARGET_INJECT } from '../const'
+
+class InjectMessaging<AllExtensionMessagesType extends ExtensionMessage, AllInjectMessagesType extends InjectMessage, AllAPPMessagesType extends AppMessage> {
+    port?: chrome.runtime.Port
+    l1protocol?: Layer1Protocol<L2ReqMsg, L2ResMsg>
+    //类实例
+    methods?: {
+        [K in AllInjectMessagesType['method']]: (params: Extract<AllInjectMessagesType, { method: K }>['params'], context: MethodContext) => Promise<any>
+    }
+
+    debug = (...args: any[]) => {
+        console.debug('[Inject Messaging]', ...args)
+    }
+
+    messageHandler = async (req: L2ReqMsg): Promise<L2ResMsg> => {
+        this.debug(`[${req.from}] ${req.method}`, JSON.stringify(req))
+
+        // check event target
+        // if (req.target !== MESSAGE_TARGET_INJECT) return Promise.resolve({
+        //     success: false,
+        //     code: 501,
+        //     message: 'Target Error: ' + req.target,
+        // })
+
+        const method = this.methods?.[req.method as keyof typeof this.methods]
+        if (method != null) {
+            return method(req.params, {
+                from: req.from,
+                event: req,
+                // sender,
+            }).then(data => {
+                // debug(`${source} <= `, event.method, JSON.stringify(data))
+                return {
+                    code: 200,
+                    data,
+                }
+            }).catch(err => {
+                console.error(err)
+                let msg
+                if (err instanceof Error) {
+                    msg = err.message
+                } else if (typeof err === 'string') {
+                    msg = err
+                } else {
+                    msg = 'error: ' + JSON.stringify(err)
+                }
+                return {
+                    code: 500,
+                    msg,
+                }
+            })
+        } else {
+            return {
+                code: 501,
+                msg: 'Unknown method: ' + req.method,
+            }
+        }
+    }
+
+    init(methods: {
+        [K in AllInjectMessagesType['method']]: (params: Extract<AllInjectMessagesType, { method: K }>['params'], context: MethodContext) => Promise<any>
+    }) {
+        this.methods = methods
+        this.port = chrome.runtime.connect(import.meta.env.VITE_EXTENSION_ID, {
+            name: 'bilibili-inject',
+        })
+        this.l1protocol = new Layer1Protocol<L2ReqMsg, L2ResMsg>(this.messageHandler, this.port)
+        //握手
+        this.l1protocol.sendMessage({
+            from: 'inject',
+            method: '_HANDSHAKE',
+            params: {
+                tags: [TAG_TARGET_INJECT],
+            },
+        })
+    }
+
+    sendExtension = async <M extends AllExtensionMessagesType | MessagingExtensionMessages, K extends M['method']>(method: K, params?: Extract<M, { method: K }>['params']): Promise<Extract<M, { method: K }>['return']> => {
+        return await this.l1protocol!.sendMessage({
+            from: 'inject',
+            method,
+            params: params ?? {},
+        }).then((res) => {
+            if (res.code === 200) {
+                return res.data
+            } else {
+                throw new Error(res.msg)
+            }
+        })
+    }
+
+    sendApp = async <M extends AllAPPMessagesType, K extends M['method']>(method: K, params?: Extract<M, { method: K }>['params']): Promise<Extract<M, { method: K }>['return']> => {
+        return this.sendExtension('_ROUTE' as any, {
+            tags: [TAG_TARGET_APP],
+            method,
+            params,
+        })
+    }
+
+}
+
+export default InjectMessaging
--- a/src/messaging/layer2/useMessaging.ts
+++ b/src/messaging/layer2/useMessaging.ts
@@ -0,0 +1,37 @@
+import { msgWaiter } from './useMessagingService'
+import { useCallback } from 'react'
+import Layer1Protocol from '../layer1/Layer1Protocol'
+import { L2ReqMsg, L2ResMsg, TAG_TARGET_INJECT } from '../const'
+
+const useMessaging = <AllExtensionMessagesType extends ExtensionMessage, AllInjectMessagesType extends InjectMessage>() => {
+    const sendExtension = useCallback(async <M extends AllExtensionMessagesType | MessagingExtensionMessages, K extends M['method']>(method: K, params?: Extract<M, { method: K }>['params']): Promise<Extract<M, { method: K }>['return']> => {
+        // wait
+        const pmh = await msgWaiter.wait() as Layer1Protocol<L2ReqMsg, L2ResMsg>
+        // send message
+        const res = await pmh.sendMessage({
+            from: 'app',
+            method,
+            params: params ?? {},
+        })
+        if (res.code === 200) {
+            return res.data
+        } else {
+            throw new Error(res.msg)
+        }
+    }, [])
+
+    const sendInject = useCallback(async <M extends AllInjectMessagesType, K extends M['method']>(method: K, params?: Extract<M, { method: K }>['params']): Promise<Extract<M, { method: K }>['return']> => {
+        return await sendExtension('_ROUTE' as any, {
+            tags: [TAG_TARGET_INJECT],
+            method,
+            params: params ?? {},
+        })
+    }, [])
+
+    return {
+        sendExtension,
+        sendInject
+    }
+}
+
+export default useMessaging
--- a/src/messaging/layer2/useMessagingService.ts
+++ b/src/messaging/layer2/useMessagingService.ts
@@ -0,0 +1,93 @@
+import { useCallback, useMemo } from 'react'
+import { Waiter } from '@kky002/kky-util'
+import Layer1Protocol from '../layer1/Layer1Protocol'
+import { L2ReqMsg, L2ResMsg, TAG_TARGET_APP } from '../const'
+
+const debug = (...args: any[]) => {
+  console.debug('[App Messaging]', ...args)
+}
+
+let l1protocolInit: boolean = false
+let l1protocol: Layer1Protocol<L2ReqMsg, L2ResMsg> | undefined
+// let postInjectMessage: (method: string, params: PostMessagePayload) => Promise<PostMessageResponse> | undefined
+
+export const msgWaiter = new Waiter<Layer1Protocol<L2ReqMsg, L2ResMsg>>(() => ({
+  finished: l1protocolInit,
+  data: l1protocol!,
+}), 100, 15000)
+
+const useMessagingService = <AllAPPMessagesType extends AppMessage>(methods?: {
+  [K in AllAPPMessagesType['method']]: (params: Extract<AllAPPMessagesType, { method: K }>['params'], context: MethodContext) => Promise<any>
+}) => {
+  const messageHandler = useCallback(async (req: L2ReqMsg): Promise<L2ResMsg> => {
+    debug(`[${req.from}] ${req.method}`, JSON.stringify(req))
+
+    // // check event target
+    // if (req.target !== MESSAGE_TARGET_APP) return {
+    //   code: 501,
+    //   msg: 'Target Error: ' + req.target,
+    // }
+
+    const method = methods?.[req.method as keyof typeof methods]
+    if (method != null) {
+      return method(req.params, {
+        from: req.from,
+        event: req,
+      }).then(data => {
+        // debug(`${source} <= `, event.method, JSON.stringify(data))
+        return {
+          code: 200,
+          data,
+        }
+      }).catch(err => {
+        console.error(err)
+        let msg
+        if (err instanceof Error) {
+          msg = err.message
+        } else if (typeof err === 'string') {
+          msg = err
+        } else {
+          msg = 'error: ' + JSON.stringify(err)
+        }
+        return {
+          code: 500,
+          msg,
+        }
+      })
+    } else {
+      return {
+        code: 501,
+        msg: 'Unknown method: ' + req.method,
+      }
+    }
+  }, [methods])
+
+  const port = useMemo(() => {
+    return chrome.runtime.connect(import.meta.env.VITE_EXTENSION_ID, {
+      name: 'bilibili-app',
+    })
+  }, [])
+  l1protocol = useMemo(() => {
+    if (messageHandler && port) {
+      const pmh = new Layer1Protocol<L2ReqMsg, L2ResMsg>(messageHandler, port)
+  
+      //get tabId from url params
+      let tabIdStr = window.location.search.split('tabId=')[1]
+      let tabId = tabIdStr ? parseInt(tabIdStr) : undefined
+      // 初始化
+      pmh.sendMessage({
+          from: 'app',
+          method: '_HANDSHAKE',
+          params: {
+              tabId,
+              tags: [TAG_TARGET_APP],
+          },
+      })
+      l1protocolInit = true
+  
+      return pmh
+    }
+  }, [messageHandler, port])
+}
+
+export default useMessagingService
--- a/src/messaging/messaging-typings.d.ts
+++ b/src/messaging/messaging-typings.d.ts
@@ -0,0 +1,28 @@
+interface Message<T = any, R = any> {
+    method: string
+    params: T
+    return: R
+}
+
+interface ExtensionMessage<T = any, R = any> extends Message<T, R> {
+}
+
+interface InjectMessage<T = any, R = any> extends Message<T, R> {
+}
+
+interface AppMessage<T = any, R = any> extends Message<T, R> {
+}
+
+
+
+
+
+interface ExtensionHandshakeMessage extends ExtensionMessage<{ tabId?: number, tags: string[] }> {
+    method: '_HANDSHAKE';
+}
+
+interface ExtensionRouteMessage extends ExtensionMessage<{ tags: string[], method: string, params: any }> {
+    method: '_ROUTE';
+}
+
+type MessagingExtensionMessages = ExtensionHandshakeMessage | ExtensionRouteMessage
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -0,0 +1,53 @@
+import React, {useCallback, useContext, useEffect} from 'react'
+import {useAppDispatch, useAppSelector} from '../hooks/redux'
+import Header from '../components/Header'
+import Body from '../components/Body'
+import useSubtitleService from '../hooks/useSubtitleService'
+import {EVENT_EXPAND} from '../consts/const'
+import {EventBusContext} from '../Router'
+import useTranslateService from '../hooks/useTranslateService'
+import {setTheme} from '../utils/bizUtil'
+import useSearchService from '../hooks/useSearchService'
+import {setFold} from '../redux/envReducer'
+import { useMessage } from '@/hooks/message'
+
+function App() {
+  const dispatch = useAppDispatch()
+  const fold = useAppSelector(state => state.env.fold)
+  const eventBus = useContext(EventBusContext)
+  const totalHeight = useAppSelector(state => state.env.totalHeight)
+  const {sendInject} = useMessage()
+  const envData = useAppSelector(state => state.env.envData)
+  
+  const foldCallback = useCallback(() => {
+    dispatch(setFold(!fold))
+    sendInject('FOLD', {fold: !fold})
+  }, [dispatch, fold, sendInject])
+
+  // handle event
+  eventBus.useSubscription((event: any) => {
+    if (event.type === EVENT_EXPAND) {
+      if (fold) {
+        foldCallback()
+      }
+    }
+  })
+
+  // theme改变时，设置主题
+  useEffect(() => {
+    setTheme(envData.theme)
+  }, [envData.theme])
+
+  useSubtitleService()
+  useTranslateService()
+  useSearchService()
+
+  return <div className='select-none w-full' style={{
+    height: fold?undefined:`${totalHeight}px`,
+  }}>
+    <Header foldCallback={foldCallback}/>
+    {!fold && <Body/>}
+  </div>
+}
+
+export default App
--- a/src/pages/OptionsPage.tsx
+++ b/src/pages/OptionsPage.tsx
@@ -0,0 +1,432 @@
+import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
+import {setEnvData} from '../redux/envReducer'
+import {useAppDispatch, useAppSelector} from '../hooks/redux'
+import {
+  ASK_ENABLED_DEFAULT,
+  CUSTOM_MODEL_TOKENS,
+  DEFAULT_SERVER_URL_OPENAI,
+  GEMINI_TOKENS,
+  LANGUAGE_DEFAULT,
+  LANGUAGES,
+  MODEL_DEFAULT,
+  MODEL_MAP,
+  MODEL_TIP,
+  MODELS,
+  PROMPT_DEFAULTS,
+  PROMPT_TYPES,
+  SUMMARIZE_LANGUAGE_DEFAULT,
+  TRANSLATE_FETCH_DEFAULT,
+  TRANSLATE_FETCH_MAX,
+  TRANSLATE_FETCH_MIN,
+  TRANSLATE_FETCH_STEP,
+  WORDS_RATE,
+} from '../consts/const'
+import {IoWarning} from 'react-icons/all'
+import classNames from 'classnames'
+import toast from 'react-hot-toast'
+import {useBoolean, useEventTarget} from 'ahooks'
+import {useEventChecked} from '@kky002/kky-hooks'
+import { useMessage } from '@/hooks/message'
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
+
+const OptionCard = ({ title, children, defaultExpanded = true }: { title: React.ReactNode; children: React.ReactNode; defaultExpanded?: boolean }) => {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <div className="card bg-base-200 shadow-xl mb-4">
+      <div className="card-body p-4">
+        <h2 className="card-title flex justify-between cursor-pointer" onClick={() => setIsExpanded(!isExpanded)}>
+          {title}
+          {isExpanded ? <FaChevronUp /> : <FaChevronDown />}
+        </h2>
+        {isExpanded && <div className="mt-4">{children}</div>}
+      </div>
+    </div>
+  );
+};
+
+const FormItem = (props: {
+  title: ShowElement
+  tip?: string
+  htmlFor?: string
+} & PropsWithChildren) => {
+  const {title, tip, htmlFor, children} = props
+  return (
+    <div className='flex items-center gap-4 mb-2'>
+      <div className={classNames('w-1/3 text-right', tip && 'tooltip tooltip-right z-50')} data-tip={tip}>
+        <label className={classNames('font-medium', tip && 'border-b border-dotted border-current pb-[2px]')} htmlFor={htmlFor}>{title}</label>
+      </div>
+      <div className='w-2/3'>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+const OptionsPage = () => {
+  const dispatch = useAppDispatch()
+  const envData = useAppSelector(state => state.env.envData)
+  const {sendExtension} = useMessage()
+  const {value: sidePanelValue, onChange: setSidePanelValue} = useEventChecked(envData.sidePanel)
+  const {value: autoInsertValue, onChange: setAutoInsertValue} = useEventChecked(!envData.manualInsert)
+  const {value: autoExpandValue, onChange: setAutoExpandValue} = useEventChecked(envData.autoExpand)
+  // const {value: autoScrollValue, onChange: setAutoScrollValue} = useEventChecked(envData.autoScroll)
+  const {value: translateEnableValue, onChange: setTranslateEnableValue} = useEventChecked(envData.translateEnable)
+  const {value: summarizeEnableValue, onChange: setSummarizeEnableValue} = useEventChecked(envData.summarizeEnable)
+  const {value: searchEnabledValue, onChange: setSearchEnabledValue} = useEventChecked(envData.searchEnabled)
+  const {value: askEnabledValue, onChange: setAskEnabledValue} = useEventChecked(envData.askEnabled??ASK_ENABLED_DEFAULT)
+  const {value: cnSearchEnabledValue, onChange: setCnSearchEnabledValue} = useEventChecked(envData.cnSearchEnabled)
+  const {value: summarizeFloatValue, onChange: setSummarizeFloatValue} = useEventChecked(envData.summarizeFloat)
+  const [apiKeyValue, { onChange: onChangeApiKeyValue }] = useEventTarget({initialValue: envData.apiKey??''})
+  const [serverUrlValue, setServerUrlValue] = useState(envData.serverUrl)
+  const [geminiApiKeyValue, { onChange: onChangeGeminiApiKeyValue }] = useEventTarget({initialValue: envData.geminiApiKey??''})
+  const [languageValue, { onChange: onChangeLanguageValue }] = useEventTarget({initialValue: envData.language??LANGUAGE_DEFAULT})
+  const [modelValue, { onChange: onChangeModelValue }] = useEventTarget({initialValue: envData.model??MODEL_DEFAULT})
+  const [customModelValue, { onChange: onChangeCustomModelValue }] = useEventTarget({initialValue: envData.customModel})
+  const [customModelTokensValue, setCustomModelTokensValue] = useState(envData.customModelTokens)
+  const [summarizeLanguageValue, { onChange: onChangeSummarizeLanguageValue }] = useEventTarget({initialValue: envData.summarizeLanguage??SUMMARIZE_LANGUAGE_DEFAULT})
+  const [hideOnDisableAutoTranslateValue, setHideOnDisableAutoTranslateValue] = useState(envData.hideOnDisableAutoTranslate)
+  const [themeValue, setThemeValue] = useState(envData.theme)
+  const [fontSizeValue, setFontSizeValue] = useState(envData.fontSize)
+  const [aiTypeValue, setAiTypeValue] = useState(envData.aiType)
+  const [transDisplayValue, setTransDisplayValue] = useState(envData.transDisplay)
+  const [wordsValue, setWordsValue] = useState<number | undefined>(envData.words)
+  const [fetchAmountValue, setFetchAmountValue] = useState(envData.fetchAmount??TRANSLATE_FETCH_DEFAULT)
+  const [promptsFold, {toggle: togglePromptsFold}] = useBoolean(true)
+  const [promptsValue, setPromptsValue] = useState<{[key: string]: string}>(envData.prompts??{})
+  // const wordsList = useMemo(() => {
+  //   const list = []
+  //   for (let i = WORDS_MIN; i <= WORDS_MAX; i += WORDS_STEP) {
+  //     list.push(i)
+  //   }
+  //   return list
+  // }, [])
+  const transFetchAmountList = useMemo(() => {
+    const list = []
+    for (let i = TRANSLATE_FETCH_MIN; i <= TRANSLATE_FETCH_MAX; i += TRANSLATE_FETCH_STEP) {
+      list.push(i)
+    }
+    return list
+  }, [])
+  const apiKeySetted = useMemo(() => {
+    if (aiTypeValue === 'gemini') {
+      return !!geminiApiKeyValue
+    }
+    return !!apiKeyValue
+  }, [aiTypeValue, apiKeyValue, geminiApiKeyValue])
+
+  const onChangeHideOnDisableAutoTranslate = useCallback((e: any) => {
+    setHideOnDisableAutoTranslateValue(e.target.checked)
+  }, [])
+
+  const onSave = useCallback(() => {
+    dispatch(setEnvData({
+      sidePanel: sidePanelValue,
+      manualInsert: !autoInsertValue,
+      autoExpand: autoExpandValue,
+      aiType: aiTypeValue,
+      apiKey: apiKeyValue,
+      serverUrl: serverUrlValue,
+      model: modelValue,
+      customModel: customModelValue,
+      customModelTokens: customModelTokensValue,
+      geminiApiKey: geminiApiKeyValue,
+      translateEnable: translateEnableValue,
+      language: languageValue,
+      hideOnDisableAutoTranslate: hideOnDisableAutoTranslateValue,
+      theme: themeValue,
+      transDisplay: transDisplayValue,
+      summarizeEnable: summarizeEnableValue,
+      summarizeFloat: summarizeFloatValue,
+      summarizeLanguage: summarizeLanguageValue,
+      words: wordsValue,
+      fetchAmount: fetchAmountValue,
+      fontSize: fontSizeValue,
+      prompts: promptsValue,
+      searchEnabled: searchEnabledValue,
+      cnSearchEnabled: cnSearchEnabledValue,
+      askEnabled: askEnabledValue,
+    }))
+    toast.success('保存成功')
+    sendExtension('CLOSE_SIDE_PANEL')
+    // 3秒后关闭
+    setTimeout(() => {
+      window.close()
+    }, 3000)
+  }, [dispatch, sendExtension, sidePanelValue, autoInsertValue, autoExpandValue, aiTypeValue, apiKeyValue, serverUrlValue, modelValue, customModelValue, customModelTokensValue, geminiApiKeyValue, translateEnableValue, languageValue, hideOnDisableAutoTranslateValue, themeValue, transDisplayValue, summarizeEnableValue, summarizeFloatValue, summarizeLanguageValue, wordsValue, fetchAmountValue, fontSizeValue, promptsValue, searchEnabledValue, cnSearchEnabledValue, askEnabledValue])
+
+  const onCancel = useCallback(() => {
+    window.close()
+  }, [])
+
+  const onFetchAmountChange = useCallback((e: any) => {
+    setFetchAmountValue(parseInt(e.target.value))
+  }, [])
+
+  const onWordsChange = useCallback((e: any) => {
+    setWordsValue(parseInt(e.target.value))
+  }, [])
+
+  const onSel1 = useCallback(() => {
+    setTransDisplayValue('originPrimary')
+  }, [])
+
+  const onSel2 = useCallback(() => {
+    setTransDisplayValue('targetPrimary')
+  }, [])
+
+  const onSel3 = useCallback(() => {
+    setTransDisplayValue('target')
+  }, [])
+
+  const onSelTheme1 = useCallback(() => {
+    setThemeValue('system')
+  }, [])
+
+  const onSelTheme2 = useCallback(() => {
+    setThemeValue('light')
+  }, [])
+
+  const onSelTheme3 = useCallback(() => {
+    setThemeValue('dark')
+  }, [])
+
+  const onSelFontSize1 = useCallback(() => {
+    setFontSizeValue('normal')
+  }, [])
+
+  const onSelFontSize2 = useCallback(() => {
+    setFontSizeValue('large')
+  }, [])
+
+  const onSelOpenai = useCallback(() => {
+    setAiTypeValue('openai')
+  }, [])
+
+  const onSelGemini = useCallback(() => {
+    setAiTypeValue('gemini')
+  }, [])
+
+  return (
+    <div className='container mx-auto max-w-3xl p-4'>
+      <OptionCard title="通用配置">
+        <FormItem title='侧边栏' htmlFor='sidePanel' tip='字幕列表是否显示在侧边栏'>
+          <input id='sidePanel' type='checkbox' className='toggle toggle-primary' checked={sidePanelValue}
+                 onChange={setSidePanelValue}/>
+        </FormItem>
+        {!sidePanelValue && <FormItem title='自动插入' htmlFor='autoInsert' tip='是否自动插入字幕列表(可以手动点击扩展图标插入)'>
+          <input id='autoInsert' type='checkbox' className='toggle toggle-primary' checked={autoInsertValue}
+                 onChange={setAutoInsertValue}/>
+        </FormItem>}
+        {!sidePanelValue && <FormItem title='自动展开' htmlFor='autoExpand' tip='是否视频有字幕时自动展开字幕列表'>
+          <input id='autoExpand' type='checkbox' className='toggle toggle-primary' checked={autoExpandValue}
+                 onChange={setAutoExpandValue}/>
+        </FormItem>}
+        <FormItem title='主题'>
+          <div className="btn-group">
+            <button onClick={onSelTheme1} className={classNames('btn btn-sm no-animation', (!themeValue || themeValue === 'system')?'btn-active':'')}>系统</button>
+            <button onClick={onSelTheme2} className={classNames('btn btn-sm no-animation', themeValue === 'light'?'btn-active':'')}>浅色</button>
+            <button onClick={onSelTheme3} className={classNames('btn btn-sm no-animation', themeValue === 'dark'?'btn-active':'')}>深色</button>
+          </div>
+        </FormItem>
+        <FormItem title='字体大小'>
+          <div className="btn-group">
+            <button onClick={onSelFontSize1} className={classNames('btn btn-sm no-animation', (!fontSizeValue || fontSizeValue === 'normal')?'btn-active':'')}>普通</button>
+            <button onClick={onSelFontSize2} className={classNames('btn btn-sm no-animation', fontSizeValue === 'large'?'btn-active':'')}>加大</button>
+          </div>
+        </FormItem>
+        <FormItem title='AI类型' tip='OPENAI质量更高'>
+          <div className="btn-group">
+            <button onClick={onSelOpenai} className={classNames('btn btn-sm', (!aiTypeValue || aiTypeValue === 'openai')?'btn-active':'')}>OpenAI</button>
+            <button onClick={onSelGemini} className={classNames('btn btn-sm', aiTypeValue === 'gemini'?'btn-active':'')}>Gemini</button>
+          </div>
+        </FormItem>
+      </OptionCard>
+
+      <OptionCard title="AI 配置">
+        {(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='ApiKey' htmlFor='apiKey'>
+          <input id='apiKey' type='text' className='input input-sm input-bordered w-full' placeholder='sk-xxx'
+                 value={apiKeyValue} onChange={onChangeApiKeyValue}/>
+        </FormItem>}
+        {(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='服务器' htmlFor='serverUrl'>
+          <input id='serverUrl' type='text' className='input input-sm input-bordered w-full'
+                 placeholder={DEFAULT_SERVER_URL_OPENAI} value={serverUrlValue}
+                 onChange={e => setServerUrlValue(e.target.value)}/>
+        </FormItem>}
+        {(!aiTypeValue || aiTypeValue === 'openai') && <div>
+          <div className='desc text-sm text-center'>
+            <div className='flex justify-center font-semibold'>【官方地址】</div>
+            <div>官方网址：<a className='link link-primary' href='https://platform.openai.com/' target='_blank'
+                             rel="noreferrer">点击访问</a></div>
+            <div>服务器地址：<a className='link link-primary'
+                               onClick={() => setServerUrlValue(DEFAULT_SERVER_URL_OPENAI)}
+                               rel='noreferrer'>点击设置</a></div>
+            {/* <div className='flex justify-center font-semibold'>【第三方代理】</div> */}
+            {/* <div>代理网址：<a className='link link-primary' href='https://api.openai-up.com/register?aff=varM' */}
+            {/*                 target='_blank' */}
+            {/*                 rel="noreferrer">点击访问</a></div> */}
+            {/* <div>服务器地址：<a className='link link-primary' */}
+            {/*                   onClick={() => setServerUrlValue('https://api.openai-up.com')} */}
+            {/*                   rel='noreferrer'>点击设置</a></div> */}
+            {/* <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前价格不到官方价格的6折<FaGripfire/></div> */}
+          </div>
+        </div>}
+        {(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>
+          <select id='modelSel' className="select select-sm select-bordered" value={modelValue}
+                  onChange={onChangeModelValue}>
+            {MODELS.map(model => <option key={model.code} value={model.code}>{model.name}</option>)}
+          </select>
+        </FormItem>}
+        {(!aiTypeValue || aiTypeValue === 'openai') && <div className='desc text-sm'>
+          {MODEL_TIP}
+        </div>}
+        {modelValue === 'custom' && <FormItem title='模型名' htmlFor='customModel'>
+          <input id='customModel' type='text' className='input input-sm input-bordered w-full' placeholder='llama2'
+                 value={customModelValue} onChange={onChangeCustomModelValue}/>
+        </FormItem>}
+        {modelValue === 'custom' && <FormItem title='Token上限' htmlFor='customModelTokens'>
+          <input id='customModelTokens' type='number' className='input input-sm input-bordered w-full'
+                 placeholder={'' + CUSTOM_MODEL_TOKENS}
+                 value={customModelTokensValue}
+                 onChange={e => setCustomModelTokensValue(e.target.value ? parseInt(e.target.value) : undefined)}/>
+        </FormItem>}
+        {aiTypeValue === 'gemini' && <FormItem title='ApiKey' htmlFor='geminiApiKey'>
+          <input id='geminiApiKey' type='text' className='input input-sm input-bordered w-full' placeholder='xxx'
+                 value={geminiApiKeyValue} onChange={onChangeGeminiApiKeyValue}/>
+        </FormItem>}
+        {aiTypeValue === 'gemini' && <div>
+          <div className='desc text-sm'>
+            <div>官方网址：<a className='link link-primary' href='https://makersuite.google.com/app/apikey'
+                             target='_blank'
+                             rel="noreferrer">Google AI Studio</a> (目前免费)
+            </div>
+            <div className='text-sm text-error flex items-center'><IoWarning className='text-sm text-warning'/>谷歌模型安全要求比较高，有些视频可能无法生成总结!
+            </div>
+          </div>
+        </div>}
+      </OptionCard>
+
+      <OptionCard title={<div className='flex items-center'>
+        翻译配置
+        {!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
+          <IoWarning className='text-sm text-warning'/>
+        </div>}
+      </div>}>
+        <FormItem title='启用翻译' htmlFor='translateEnable'>
+          <input id='translateEnable' type='checkbox' className='toggle toggle-primary' checked={translateEnableValue}
+                 onChange={setTranslateEnableValue}/>
+        </FormItem>
+        <FormItem title='目标语言' htmlFor='language'>
+          <select id='language' className="select select-sm select-bordered" value={languageValue}
+                  onChange={onChangeLanguageValue}>
+            {LANGUAGES.map(language => <option key={language.code} value={language.code}>{language.name}</option>)}
+          </select>
+        </FormItem>
+        <FormItem title='翻译条数' tip='每次翻译条数'>
+          <div className='flex-1 flex flex-col'>
+            <input type="range" min={TRANSLATE_FETCH_MIN} max={TRANSLATE_FETCH_MAX} step={TRANSLATE_FETCH_STEP} value={fetchAmountValue} className="range range-primary" onChange={onFetchAmountChange} />
+            <div className="w-full flex justify-between text-sm px-2">
+              {transFetchAmountList.map(amount => <span key={amount}>{amount}</span>)}
+            </div>
+          </div>
+        </FormItem>
+        <FormItem title='翻译显示'>
+          <div className="btn-group">
+            <button onClick={onSel1} className={classNames('btn btn-sm no-animation', (!transDisplayValue || transDisplayValue === 'originPrimary')?'btn-active':'')}>原文为主</button>
+            <button onClick={onSel2} className={classNames('btn btn-sm no-animation', transDisplayValue === 'targetPrimary'?'btn-active':'')}>翻译为主</button>
+            <button onClick={onSel3} className={classNames('btn btn-sm no-animation', transDisplayValue === 'target'?'btn-active':'')}>仅翻译</button>
+          </div>
+        </FormItem>
+        <FormItem title='隐藏翻译' tip='取消自动翻译时,隐藏已翻译内容' htmlFor='hideOnDisableAutoTranslate'>
+          <input id='hideOnDisableAutoTranslate' type='checkbox' className='toggle toggle-primary' checked={hideOnDisableAutoTranslateValue}
+                 onChange={onChangeHideOnDisableAutoTranslate}/>
+        </FormItem>
+      </OptionCard>
+      <OptionCard title={<div className='flex items-center'>
+        总结配置
+        {!apiKeySetted && <div className='tooltip tooltip-right ml-1' data-tip='未设置ApiKey无法使用'>
+          <IoWarning className='text-sm text-warning'/>
+        </div>}
+      </div>}>
+        <FormItem title='启用总结' htmlFor='summarizeEnable'>
+          <input id='summarizeEnable' type='checkbox' className='toggle toggle-primary' checked={summarizeEnableValue}
+                 onChange={setSummarizeEnableValue}/>
+        </FormItem>
+        <FormItem title='浮动窗口' htmlFor='summarizeFloat' tip='当前总结离开视野时,是否显示浮动窗口'>
+          <input id='summarizeFloat' type='checkbox' className='toggle toggle-primary' checked={summarizeFloatValue}
+                 onChange={setSummarizeFloatValue}/>
+        </FormItem>
+        <FormItem title='总结语言' htmlFor='summarizeLanguage'>
+          <select id='summarizeLanguage' className="select select-sm select-bordered" value={summarizeLanguageValue} onChange={onChangeSummarizeLanguageValue}>
+            {LANGUAGES.map(language => <option key={language.code} value={language.code}>{language.name}</option>)}
+          </select>
+        </FormItem>
+        <FormItem htmlFor='words' title='分段字数' tip='注意，不同模型有不同字数限制'>
+          <div className='flex-1 flex flex-col'>
+            <input id='words' type='number' className='input input-sm input-bordered w-full' placeholder={`默认为上限x${WORDS_RATE}`} value={wordsValue??''} onChange={e => setWordsValue(e.target.value?parseInt(e.target.value):undefined)}/>
+            {/* <input type="range" min={WORDS_MIN} max={WORDS_MAX} step={WORDS_STEP} value={wordsValue} className="range range-primary" onChange={onWordsChange} /> */}
+            {/* <div className="w-full flex justify-between text-sm px-2"> */}
+            {/*  {wordsList.map(words => <span key={words}>{words}</span>)} */}
+            {/* </div> */}
+          </div>
+        </FormItem>
+        <div className='desc text-sm'>
+          当前选择的模型的分段字数上限是<span className='font-semibold font-mono'>{aiTypeValue === 'gemini'?GEMINI_TOKENS:(MODEL_MAP[modelValue??MODEL_DEFAULT]?.tokens??'未知')}</span>
+          （太接近上限总结会报错）
+        </div>
+      </OptionCard>
+      <OptionCard title={<div className='flex items-center'>
+        搜索配置
+      </div>}>
+        <FormItem title='启用搜索' htmlFor='searchEnabled' tip='是否启用字幕搜索功能'>
+          <input id='searchEnabled' type='checkbox' className='toggle toggle-primary' checked={searchEnabledValue}
+                 onChange={setSearchEnabledValue}/>
+        </FormItem>
+        <FormItem title='拼音搜索' htmlFor='cnSearchEnabled' tip='是否启用中文拼音搜索'>
+          <input id='cnSearchEnabled' type='checkbox' className='toggle toggle-primary' checked={cnSearchEnabledValue}
+                 onChange={setCnSearchEnabledValue}/>
+        </FormItem>
+      </OptionCard>
+      <OptionCard title={<div className='flex items-center'>
+        提问配置
+      </div>}>
+        <FormItem title='启用提问' htmlFor='askEnabled' tip='是否启用字幕提问功能'>
+          <input id='askEnabled' type='checkbox' className='toggle toggle-primary' checked={askEnabledValue}
+                 onChange={setAskEnabledValue}/>
+        </FormItem>
+      </OptionCard>
+
+      <OptionCard title='提示词配置'>
+        <div className='flex justify-center'>
+          <a className='text-sm link link-primary' onClick={togglePromptsFold}>点击{promptsFold ? '展开' : '折叠'}</a>
+        </div>
+        {!promptsFold && PROMPT_TYPES.map((item, idx) => <FormItem key={item.type} title={<div>
+          <div>{item.name}</div>
+          <div className='link text-sm' onClick={() => {
+            setPromptsValue({
+              ...promptsValue,
+              // @ts-expect-error
+              [item.type]: PROMPT_DEFAULTS[item.type] ?? ''
+            })
+          }}>点击填充默认
+          </div>
+        </div>} htmlFor={`prompt-${item.type}`}>
+          <textarea id={`prompt-${item.type}`} className='mt-2 textarea input-bordered w-full'
+                    placeholder='留空使用默认提示词' value={promptsValue[item.type] ?? ''} onChange={(e) => {
+                      setPromptsValue({
+                        ...promptsValue,
+                        [item.type]: e.target.value
+                      })
+                    }}/>
+        </FormItem>)}
+      </OptionCard>
+
+      <div className='flex flex-col justify-center items-center gap-5 mt-6'>
+        <button className='btn btn-primary btn-wide' onClick={onSave}>保存</button>
+        <button className='btn btn-wide' onClick={onCancel}>取消</button>
+      </div>
+    </div>
+  )
+}
+
+export default OptionsPage
--- a/src/redux/envReducer.ts
+++ b/src/redux/envReducer.ts
@@ -1,7 +1,6 @@
 import {createSlice, PayloadAction} from '@reduxjs/toolkit'
-import {find} from 'lodash-es'
-import {getDevData} from '../util/biz_util'
-import {SERVER_URL_OPENAI, TOTAL_HEIGHT_DEF} from '../const'
+import {find, findIndex} from 'lodash-es'
+import {DEFAULT_SERVER_URL_OPENAI, TOTAL_HEIGHT_DEF} from '../consts/const'

 interface EnvState {
  envData: EnvData
@@ -10,14 +9,14 @@ interface EnvState {
  tempData: TempData
  tempReady: boolean

+  path?: 'app' | 'options'
+
  fold: boolean // fold app
  foldAll?: boolean // fold all segments
-  page?: string
  autoTranslate?: boolean
  autoScroll?: boolean
  checkAutoScroll?: boolean
  curOffsetTop?: number
-  compact?: boolean // 是否紧凑视图
  floatKeyPointsSegIdx?: number // segment的startIdx

  noVideo?: boolean
@@ -25,39 +24,62 @@ interface EnvState {
  curIdx?: number // 从0开始
  needScroll?: boolean
  currentTime?: number
-  downloadType?: string
  infos?: any[]
  curInfo?: any
  curFetched?: boolean
  data?: Transcript
  uploadedTranscript?: Transcript
  segments?: Segment[]
+  url?: string
  title?: string

  taskIds?: string[]
-  transResults: {[key: number]: TransResult}
+  transResults: { [key: number]: TransResult }
  lastTransTime?: number
  lastSummarizeTime?: number
+
+  // ask
+  asks: AskInfo[]
+
+  /**
+   * 是否输入中（中文）
+   */
+  inputting: boolean
+
+  searchText: string
+  searchResult: Record<string, boolean>
+
+  //当前视频是否计算过操作
+  reviewAction: boolean
 }

 const initialState: EnvState = {
  envData: {
-    serverUrl: SERVER_URL_OPENAI,
+    serverUrl: DEFAULT_SERVER_URL_OPENAI,
    translateEnable: true,
    summarizeEnable: true,
+    autoExpand: true,
    theme: 'light',
+    searchEnabled: true,
  },
  tempData: {
    curSummaryType: 'overview',
  },
  totalHeight: TOTAL_HEIGHT_DEF,
  autoScroll: true,
-  currentTime: import.meta.env.VITE_ENV === 'web-dev'? 30: undefined,
  envReady: false,
  tempReady: false,
  fold: true,
-  data: import.meta.env.VITE_ENV === 'web-dev'? getDevData(): undefined,
  transResults: {},
+
+  inputting: false,
+
+  searchText: '',
+  searchResult: {},
+
+  asks: [],
+
+  reviewAction: false,
 }

 export const slice = createSlice({
@@ -73,27 +95,33 @@ export const slice = createSlice({
    setEnvReady: (state) => {
      state.envReady = true
    },
-    setTempData: (state, action: PayloadAction<TempData>) => {
+    setTempData: (state, action: PayloadAction<Partial<TempData>>) => {
      state.tempData = {
        ...state.tempData,
        ...action.payload,
      }
    },
+    setReviewAction: (state, action: PayloadAction<boolean>) => {
+      state.reviewAction = action.payload
+    },
+    setPath: (state, action: PayloadAction<'app' | 'options' | undefined>) => {
+      state.path = action.payload
+    },
    setTempReady: (state) => {
      state.tempReady = true
    },
+    setSearchText: (state, action: PayloadAction<string>) => {
+      state.searchText = action.payload
+    },
+    setSearchResult: (state, action: PayloadAction<Record<string, boolean>>) => {
+      state.searchResult = action.payload
+    },
    setFloatKeyPointsSegIdx: (state, action: PayloadAction<number | undefined>) => {
      state.floatKeyPointsSegIdx = action.payload
    },
    setFoldAll: (state, action: PayloadAction<boolean>) => {
      state.foldAll = action.payload
    },
-    setCompact: (state, action: PayloadAction<boolean>) => {
-      state.compact = action.payload
-    },
-    setPage: (state, action: PayloadAction<string | undefined>) => {
-      state.page = action.payload
-    },
    setTotalHeight: (state, action: PayloadAction<number>) => {
      state.totalHeight = action.payload
    },
@@ -107,12 +135,12 @@ export const slice = createSlice({
      state.lastSummarizeTime = action.payload
    },
    addTaskId: (state, action: PayloadAction<string>) => {
-      state.taskIds = [...(state.taskIds??[]), action.payload]
+      state.taskIds = [...(state.taskIds ?? []), action.payload]
    },
    delTaskId: (state, action: PayloadAction<string>) => {
      state.taskIds = state.taskIds?.filter(id => id !== action.payload)
    },
-    addTransResults: (state, action: PayloadAction<{[key: number]: TransResult}>) => {
+    addTransResults: (state, action: PayloadAction<{ [key: number]: TransResult }>) => {
      // 不要覆盖TransResult里code为200的
      for (const payloadKey in action.payload) {
        const payloadItem = action.payload[payloadKey]
@@ -186,6 +214,21 @@ export const slice = createSlice({
        }
      }
    },
+    addAskInfo: (state, action: PayloadAction<AskInfo>) => {
+      state.asks.push(action.payload)
+    },
+    delAskInfo: (state, action: PayloadAction<string>) => {
+      state.asks = state.asks.filter(ask => ask.id !== action.payload)
+    },
+    mergeAskInfo: (state, action: PayloadAction<PartialOfAskInfo>) => {
+      const idx = findIndex(state.asks, {id: action.payload.id})
+      if (idx >= 0) {
+        state.asks[idx] = {
+          ...state.asks[idx],
+          ...action.payload,
+        }
+      }
+    },
    setSegmentFold: (state, action: PayloadAction<{
      segmentStartIdx: number
      fold: boolean
@@ -216,15 +259,15 @@ export const slice = createSlice({
    setNoVideo: (state, action: PayloadAction<boolean>) => {
      state.noVideo = action.payload
    },
-    setDownloadType: (state, action: PayloadAction<string>) => {
-      state.downloadType = action.payload
-    },
    setNeedScroll: (state, action: PayloadAction<boolean>) => {
      state.needScroll = action.payload
    },
    setCurrentTime: (state, action: PayloadAction<number | undefined>) => {
      state.currentTime = action.payload
    },
+    setUrl: (state, action: PayloadAction<string | undefined>) => {
+      state.url = action.payload
+    },
    setTitle: (state, action: PayloadAction<string | undefined>) => {
      state.title = action.payload
    },
@@ -249,9 +292,56 @@ export const slice = createSlice({
    setFold: (state, action: PayloadAction<boolean>) => {
      state.fold = action.payload
    },
+    setInputting: (state, action: PayloadAction<boolean>) => {
+      state.inputting = action.payload
+    },
  },
 })

-export const { setTempReady, setTempData, setUploadedTranscript, setTotalHeight, setCheckAutoScroll, setCurOffsetTop, setFloatKeyPointsSegIdx, setFoldAll, setCompact, setSegmentFold, setSummaryContent, setSummaryStatus, setSummaryError, setTitle, setSegments, setLastSummarizeTime, setPage, setLastTransTime, clearTransResults, addTransResults, addTaskId, delTaskId, setTaskIds, setDownloadType, setAutoTranslate, setAutoScroll, setNoVideo, setNeedScroll, setCurIdx, setEnvData, setEnvReady, setCurrentTime, setInfos, setCurInfo, setCurFetched, setData, setFold } = slice.actions
+export const {
+  setPath,
+  setUrl,
+  setTempReady,
+  setTempData,
+  setUploadedTranscript,
+  setTotalHeight,
+  setCheckAutoScroll,
+  setCurOffsetTop,
+  setFloatKeyPointsSegIdx,
+  setFoldAll,
+  setSegmentFold,
+  setSummaryContent,
+  setSummaryStatus,
+  setSummaryError,
+  setTitle,
+  setSegments,
+  setLastSummarizeTime,
+  setLastTransTime,
+  clearTransResults,
+  addTransResults,
+  addTaskId,
+  delTaskId,
+  setTaskIds,
+  setAutoTranslate,
+  setAutoScroll,
+  setNoVideo,
+  setReviewAction,
+  setNeedScroll,
+  setCurIdx,
+  setEnvData,
+  setEnvReady,
+  setCurrentTime,
+  setInfos,
+  setCurInfo,
+  setCurFetched,
+  setData,
+  setFold,
+  setSearchText,
+  setSearchResult,
+  setInputting,
+  addAskInfo,
+  delAskInfo,
+  mergeAskInfo,
+} = slice.actions

 export default slice.reducer
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -1,9 +1,26 @@
+interface MethodContext {
+  from: 'extension' | 'inject' | 'app'
+  event: any
+  tabId?: number
+  // sender?: chrome.runtime.MessageSender | null
+}
+
 interface EnvData {
+  sidePanel?: boolean
+  manualInsert?: boolean //是否手动插入字幕列表
  autoExpand?: boolean
  flagDot?: boolean
+
+  aiType?: 'openai' | 'gemini'
+  // openai
  apiKey?: string
  serverUrl?: string
  model?: string
+  customModel?: string
+  customModelTokens?: number
+  // gemini
+  geminiApiKey?: string
+
  translateEnable?: boolean
  language?: string
  hideOnDisableAutoTranslate?: boolean
@@ -16,6 +33,13 @@ interface EnvData {
  theme?: 'system' | 'light' | 'dark'
  fontSize?: 'normal' | 'large'

+  // search
+  searchEnabled?: boolean
+  cnSearchEnabled?: boolean
+
+  // ask
+  askEnabled?: boolean
+
  prompts?: {
    [key: string]: string
  }
@@ -23,10 +47,14 @@ interface EnvData {

 interface TempData {
  curSummaryType: SummaryType
+  downloadType?: string
+  compact?: boolean // 是否紧凑视图
+  reviewActions?: number // 点击或总结行为达到一定次数后，显示评分（一个视频最多只加1次）
+  reviewed?: boolean // 是否点击过评分,undefined: 不显示；true: 已点击；false: 未点击(需要显示)
 }

 interface TaskDef {
-  type: 'chatComplete'
+  type: 'chatComplete' | 'geminiChatComplete'
  serverUrl?: string
  data: any
  extra?: any
@@ -88,6 +116,17 @@ interface Summary {
  content?: any
 }

+interface AskInfo {
+  id: string
+  fold?: boolean
+  question: string
+  status: SummaryStatus
+  error?: string
+  content?: string
+}
+
+type PartialOfAskInfo = Partial<PartOfAskInfo>
+
 /**
 * 概览
 */
@@ -112,4 +151,4 @@ interface BriefSummary extends Summary {
 }

 type SummaryStatus = 'init' | 'pending' | 'done'
-type SummaryType = 'overview' | 'keypoint' | 'brief'
+type SummaryType = 'overview' | 'keypoint' | 'brief' | 'question'
--- a/src/utils/bizUtil.ts
+++ b/src/utils/bizUtil.ts
@@ -1,8 +1,10 @@
-import devData from '../data/data.json'
-import {APP_DOM_ID, SUMMARIZE_TYPES} from '../const'
+import {APP_DOM_ID, CUSTOM_MODEL_TOKENS, MODEL_DEFAULT, MODEL_MAP, SUMMARIZE_TYPES} from '../consts/const'
 import {isDarkMode} from '@kky002/kky-util'
 import toast from 'react-hot-toast'
 import {findIndex} from 'lodash-es'
+export const debug = (...args: any[]) => {
+  console.debug('[APP]', ...args)
+}

 /**
 * 获取译文
@@ -66,18 +68,6 @@ export const getTimeDisplay = (seconds: number) => {
  return `${h < 10 ? '0' : ''}${h}:${m < 10 ? '0' : ''}${m}:${s < 10 ? '0' : ''}${s}`
 }

-export const getDevData = () => {
-  // add idx
-  const body = devData.body.map((item, idx) => ({
-    ...item,
-    idx,
-  }))
-  return {
-    ...devData,
-    body,
-  }
-}
-
 export const isSummaryEmpty = (summary: Summary) => {
  if (summary.type === 'overview') {
    const content: OverviewItem[] = summary.content??[]
@@ -88,6 +78,9 @@ export const isSummaryEmpty = (summary: Summary) => {
  } else if (summary.type === 'brief') {
    const content: string[] = summary.content??''
    return content.length === 0
+  } else if (summary.type === 'question') {
+    const content: any[] = summary.content??[]
+    return content.length === 0
  }
  return true
 }
@@ -109,6 +102,11 @@ export const getSummaryStr = (summary: Summary) => {
      summary: ''
    }
    s += content.summary + '\n'
+  } else if (summary.type === 'question') {
+    const content: Array<{ q: string, a: string }> = summary.content ?? []
+    s += content.map(item => {
+      return item.q + '\n' + item.a + '\n'
+    }).join('\n')
  }
  return s
 }
@@ -123,6 +121,22 @@ export const getServerUrl = (serverUrl?: string) => {
  return serverUrl
 }

+export const getModel = (envData: EnvData) => {
+  if (envData.model === 'custom') {
+    return envData.customModel
+  } else {
+    return envData.model
+  }
+}
+
+export const getModelMaxTokens = (envData: EnvData) => {
+  if (envData.model === 'custom') {
+    return envData.customModelTokens??CUSTOM_MODEL_TOKENS
+  } else {
+    return MODEL_MAP[envData.model??MODEL_DEFAULT]?.tokens??4000
+  }
+}
+
 export const setTheme = (theme: EnvData['theme']) => {
  const appRoot = document.getElementById(APP_DOM_ID)
  if (appRoot != null) {
@@ -253,7 +267,15 @@ export const extractJsonObject = (content: string) => {
  const start = content.indexOf('```')
  const end = content.lastIndexOf('```')
  if (start >= 0 && end >= 0) {
-    content = content.slice(start + 3, end)
+    if (start === end) { // 异常情况
+      if (content.startsWith('```')) {
+        content = content.slice(3)
+      } else {
+        content = content.slice(0, -3)
+      }
+    } else {
+      content = content.slice(start + 3, end)
+    }
  }
  // get content between { and }
  const start2 = content.indexOf('{')
@@ -269,7 +291,15 @@ export const extractJsonArray = (content: string) => {
  const start = content.indexOf('```')
  const end = content.lastIndexOf('```')
  if (start >= 0 && end >= 0) {
-    content = content.slice(start + 3, end)
+    if (start === end) { // 异常情况
+      if (content.startsWith('```')) {
+        content = content.slice(3)
+      } else {
+        content = content.slice(0, -3)
+      }
+    } else {
+      content = content.slice(start + 3, end)
+    }
  }
  // get content between [ and ]
  const start3 = content.indexOf('[')
--- a/src/utils/chromeUtils.ts
+++ b/src/utils/chromeUtils.ts
@@ -0,0 +1,7 @@
+export const openOptionsPage = () => {
+  if (chrome.runtime.openOptionsPage) {
+    chrome.runtime.openOptionsPage();
+  } else {
+    window.open(chrome.runtime.getURL('options.html'));
+  }
+};
--- a/src/utils/pinyinUtil.ts
+++ b/src/utils/pinyinUtil.ts
@@ -0,0 +1,125 @@
+import pinyin from 'tiny-pinyin'
+import {uniq} from 'lodash-es'
+
+/**
+ * pinyin的返回结果
+ */
+interface Ret {
+  type: 1 | 2 | 3
+  source: string
+  target: string
+}
+
+interface Phase {
+  pinyin: boolean
+  list: Ret[]
+}
+
+/**
+ * 获取Phase列表(中英文分离列表)
+ */
+export const getPhases = (str: string) => {
+  const rets = pinyin.parse(str)
+
+  const phases: Phase[] = []
+  let curPinyin_ = false
+  let curPhase_: Ret[] = []
+  const addCurrentPhase = () => {
+    if (curPhase_.length > 0) {
+      phases.push({
+        pinyin: curPinyin_,
+        list: curPhase_,
+      })
+    }
+  }
+
+  // 遍历rets
+  for (const ret of rets) {
+    const newPinyin = ret.type === 2
+    // 如果跟旧的pinyin类型不同，先保存旧的
+    if (newPinyin !== curPinyin_) {
+      addCurrentPhase()
+      // 重置
+      curPinyin_ = newPinyin
+      curPhase_ = []
+    }
+    // 添加新的
+    curPhase_.push(ret)
+  }
+  // 最后一个
+  addCurrentPhase()
+
+  return phases
+}
+
+/**
+ * 获取原子字符列表，如 tool tab 汉 字
+ */
+export const getAtoms = (str: string) => {
+  const phases = getPhases(str)
+
+  const atoms = []
+  for (const phase of phases) {
+    if (phase.pinyin) { // all words
+      atoms.push(...phase.list.map(e => e.source).filter(e => e))
+    } else { // split
+      atoms.push(...(phase.list.map((e: any) => e.source).join('').match(/\w+/g)??[]).filter((e: string) => e))
+    }
+  }
+
+  return atoms
+}
+
+const fixStrs = (atoms: string[]) => {
+  // 小写
+  atoms = atoms.map(e => e.toLowerCase())
+
+  // 去重
+  atoms = uniq(atoms)
+
+  // 返回
+  return atoms
+}
+
+export const getWords = (str: string) => {
+  // 获取全部原子字符
+  const atoms = getAtoms(str)
+  // fix
+  return fixStrs(atoms)
+}
+
+/**
+ * 我的世界Minecraft => ['wodeshijie', 'deshijie', 'shijie', 'jie'] + ['wdsj', 'dsj', 'sj', 'j']
+ *
+ * 1. only handle pinyin, other is ignored
+ */
+export const getWordsPinyin = (str: string) => {
+  let result: string[] = []
+
+  for (const phase of getPhases(str)) {
+    // only handle pinyin
+    if (phase.pinyin) { // 我的世界
+      // 获取全部原子字符
+      // 我的世界 => [我, 的, 世, 界]
+      const atoms: string[] = []
+      atoms.push(...phase.list.map(e => e.source).filter(e => e))
+      // 获取全部子串
+      // [我, 的, 世, 界] => [我的世界, 的世界, 世界, 界]
+      const allSubStr = []
+      for (let i = 0; i < atoms.length; i++) {
+        allSubStr.push(atoms.slice(i).join(''))
+      }
+      // pinyin version
+      const pinyinList = allSubStr.map((e: string) => pinyin.convertToPinyin(e))
+      result.push(...pinyinList)
+      // pinyin first version
+      const pinyinFirstList = allSubStr.map((e: string) => pinyin.parse(e).map((e: any) => e.type === 2?e.target[0]:null).filter(e => !!e).join(''))
+      result.push(...pinyinFirstList)
+    }
+  }
+
+  // fix
+  result = fixStrs(result)
+
+  return result
+}
--- a/src/utils/search.ts
+++ b/src/utils/search.ts
@@ -0,0 +1,65 @@
+import * as JsSearch from 'js-search'
+import {uniq} from 'lodash-es'
+import {getWords, getWordsPinyin} from './pinyinUtil'
+
+const tokenize = (maxLength: number, content: string, options?: SearchOptions) => {
+  const result: string[] = []
+
+  // 最大长度
+  if (content.length > maxLength) {
+    content = content.substring(0, maxLength)
+  }
+  result.push(...getWords(content))
+  // check cn
+  if (options?.cnSearchEnabled) {
+    result.push(...getWordsPinyin(content))
+  }
+
+  // console.debug('[Search] tokenize:', str, '=>', result)
+
+  return uniq(result)
+}
+
+export interface SearchOptions {
+  cnSearchEnabled?: boolean
+}
+
+export const Search = (uidFieldName: string, index: string, maxLength: number, options?: SearchOptions) => {
+  let searchRef: JsSearch.Search | undefined// 搜索器
+
+  /**
+   * 重置索引
+   */
+  const reset = (documents?: Object[]) => {
+    // 搜索器
+    searchRef = new JsSearch.Search(uidFieldName)
+    searchRef.tokenizer = {
+      tokenize: (str) => {
+        return tokenize(maxLength, str, options)
+      }
+    }
+    searchRef.addIndex(index)
+
+    // 检测添加文档
+    if (documents != null) {
+      searchRef.addDocuments(documents)
+    }
+  }
+
+  /**
+   * 添加文档
+   */
+  const add = (document: Object) => {
+    searchRef?.addDocument(document)
+  }
+
+  /**
+   * 搜索
+   * @return 未去重
+   */
+  const search = (text: string) => {
+    return searchRef?.search(text.toLowerCase())
+  }
+
+  return {reset, add, search}
+}
--- a/src/utils/util.ts
+++ b/src/utils/util.ts
@@ -1,5 +1,10 @@
 import {SyntheticEvent} from 'react'

+export const isEdgeBrowser = () => {
+  const userAgent = navigator.userAgent.toLowerCase();
+  return userAgent.includes('edg/') && !userAgent.includes('edge/');
+}
+
 export const formatTime = (time: number) => {
  if (!time) return '00:00'

--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />

 interface ImportMetaEnv {
+  readonly VITE_EXTENSION_ID: string
 }

 interface ImportMeta {
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -18,11 +18,13 @@ module.exports = {
      light: {
        ...require("daisyui/src/colors/themes")["[data-theme=light]"],
        "--rounded-btn": "0.15rem",
+        "primary": "rgb(0, 174, 236)",
      },
    }, {
      dark: {
        ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
        "--rounded-btn": "0.15rem",
+        "primary": "rgb(0, 174, 236)",
      }
    }],
    base: true,
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,10 @@
    "jsx": "react-jsx",
    "types": [
      "@types/chrome"
-    ]
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -6,5 +6,5 @@
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
-  "include": ["vite.config.ts", "manifest.json"]
+  "include": ["vite.config.ts", "manifest.config.ts"]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,24 +2,33 @@ import {defineConfig, PluginOption} from 'vite'
 import react from '@vitejs/plugin-react'
 import {visualizer} from "rollup-plugin-visualizer";
 import {crx} from '@crxjs/vite-plugin'
+import path from "path"
 // @ts-ignore
-import manifest from './manifest.json'
+import manifest from './manifest.config'

 // https://vitejs.dev/config/
-export default ({mode}) => {
-  const plugins = [
-    react(),
-    visualizer() as PluginOption,
-  ]
-  // @ts-ignore
-  if (mode === 'production_chrome') {
-    plugins.push(crx({
-      manifest,
-    }))
-  }
+export default () => {
  return defineConfig({
    base: '/',
-    plugins,
+    build: {
+      rollupOptions: {
+        input: {
+          index: 'index.html',
+        },
+      },
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      }
+    },
+    plugins: [
+      react(),
+      crx({
+        manifest,
+      }),
+      visualizer() as PluginOption,
+    ],
    css: {
      modules: {
        localsConvention: "camelCase"
Author	SHA1	Message	Date
IndieKKY	44895a98a6	chore: release 1.11.2	2024-10-07 18:59:16 +08:00
IndieKKY	53d3522fd6	完善	2024-10-07 18:56:39 +08:00
IndieKKY	56bb936aaa	哔哔君	2024-10-07 18:15:20 +08:00
IndieKKY	d52a4e8378	fix	2024-10-07 09:43:38 +08:00
IndieKKY	f69bc7f040	优化	2024-10-07 09:36:48 +08:00
IndieKKY	5005806917	chore: release 1.11.1	2024-10-06 19:55:04 +08:00
IndieKKY	6928b5fa00	fix	2024-10-06 19:54:40 +08:00
IndieKKY	5ba2b9fd6d	优化	2024-10-06 19:22:01 +08:00
IndieKKY	d11b517d5e	优化	2024-10-06 19:18:42 +08:00
IndieKKY	2460b0b822	优化	2024-10-06 19:16:22 +08:00
IndieKKY	9bcf6ee48d	优化	2024-10-06 18:59:21 +08:00
IndieKKY	2bb5f41189	优化	2024-10-06 18:55:41 +08:00
IndieKKY	e5a645611b	优化	2024-10-06 18:48:52 +08:00
IndieKKY	97bd23bcc0	优化	2024-10-06 18:42:27 +08:00
IndieKKY	02aaba6a83	优化	2024-10-06 18:41:12 +08:00
IndieKKY	3e1e69f13e	优化	2024-10-06 18:36:23 +08:00
IndieKKY	9384c1419a	优化	2024-10-06 18:28:20 +08:00
IndieKKY	50e6579116	fix	2024-10-06 17:51:07 +08:00
IndieKKY	751961687b	tmp	2024-10-06 17:42:15 +08:00
IndieKKY	5ce146803e	优化	2024-10-06 16:04:02 +08:00
IndieKKY	b10d816e18	chore: release 1.11.0	2024-10-06 14:10:51 +08:00
IndieKKY	4b13230dc2	优化	2024-10-06 14:08:58 +08:00
IndieKKY	6e9132d657	优化提示	2024-10-06 14:07:57 +08:00
IndieKKY	86746dc2a3	优化	2024-10-06 13:50:30 +08:00
IndieKKY	7df231443e	优化	2024-10-06 13:49:01 +08:00
IndieKKY	296469ebf1	优化	2024-10-06 13:46:30 +08:00
IndieKKY	3140b91f72	优化	2024-10-06 13:38:08 +08:00
IndieKKY	b690a7ef08	优化	2024-10-06 13:33:07 +08:00
IndieKKY	6a921d4c5a	优化	2024-10-06 13:23:38 +08:00
IndieKKY	5c37ea9d4e	优化	2024-10-06 13:13:53 +08:00
IndieKKY	15dde412e4	优化	2024-10-06 13:11:11 +08:00
IndieKKY	240f760ae9	优化	2024-10-06 13:07:05 +08:00
IndieKKY	6c008feb3f	优化	2024-10-06 12:35:35 +08:00
IndieKKY	b91e1476d6	优化	2024-10-06 12:10:21 +08:00
IndieKKY	faa15b9510	优化	2024-10-06 12:04:43 +08:00
IndieKKY	d7b274d338	优化	2024-10-06 11:51:40 +08:00
IndieKKY	fde80103d9	fix	2024-10-05 21:54:51 +08:00
IndieKKY	77f6864f44	fix	2024-10-05 21:25:53 +08:00
IndieKKY	c71e8e2eab	fix	2024-10-05 21:17:26 +08:00
IndieKKY	4f03e75b6d	fix	2024-10-05 21:02:47 +08:00
IndieKKY	b44a73cd2f	fix	2024-10-05 21:00:00 +08:00
IndieKKY	1bae3f8406	fix	2024-10-05 20:46:33 +08:00
IndieKKY	69453f7bce	fix	2024-10-05 20:28:42 +08:00
IndieKKY	4189818939	fix	2024-10-05 20:17:22 +08:00
IndieKKY	090651c4b5	fix	2024-10-05 20:04:42 +08:00
IndieKKY	b385730152	fix	2024-10-05 20:03:51 +08:00
IndieKKY	d52231227e	fix	2024-10-05 20:03:02 +08:00
IndieKKY	b283695b02	消息传递重构&支持侧边面板	2024-10-05 19:55:43 +08:00
IndieKKY	c1c21c2fee	消息	2024-10-05 13:45:49 +08:00
IndieKKY	a8352e2725	完善	2024-10-05 13:24:32 +08:00
IndieKKY	d3537a39ba	PortMessageHandler	2024-10-05 12:59:11 +08:00
IndieKKY	a2655710e5	优化提示	2024-10-05 09:53:58 +08:00
IndieKKY	e025723d9f	优化	2024-10-05 09:33:59 +08:00
IndieKKY	38baf571b7	增加是否自动插入字幕列表选项	2024-10-04 21:45:47 +08:00
IndieKKY	a02825b3eb	fix	2024-10-04 19:47:22 +08:00
IndieKKY	cf737b9976	分离设置页面	2024-10-04 19:31:09 +08:00
IndieKKY	e238d83f78	分离设置页面	2024-10-04 19:14:01 +08:00
IndieKKY	46955e0a59	分离设置页面	2024-10-04 18:55:21 +08:00
IndieKKY	564f032e3a	fix	2024-10-04 15:31:51 +08:00
IndieKKY	6ffb9073ab	fix	2024-10-04 14:25:01 +08:00
IndieKKY	c19ad1b0e1	fix	2024-10-04 14:20:07 +08:00
IndieKKY	8b3bd44d59	消息通信优化	2024-10-04 14:15:08 +08:00
IndieKKY	c3b53a016c	消息通信优化	2024-10-04 13:15:27 +08:00
IndieKKY	125996408e	注入优化	2024-10-04 12:49:25 +08:00
IndieKKY	abb97813d1	fix	2024-10-04 00:07:11 +08:00
IndieKKY	f50a2e3abd	重构消息通信	2024-10-03 23:38:18 +08:00
IndieKKY	e3ddf386cb	修改readme	2024-10-03 20:02:21 +08:00
IndieKKY	4d9128eb29	fix	2024-10-03 19:57:36 +08:00
IndieKKY	288c9eda81	fix	2024-10-03 19:52:44 +08:00
IndieKKY	66cd431c3b	fix	2024-10-03 19:48:55 +08:00
IndieKKY	5b6b4211a4	大重构，优化本地调试	2024-10-03 19:29:10 +08:00
IndieKKY	da7357c7eb	chore: release 1.10.6	2024-09-19 16:33:44 +08:00
IndieKKY	1ff47ee148	fix	2024-09-19 16:33:29 +08:00
IndieKKY	1bf8188980	chore: release 1.10.5	2024-09-19 16:25:23 +08:00
IndieKKY	3a9a8d9d56	fix	2024-09-19 16:24:55 +08:00
IndieKKY	78b5d7a18b	fix	2024-09-19 16:23:13 +08:00
IndieKKY	ff6dae7a21	chore: release 1.10.4	2024-09-19 16:05:58 +08:00
IndieKKY	3adb541e99	fix	2024-09-19 16:05:42 +08:00
IndieKKY	1ef7537251	chore: release 1.10.3	2024-09-19 15:08:30 +08:00
IndieKKY	be6b94164d	跳转评论	2024-09-19 15:08:15 +08:00
IndieKKY	1f1d48b56a	chore: release 1.10.2	2024-07-23 10:01:09 +08:00
IndieKKY	02b7a09f42	更新模型	2024-07-23 10:00:51 +08:00
IndieKKY	9320928b34	chore: release 1.10.1	2024-06-18 11:10:27 +08:00
IndieKKY	1fbdeaa8f6	优化导出文件名	2024-06-18 10:57:20 +08:00
IndieKKY	2f22a8c4a2	chore: release 1.10.0	2024-05-27 11:44:25 +08:00
IndieKKY	baa15581ed	问题生成	2024-05-27 11:28:14 +08:00
IndieKKY	7e4733dfa8	优化	2024-05-27 11:22:32 +08:00
IndieKKY	5c6dcab653	优化搜索	2024-05-27 11:20:43 +08:00
IndieKKY	975c524369	问题生成	2024-05-27 11:20:03 +08:00
IndieKKY	4a6ebf0894	提问优化	2024-05-27 10:30:16 +08:00
IndieKKY	64059f71e5	提问优化	2024-05-27 09:42:04 +08:00
IndieKKY	be97b1d51a	设置界面优化	2024-05-27 09:02:21 +08:00
IndieKKY	19553de975	注释掉推荐	2024-05-27 08:50:15 +08:00
IndieKKY	39d3f9be8e	optimize	2024-04-26 14:15:41 +08:00
IndieKKY	75235883a5	chore: release 1.9.3	2024-04-15 09:57:44 +08:00
IndieKKY	aeac55cb6b	recommend	2024-04-15 09:57:28 +08:00
IndieKKY	cf1bd97dec	readme	2024-04-12 10:43:02 +08:00
IndieKKY	915cd8022d	readme	2024-04-12 10:41:13 +08:00
IndieKKY	e7f3eef6dc	readme	2024-04-12 10:38:51 +08:00
IndieKKY	71ac909855	chore: release 1.9.2	2024-04-12 10:27:17 +08:00
IndieKKY	60697769bb	ollama支持	2024-04-12 10:25:26 +08:00
IndieKKY	c40338a5f5	chore: release 1.9.1	2024-03-19 22:23:55 +08:00
IndieKKY	13e90c1ab7	上下键移动	2024-03-19 22:22:39 +08:00
IndieKKY	9b2d620cdf	Revert "去除是否自动展开配置" This reverts commit `e6db6747`	2024-03-19 21:39:16 +08:00
IndieKKY	2383603b39	chore: release 1.9.0	2024-03-18 21:57:26 +08:00
IndieKKY	1d2b708682	推荐优化	2024-03-18 21:57:10 +08:00
IndieKKY	2ba841c8f2	优化字幕复制	2024-03-18 19:28:10 +08:00
IndieKKY	e6db674755	去除是否自动展开配置	2024-03-18 19:14:24 +08:00
IndieKKY	72c8f9608e	优化推荐	2024-03-18 18:59:13 +08:00
IndieKKY	7a03d37c61	新增字幕提问功能	2024-03-18 11:36:30 +08:00
IndieKKY	a86ba9e09f	新增字幕提问功能	2024-03-17 23:31:48 +08:00
IndieKKY	d6d7e17f84	新增字幕提问功能	2024-03-17 21:17:40 +08:00
IndieKKY	0881312025	chore: release 1.8.3	2024-02-26 11:50:52 +08:00
IndieKKY	d5b4ab472b	bibigpt	2024-02-26 11:50:39 +08:00
IndieKKY	dc73be25d6	chore: release 1.8.2	2024-02-26 11:49:46 +08:00
IndieKKY	8e23f143e4	bibigpt	2024-02-26 11:47:57 +08:00
IndieKKY	d7085ba75e	chore: release 1.8.1	2024-02-18 10:33:24 +08:00
IndieKKY	b8d8b8fe06	模型更新	2024-02-18 10:33:00 +08:00
IndieKKY	d42844ac3c	不限制最大字数	2024-01-26 13:21:10 +08:00
IndieKKY	e66f85ff9f	chore: release 1.8.0	2024-01-20 13:35:42 +08:00
IndieKKY	d97af83c9e	支持gemini	2024-01-20 13:35:26 +08:00
IndieKKY	c70fa81482	chore: release 1.7.11	2024-01-20 13:31:00 +08:00
IndieKKY	4dbce345c2	chore: release 1.7.10	2024-01-20 13:21:55 +08:00
IndieKKY	aa098df6a5	支持gemini	2024-01-20 13:21:44 +08:00
IndieKKY	fa99fa8b3d	chore: release 1.7.9	2024-01-20 13:19:03 +08:00
IndieKKY	5078baca1b	支持gemini	2024-01-20 13:18:39 +08:00
IndieKKY	771a802728	支持gemini	2024-01-20 11:39:21 +08:00
IndieKKY	9038bf7128	文章视图加逗号	2024-01-20 10:31:59 +08:00
IndieKKY	f01e175b4e	保存下载类型选择	2024-01-20 10:21:27 +08:00
IndieKKY	8098d7cf9b	保存列表/文章视图选择	2024-01-20 10:19:47 +08:00
IndieKKY	728e4dce84	chore: release 1.7.8	2023-12-24 09:05:41 +08:00
IndieKKY	a54b4a7e5f	youtube caption 调整	2023-12-24 09:02:13 +08:00
IndieKKY	8a908ecf99	主颜色调整	2023-12-24 09:01:18 +08:00
IndieKKY	bdc7823965	chore: release 1.7.7	2023-11-28 19:45:30 +08:00
IndieKKY	8d1bac4623	添加字幕搜索功能	2023-11-28 19:43:58 +08:00
IndieKKY	9f486b7269	readme	2023-11-28 10:46:59 +08:00
IndieKKY	e10de9bc48	version	2023-11-28 10:35:51 +08:00
IndieKKY	dd7ce4ab38	readme	2023-11-28 10:34:20 +08:00
IndieKKY	250da4fd28	添加firefox支持	2023-11-28 10:30:42 +08:00
IndieKKY	65861829e2	增加模型选择	2023-11-28 10:23:35 +08:00
IndieKKY	0b4890399a	chore: release 1.7.5	2023-11-18 08:51:35 +08:00
IndieKKY	51bf522eeb	添加youtube版字幕列表链接	2023-11-18 08:51:21 +08:00
				`@@ -0,0 +1 @@`
				`This chrome extension project use typescript, react, vite, tailwindcss, daisyui.`