chore: release 1.11.11

README.md

@@ -51,6 +51,9 @@ node版本：18.15.0
 
 注：`./push.sh`是作者自用脚本，可以忽略。
 
+提示：本地edge开发调试可能有问题，会报csp错误！本地开发调试推荐用chrome。
+构建后应该正常，关键是fix.cjs里将use_dynamic_url设置为false的这个操作。
+
 ## 贡献指南
 
 欢迎贡献代码或提出改进建议！如果您希望为该项目做出贡献，请遵循以下步骤：

fix.cjs

@@ -5,4 +5,11 @@ const fs = require('fs')
 //copy index.html to sidepanel.html
 fs.copyFileSync('./dist/index.html', './dist/sidepanel.html')
 
+//set all use_dynamic_url to false
+const manifest = require('./dist/manifest.json')
+manifest.web_accessible_resources.forEach(resource => {
+  resource.use_dynamic_url = false
+})
+fs.writeFileSync('./dist/manifest.json', JSON.stringify(manifest, null, 2))
+
 console.log('fix.js done');

manifest.config.ts

@@ -12,9 +12,10 @@ const [major, minor, patch, label = '0'] = version
   .split(/[.-]/)
 
 export default defineManifest(async (env) => ({
-  "name": "哔哔君 - bilibili哔哩哔哩字幕列表",
+  "name": '__MSG_appName__',
-  "description": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!",
+  "description": '__MSG_appDescription__',
   "version": `${major}.${minor}.${patch}`,
+  "default_locale": "zh_CN",
   "manifest_version": 3,
   "permissions": [
     "sidePanel",
@@ -56,7 +57,7 @@ export default defineManifest(async (env) => ({
       "resources": [
         "index.html",
       ],
-      "use_dynamic_url": true
+      "use_dynamic_url": false
     }
   ]
 }))

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "bilibili-subtitle",
-  "version": "1.11.7",
+  "version": "1.11.11",
   "type": "module",
   "description": "哔哩哔哩字幕列表",
   "main": "index.js",

public/_locales/zh_CN/messages.json

@@ -0,0 +1,8 @@
+{
+  "appName": {
+    "message": "哔哔君 - bilibili哔哩哔哩字幕列表"
+  },
+  "appDescription": {
+    "message": "显示B站视频的字幕列表,可点击跳转与下载字幕,并支持翻译和总结字幕!"
+  }
+}

src/components/Body.tsx

@@ -39,6 +39,7 @@ import Ask from './Ask'
 import { v4 } from 'uuid'
 import RateExtension from '../components/RateExtension'
 import ApiKeyReminder from './ApiKeyReminder'
+import useMessaging from '@/messaging/layer2/useMessaging'
 
 const Body = () => {
   const dispatch = useAppDispatch()
@@ -65,6 +66,7 @@ const Body = () => {
   // const fontSize = useAppSelector(state => state.env.envData.fontSize)
   const searchText = useAppSelector(state => state.env.searchText)
   const asks = useAppSelector(state => state.env.asks)
+  const {disconnected} = useMessaging()
   // const recommendIdx = useMemo(() => random(0, 3), [])
   const showSearchInput = useMemo(() => {
     return (segments != null && segments.length > 0) && (envData.searchEnabled ? envData.searchEnabled : (envData.askEnabled ?? ASK_ENABLED_DEFAULT))
@@ -262,6 +264,10 @@ const Body = () => {
       {searchText && <button className='absolute top-1 right-2 btn btn-ghost btn-xs btn-circle text-base-content/75' onClick={onClearSearchText}><AiOutlineCloseCircle /></button>}
     </div>}
 
+    {disconnected && <div className='flex flex-col justify-center items-center gap-2 text-sm bg-red-400 rounded mx-2'>
+        <span className='flex items-center gap-1 text-white'><AiOutlineCloseCircle className='text-white' />已断开连接</span>
+      </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'
@@ -304,22 +310,22 @@ const Body = () => {
       {/*  </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='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' */}
+          <div className='font-semibold text-accent flex items-center gap-1'><img src='/bibigpt.png'
-        {/*                                                                          alt='BibiGPT logo' */}
+                                                                                  alt='BibiGPT logo'
-        {/*                                                                          className='w-8 h-8'/>BibiGPT */}
+                                                                                  className='w-8 h-8'/>BibiGPT
-        {/*  </div> */}
+          </div>
-        {/*  <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span */}
+          <div className='text-sm px-2 desc'>这是<span className='text-amber-600 font-semibold text-base'>网页</span>版的字幕列表，支持<span
-        {/*    className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频） */}
+            className='font-semibold'>任意</span>视频提取字幕总结（包括没有字幕的视频）
-        {/*  </div> */}
+          </div>
-        {/*  <div className='flex gap-2'> */}
+          <div className='flex gap-2'>
-        {/*    <a title='BibiGPT' href='https://bibigpt.co/r/bilibili' */}
+            <a title='BibiGPT' href='https://bibigpt.co/r/bilibili'
-        {/*       onClick={(e) => { */}
+               onClick={(e) => {
-        {/*         e.preventDefault() */}
+                 e.preventDefault()
-        {/*         openUrl('https://bibigpt.co/r/bilibili') */}
+                 openUrl('https://bibigpt.co/r/bilibili')
-        {/*       }} className='link text-sm text-accent'>✨ BibiGPT ✨</a> */}
+               }} className='link text-sm text-accent'>✨ BibiGPT ✨</a>
-        {/*  </div> */}
+          </div>
-        {/* </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'

src/messaging/layer1/Layer1Protocol.ts

@@ -25,6 +25,7 @@ class Layer1Protocol<L1Req = any, L1Res = any> {
   private timeout: number
   private requests: Map<string, { resolve: (value: L1Res) => void, reject: (reason?: any) => void, timer: number }>
   private handler: Handler<L1Req, L1Res>
+  public disconnected: boolean = false
 
   constructor(handler: Handler<L1Req, L1Res>, port: chrome.runtime.Port, autoDispose = true, timeout = 30000) {  // 默认超时 30 秒
     this.port = port;
@@ -82,6 +83,7 @@ class Layer1Protocol<L1Req = any, L1Res = any> {
   }
 
   dispose() {
+    this.disconnected = true
     this.port.onMessage.removeListener(this._messageListener);
     if (this.port.onDisconnect) {
       this.port.onDisconnect.removeListener(this.dispose);

src/messaging/layer2/useMessaging.ts

@@ -1,12 +1,18 @@
 import { msgWaiter } from './useMessagingService'
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 import Layer1Protocol from '../layer1/Layer1Protocol'
 import { L2ReqMsg, L2ResMsg, TAG_TARGET_INJECT } from '../const'
 
 const useMessaging = <AllExtensionMessagesType extends ExtensionMessage, AllInjectMessagesType extends InjectMessage>() => {
+    const [disconnected, setDisconnected] = useState(false)
+
     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>
+        if (pmh.disconnected) {
+            setDisconnected(true)
+            throw new Error('disconnected')
+        }
         // send message
         const res = await pmh.sendMessage({
             from: 'app',
@@ -30,7 +36,8 @@ const useMessaging = <AllExtensionMessagesType extends ExtensionMessage, AllInje
 
     return {
         sendExtension,
-        sendInject
+        sendInject,
+        disconnected
     }
 }
 

src/pages/OptionsPage.tsx

@@ -27,7 +27,7 @@ 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'
+import { FaChevronDown, FaChevronUp, FaGripfire } from 'react-icons/fa'
 
 const OptionCard = ({ title, children, defaultExpanded = true }: { title: React.ReactNode; children: React.ReactNode; defaultExpanded?: boolean }) => {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
@@ -261,14 +261,15 @@ const OptionsPage = () => {
             <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 className='flex justify-center font-semibold'>【第三方国内代理】</div>
-            {/* <div>代理网址：<a className='link link-primary' href='https://api.openai-up.com/register?aff=varM' */}
+            <div>代理网址：<a className='link link-primary' href='https://api.kksj.org/register?aff=ucVc'
-            {/*                 target='_blank' */}
+                             target='_blank'
-            {/*                 rel="noreferrer">点击访问</a></div> */}
+                             rel="noreferrer">点击访问</a></div>
-            {/* <div>服务器地址：<a className='link link-primary' */}
+            <div>服务器地址：<a className='link link-primary'
-            {/*                   onClick={() => setServerUrlValue('https://api.openai-up.com')} */}
+                               onClick={() => setServerUrlValue('https://api.kksj.org')}
-            {/*                   rel='noreferrer'>点击设置</a></div> */}
+                               rel='noreferrer'>点击设置</a></div>
-            {/* <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前价格不到官方价格的6折<FaGripfire/></div> */}
+            <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>目前0.9人民币可充值1美元(约官方价格1/8)<FaGripfire/></div>
+            <div className='text-amber-600 flex justify-center items-center'><FaGripfire/>国内可访问，无需🪜<FaGripfire/></div>
           </div>
         </div>}
         {(!aiTypeValue || aiTypeValue === 'openai') && <FormItem title='模型选择' htmlFor='modelSel' tip='注意，不同模型有不同价格与token限制'>