chore: release 1.11.14

README.md

@@ -21,7 +21,6 @@
 
 - [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)
 
 ## 使用说明
 
@@ -46,11 +45,15 @@ github: [IndieKKY](https://github.com/IndieKKY)
 node版本：18.15.0
 包管理器：pnpm
 
-- 本地调试：`pnpm run dev`，然后加载`dist`目录。
-- 打生产包：`pnpm run build`，然后加载`dist`目录。
+- 本地调试：`pnpm run dev`，然后浏览器扩展管理页面，开启开发者模式，再加载已解压的扩展程序，选择`dist`目录。
+- 打生产包：`pnpm run build`，然后浏览器扩展管理页面，开启开发者模式，再加载已解压的扩展程序，选择`dist`目录。
 
 注：`./push.sh`是作者自用脚本，可以忽略。
 
+提示：最新版浏览器安全方面有更新，开发调试可能有问题，会报csp错误！
+暂时的解决办法是`pnpm run dev`运行起来后，手动将`dist/manifest.json`文件里的web_accessible_resources里的use_dynamic_url都修改为false，然后浏览器扩展管理页面点击重载一下，就能正常（是@crxjs/vite-plugin依赖的问题，这个依赖很长时间没更新了，这个bug也没修复，暂时没发现更好的解决办法）。
+构建后正常，关键是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

@@ -57,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.9",
+  "version": "1.11.14",
   "type": "module",
   "description": "哔哩哔哩字幕列表",
   "main": "index.js",

src/chrome/openaiService.ts

@@ -7,13 +7,17 @@ const getServerUrl = (serverUrl?: string) => {
   if (serverUrl.endsWith('/')) {
     serverUrl = serverUrl.slice(0, -1)
   }
+  //如果serverUrl不以/vxxx结尾，则添加/v1
+  if (!/\/v\d+$/.test(serverUrl.toLowerCase())) {
+    serverUrl += '/v1'
+  }
   return serverUrl
 }
 
 export const handleChatCompleteTask = async (task: Task) => {
   const data = task.def.data
   const serverUrl = getServerUrl(task.def.serverUrl)
-  const resp = await fetch(`${serverUrl}/v1/chat/completions`, {
+  const resp = await fetch(`${serverUrl}/chat/completions`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

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'

src/components/Header.tsx

@@ -83,8 +83,8 @@ const Header = (props: {
     }
   }}>
     <div className='shrink-0 flex items-center'>
-      <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> */}
+      {/* <img src="bibijun.png" alt="Logo" className="w-auto h-6 ml-2 mr-1" /> */}
+      <span className='shrink-0 text-[15px] font-medium pl-[16px] pr-[14px]'>字幕列表</span>
       <MoreBtn placement={'right-start'}/>
     </div>
     <div className='flex gap-0.5 items-center mr-[16px]'>

src/components/SegmentCard.tsx

@@ -210,7 +210,7 @@ const SegmentCard = (props: {
   }, [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')}>
+    className={classNames('border border-base-300 bg-base-200/25 rounded flex flex-col m-1.5 p-1.5 gap-1', showCurrent && 'shadow shadow-md')}>
     <div className='relative flex justify-center min-h-[20px]'>
       {segments != null && segments.length > 0 &&
         <div className='absolute left-0 top-0 bottom-0 text-xs select-none flex-center desc'>

src/consts/const.ts

@@ -265,7 +265,7 @@ 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 DEFAULT_SERVER_URL_OPENAI = 'https://api.openai.com/v1'
 export const CUSTOM_MODEL_TOKENS = 16385
 
 export const MODEL_TIP = '推荐gpt-4o-mini，能力强，价格低，token上限大'

src/inject/inject.ts

@@ -167,7 +167,7 @@ const debug = (...args: any[]) => {
           ctime = pages[0].ctime
           author = pages[0].owner?.name
           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 => {
+          await fetch(`https://api.bilibili.com/x/player/wbi/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
             subtitles = res.data.subtitle.subtitles
           })
         } else {//bvxxx
@@ -179,7 +179,7 @@ const debug = (...args: any[]) => {
             author = res.data.owner?.name
             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 => {
+          await fetch(`https://api.bilibili.com/x/player/wbi/v2?aid=${aid}&cid=${cid}`, { credentials: 'include' }).then(res => res.json()).then(res => {
             subtitles = res.data.subtitle.subtitles
           })
         }
@@ -226,15 +226,18 @@ const debug = (...args: any[]) => {
       lastAid = aid
       lastCid = cid
       if (aid && cid) {
-        fetch(`https://api.bilibili.com/x/player/v2?aid=${aid}&cid=${cid}`, {
+        fetch(`https://api.bilibili.com/x/player/wbi/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
-            })
+            //remove elements with empty subtitle_url
+            res.data.subtitle.subtitles = res.data.subtitle.subtitles.filter((item: any) => item.subtitle_url)
+            if (res.data.subtitle.subtitles.length > 0) {
+              runtime.injectMessaging.sendApp('SET_INFOS', {
+                infos: res.data.subtitle.subtitles
+              })
+            }
           })
       }
     }

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/utils/bizUtil.ts

@@ -119,16 +119,6 @@ export const getSummaryStr = (summary: Summary) => {
   return s
 }
 
-export const getServerUrl = (serverUrl?: string) => {
-  if (!serverUrl) {
-    return 'https://api.openai.com'
-  }
-  if (serverUrl.endsWith('/')) {
-    serverUrl = serverUrl.slice(0, -1)
-  }
-  return serverUrl
-}
-
 export const getModel = (envData: EnvData) => {
   if (envData.model === 'custom') {
     return envData.customModel

tailwind.config.cjs

@@ -3,7 +3,11 @@ module.exports = {
   darkMode: 'class',
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
-    extend: {},
+    extend: {
+      fontSize: {
+        xs: '13px',
+      },
+    },
   },
   plugins: [
     require('tailwind-scrollbar-hide'),