AI 应用大模型RAG语音后端前端桌面应用【免费下载链接】BiliNoteAI 视频笔记生成工具 让 AI 为你的视频做笔记项目地址https://gitcode.com/gh_mirrors/bi/BiliNote点击查看免费下载导读BiliNote 浏览器插件 是 BiliNote 项目的浏览器端形态它把后端「视频链接 → Markdown 笔记」的核心流水线搬进了浏览器工具栏自动读取当前标签页的 URL、识别 B 站 / YouTube / 抖音 / 快手平台、一键触发笔记生成并在 popup、侧边栏中实时展示任务进度与渲染结果。读完本文你将掌握插件的功能范围与当前 MVP 边界、本地开发与加载调试的完整流程、设置页各配置项的含义后端地址、供应商/模型、画质、风格、多模态视频理解等、构建打包发布命令以及插件与桌面 Web 端、后端之间的职责分工与 CORS 联通原理。一、定位与整体架构插件的边界在哪里BiliNote 项目是一个「AI 视频笔记生成工具」核心能力是接收视频链接、转写内容、调用大模型生成结构化 Markdown 笔记。这条能力链在 backendFastAPI 服务中实现。而本插件的作用是把这条链路下沉到浏览器当前为 P1 MVP仅工具栏 popup——BillNote_extension/README.md插件本身不实现下载、转写、大模型推理而是做三件事识别读取当前标签页 URL识别是否属于支持的视频平台触发调用后端/api/generate_note提交笔记生成任务呈现轮询任务状态渲染 Markdown 结果提供复制与下载.md。这一分工在 README 中有明确说明桌面 Web 端BillNote_frontend/继续负责供应商/模型管理、转写器配置、笔记历史等管理界面插件不复刻这些管理界面仅消费已配置好的供应商。当前状态P1 MVP 与后续路线阶段状态能力P1✅ 已完成工具栏 popup自动读当前 tab URL、识别平台、触发笔记生成设置页后端地址、供应商/模型、画质、截图/跳转/风格默认值任务进度可视化、Markdown 渲染、复制/下载.mdchrome.storage.local持久化设置与最近 30 个任务P2⏳ 规划中视频页悬浮按钮 右键菜单 浏览器 cookie 直通P3⏳ 规划中side panel 思维导图markmapP4⏳ 规划中RAG 问答从源码结构看部分 P2/P3 能力已提前落地src/manifest.ts已声明contextMenus、cookies、sidePanel权限background/main.ts 已注册右键菜单「用 BiliNote 总结此视频」并实现chrome.sidePanel.open侧边栏界面src/sidepanel/与 markmap 依赖markmap-lib、markmap-view也已就位。说明 MVP 边界正在快速向 P2/P3 推进。二、环境依赖与本地开发2.1 依赖版本依赖要求Node.js20pnpm9package.json声明packageManager: pnpm9.7.1并基于 Vite 5 Vue 3 TypeScript 构建。2.2 安装与启动cd BillNote_extension pnpm install pnpm dev # watch 模式产物输出到 ./extension/pnpm dev实际执行的是 package.json 中的命令链先clear清理旧的extension/dist与extension/manifest.json再并行运行dev:prepareesno scripts/prepare.ts生成 manifest、dev:background构建 background service worker、dev:webVite 构建 popup/options/sidepanel 页面、dev:js构建 content script。开发模式下vite.config.background.mts会开启 HMRbackground 通过 contentScriptHMR.ts 注入最新版 content script避免浏览器缓存旧版本。如需 Firefox 开发构建用pnpm dev-firefox内部通过EXTENSIONfirefox环境变量切换 scripts/utils.ts 中的isFirefox标志从而生成 Firefox 适用的 manifest。2.3 加载到 Chrome打开chrome://extensions/开启右上角「开发者模式」点击「加载已解压的扩展程序」选择BillNote_extension/extension/目录启动后端cd backend python main.py默认端口 8483浏览器打开任意支持的视频页B 站 / YouTube / 抖音 / 快手点击工具栏 BiliNote 图标首次使用先打开「设置」填写后端地址 → 选择供应商 模型否则 popup 会提示「请先去设置页选择供应商和模型」。三、后端要求与 CORS 联通原理插件不依赖任何新增后端 endpoint唯一要求是后端 CORS 白名单需要放行扩展来源。当前后端 backend/main.py 已通过正则方式兼容CORS_ORIGIN_REGEX ( r^chrome-extension://[a-z]$ r|^moz-extension://.$ r|^http://(localhost|127\.0\.0\.1)(:\d)?$ r|^tauri://localhost$ r|^https?://tauri\.localhost$ )之所以用正则而非固定列表是因为chrome-extension://id的扩展 ID 在每次加载开发版扩展时不固定。若漏掉某类 origin会出现「前端报连不上后端但后端日志全是 200 OK」的典型症状——fetch请求本身到达了后端只是浏览器因 CORS 拒绝读取响应。插件端 API 层src/logic/api.ts统一以backendUrl默认http://localhost:8483拼接路径请求并对后端ResponseWrapper的{code, msg, data}信封做统一解包code ! 0视为业务错误抛出。四、popup从 URL 识别到笔记生成的核心链路popup 主逻辑位于 src/popup/Popup.vue。核心流程如下4.1 平台识别popup 挂载后通过browser.tabs.query({ active: true, currentWindow: true })读取当前标签页的 URL 与标题再由 src/logic/platform.ts 的detectPlatform判定平台if (/bilibili\.com\/video\//.test(url)) return bilibili if (/(youtube\.com\/watch|youtu\.be\/)/.test(url)) return youtube if (url.includes(douyin)) return douyin if (url.includes(kuaishou)) return kuaishou该函数注释明确「与 backend/app/validators/video_url_validator.py 保持一致」即前端识别规则与后端 URL 校验器严格对齐避免「前端识别成功、后端校验拒绝」的错位。非支持的页面会显示提示「当前页面不是 BiliNote 支持的视频链接」。4.2 B 站字幕预抓取Prefetched Transcript提交任务前若当前是 B 站视频popup 会先调用 src/logic/bilibili-subtitle.ts 的fetchBilibiliSubtitle在用户浏览器内直接抓取字幕利用 manifest 中host_permissions: *://*/*的覆盖service worker 里的fetch会自动携带.bilibili.com域名下的用户 cookiecredentials: include从而绕过 CORS调用api.bilibili.com/x/web-interface/view取cid再通过x/player/wbi/v2列出字幕轨字幕轨选择优先级为「人工中文 AI 中文 任意非空」pickSubtitle结果归一化为prefetched_transcript: { language, full_text, segments, source: bilibili_extension }随提交请求发送。该设计与后端 backend/app/downloaders/bilibili_subtitle.py 的BilibiliSubtitleFetcher行为对齐等于用用户当前浏览器的登录身份代替了后端配置的 SESSDATAAI 字幕等需要登录态的接口因此可以直接可用。对后端而言收到prefetched_transcript后即可跳过download_subtitles与音频转写两个阶段显著加快出笔记速度。4.3 提交任务与轮询start()方法把以下字段封装进GenerateRequest提交到/api/generate_note字段来源说明video_url当前 tab URL视频链接platformdetectPlatformbilibili / youtube / douyin / kuaishouquality设置项fast/medium/slow对应 32k / 64k / 128kprovider_id/model_name设置项大模型供应商与模型format设置项formats输出形式数组单一真相源screenshot/link由formats派生后端同时接受布尔与数组插件保持两者联动style/extras设置项笔记风格与额外提示词video_understanding/video_interval/grid_size设置项多模态视频理解参数见 §5.4prefetched_transcriptB 站预抓取可跳过后端转写阶段提交成功拿到task_id后poll()每 3 秒轮询/api/task_status/{taskId}并调用upsertTask更新本地任务记录。值得注意的细节getTaskStatus在 api.ts 中手动拆包——后端/task_status永远返回 HTTP 200任务失败时 body 为{code:500, msg, data:null}若走通用request()会抛异常导致 UI 收不到失败状态因此这里把失败翻译成status: FAILED交给 UI 展示。轮询出错如后端重启则以 5 秒间隔重试。任务状态机的完整阶段见 src/logic/types.tsPENDING → PARSING → DOWNLOADING → TRANSCRIBING → SUMMARIZING → FORMATTING → SAVING → SUCCESS或FAILED与 TaskProgress.vue 的进度条分段一一对应。4.4 侧边栏联动提交成功后 popup 会顺手调用openSidePanel()拉起侧边栏chrome.sidePanel.open({ tabId })避免用户来回切窗口。成功后侧边栏展示笔记/思维导图/AI 问答未完成时展示进度。侧边栏入口在 src/sidepanel/Sidepanel.vue。五、设置页每个配置项都对应后端什么行为设置页src/options/Options.vueManifest 中options_ui.open_in_tab: true使其以独立标签页打开包含 5 个标签通用、模型供应商、音频转写配置、下载配置、部署监控。5.1 后端地址与连通性测试「通用」页第一项是后端地址默认http://localhost:8483constants.ts 中DEFAULT_BACKEND_URL。提供「测试连通」按钮其实现为ping()——即尝试请求/api/get_all_providers成功即认为后端连通api.ts。「刷新」则重新拉取供应商列表并只保留enabled 1的项。5.2 供应商与模型选择供应商列表来自/api/get_all_providers展示内置type built-in与自定义供应商选定供应商后通过/api/model_enable/{providerId}拉取其可用模型若供应商下无模型页面提示「该供应商还没添加可用模型去『模型供应商』页编辑」。5.3 默认生成选项配置项取值对应后端影响画质快速 (32k) / 中等 (64k) / 高质 (128k)对应quality决定转写所用音频码率档位笔记风格minimal / detailed / tutorial / academic / xiaohongshu / life_journal / task_oriented / business / meeting_minutes对应style与后端 prompt_builder.py 的note_styles一一对齐types.ts输出形式目录(toc) / AI 总结(summary) / 原片截图(screenshot) / 原片跳转(link)对应formats与 web 端 NoteForm 对齐额外提示词自由文本对应extras追加到 prompt 末尾如「重点关注游戏开发部分保留所有专业术语原文」5.4 视频理解多模态设置页的「视频理解」区块对应后端多模态能力启用后按抽帧间隔截取视频帧拼成网格图连同字幕一起喂给视觉模型提升画面相关问题的回答质量。参数如下参数默认值范围说明video_understandingfalse开关是否启用抽帧拼图video_interval61–30 秒抽帧间隔grid_size[2, 2]每维 1–10拼图网格[rows, cols]每张拼图最多 rows×cols 帧重要限制启用视频理解必须选择视觉模型GPT-4o / Gemini / Claude 等文字模型会忽略图片——该警告在 popup 与设置页均有醒目提示。从提交逻辑可见video_interval与grid_size仅在启用video_understanding时才随请求发送见 Popup.vue避免无效字段干扰后端。5.5 模型供应商管理页「模型供应商」页src/options/pages/Providers.vue完整映射后端 Provider CRUDaddProvider→/api/add_provider自动附加logo: customupdateProvider→/api/update_providerconnectTest→/api/connect_test模型增删 →/api/models与/api/models/delete/{id}内置供应商type built-in只能查看与启停不能改 key。5.6 下载配置与浏览器 cookie 直通「下载配置」页src/options/pages/Downloader.vue支持为 bilibili / youtube / douyin / kuaishou 分别配置下载 cookie。其中「从浏览器同步」功能src/logic/cookies.ts即 P2 路线中的「cookie 直通」能力通过browser.cookies.getAll({ domain })读取当前浏览器内对应域名的 cookie拼成namevalue; namevalue; ...字符串后调用/api/update_downloader_cookie同步给后端——后端 bilibili_downloader.py 即按; 拆分解析该格式。若浏览器未登录该站点会提示「当前浏览器没有该域名的 cookie先在浏览器内登录目标站点」。5.7 部署监控「部署监控」页src/options/pages/Monitor.vue并发请求/api/deploy_status与/api/sys_health展示后端运行状态与端口、CUDA/GPU 可用性、Whisper 模型与转写器类型、FFmpeg 可用性等部署信息方便本地排障。六、存储chrome.storage.local 的持久化设计设置与任务历史均持久化于chrome.storage.local由 src/logic/storage.ts 统一管理设置键bilinote-settings默认值见 constants.tsbackendUrl: http://localhost:8483、quality: medium、formats: [toc,summary]、style: minimal等并通过useWebExtensionStorage的mergeDefaults: true保证旧版本升级后缺失字段自动补默认值任务键bilinote-tasks最多保留MAX_TASKS 30条最近任务upsertTask按 taskId 去重合并、新任务插队首、超限截断注意storage.ts使用 Vue 响应式封装注释明确「background service worker 不要 import 这个文件改用 chrome.storage 直读」——background 在 main.ts 中确实自己实现了readSettings/readTasks/writeTasks的 JSON 读写因为 service worker 无 DOM 也无 Vue 上下文。七、构建与发布pnpm build以 production 模式依次执行 clear → build:webpopup/options/sidepanel 页面→ build:prepare重新生成 manifest→ build:background → build:jscontent script产物输出到./extension/。发布打包命令如下pnpm build # 产物 → ./extension/ pnpm pack:zip # 打包 → ./extension.zip 上传 Chrome Web Store pnpm pack:crx # 打包 → ./extension.crx pnpm pack:xpi # 打包 → ./extension.xpi Firefoxpack:zip内部用jszip-cli压缩extension/*pack:crx用crx工具打包 Chrome 扩展pack:xpi用web-extMozilla 官方工具构建 Firefox 扩展包。Manifest 在构建期由 scripts/manifest.ts 调用 src/manifest.ts 动态生成MV3、popup/options/background/content script 声明、tabs/storage/activeTab/sidePanel/contextMenus/cookies权限、host_permissions: *://*/*等Firefox 下自动切换为background.scripts type: module与sidebar_actionChromium 下则使用service_worker与side_panel。此外pnpm start:chromium/pnpm start:firefox可直接用web-ext run启动浏览器调试扩展pnpm testVitest 单测与pnpm test:e2ePlaywright E2E见e2e/basic.spec.ts用于质量保障pnpm typecheck做 TS 静态检查。八、与桌面端 / 后端的职责边界总结层职责关键实现浏览器插件本文URL 识别、任务触发、进度展示、Markdown 渲染/复制/下载、B 站字幕预抓取、cookie 同步Popup.vue、background/main.ts、logic/api.ts桌面 Web 端BillNote_frontend/供应商/模型管理、转写器配置、笔记历史等完整管理界面src/pages/SettingPage/、src/services/后端backend/下载、转写、大模型总结、笔记落盘、任务状态机backend/app/routers/、backend/app/services/插件是后端的「轻量消费端」设置页的供应商/模型选择、转写器配置等管理功能不在此复刻而是直接消费后端已配置好的数据。这一边界的价值在于桌面端负责复杂管理插件负责随时随地一键出笔记。九、进阶排障与扩展提示连不上后端但后端日志 200多半是 CORS origin 未命中正则。开发版扩展 ID 会变化确认后端CORS_ORIGIN_REGEX覆盖chrome-extension://id本地调试也可直接访问http://localhost:8483验证后端存活。B 站字幕抓取失败AI 字幕需要登录态。确认已在浏览器登录 B 站插件利用的是当前浏览器会话的 cookie视频本身无字幕轨时fetchBilibiliSubtitle会返回null此时后端会走常规的下载转写链路兜底。任务卡在某个阶段轮询错误会以 5 秒间隔重试并展示错误信息可通过设置页「部署监控」查看后端各组件健康状态。模型未出现在下拉框先在「模型供应商」页为供应商添加模型/api/models并确认供应商enabled 1。右键菜单已可用虽然 P2 路线图仍标注「右键菜单」为规划项background 已在安装时注册bilinote-summarize-page菜单page/link/video 上下文配合bilinote-start消息桥即可在任意支持的视频页一键发起总结。赞分享AI 应用大模型RAG语音后端前端桌面应用【免费下载链接】BiliNoteAI 视频笔记生成工具 让 AI 为你的视频做笔记项目地址https://gitcode.com/gh_mirrors/bi/BiliNote点击查看免费下载相关推荐MAS 激活脚本上手Windows 激活与 Office 激活一次搞定MAS 激活脚本上手Windows 激活与 Office 激活一次搞定 MASMicrosoft Activation Scripts是社区开源激活脚本操作系统为什么Anti-recall能防撤回深入剖析微信QQ消息撤回机制为什么Anti recall能防撤回深入剖析微信QQ消息撤回机制 你是否曾经好奇过为什么别人撤回的消息你还能看到 今天我们就来深入探讨Anti rec移动开发即时通讯Markdown New Tab在浏览器新标签页中记录Markdown笔记Markdown New Tab在浏览器新标签页中记录Markdown笔记 1. 项目基础介绍与主要编程语言 Markdown New Tab 是一个开源项目上一篇告别混音烦恼Ultimate Vocal Remover GUI模型选择指南下一篇yazi字符串处理UTF-8安全与性能优化的平衡创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
BiliNote 浏览器插件开发指南：把「视频链接 → Markdown 笔记」能力下沉到浏览器
AI 应用大模型RAG语音后端前端桌面应用【免费下载链接】BiliNoteAI 视频笔记生成工具 让 AI 为你的视频做笔记项目地址https://gitcode.com/gh_mirrors/bi/BiliNote点击查看免费下载导读BiliNote 浏览器插件 是 BiliNote 项目的浏览器端形态它把后端「视频链接 → Markdown 笔记」的核心流水线搬进了浏览器工具栏自动读取当前标签页的 URL、识别 B 站 / YouTube / 抖音 / 快手平台、一键触发笔记生成并在 popup、侧边栏中实时展示任务进度与渲染结果。读完本文你将掌握插件的功能范围与当前 MVP 边界、本地开发与加载调试的完整流程、设置页各配置项的含义后端地址、供应商/模型、画质、风格、多模态视频理解等、构建打包发布命令以及插件与桌面 Web 端、后端之间的职责分工与 CORS 联通原理。一、定位与整体架构插件的边界在哪里BiliNote 项目是一个「AI 视频笔记生成工具」核心能力是接收视频链接、转写内容、调用大模型生成结构化 Markdown 笔记。这条能力链在 backendFastAPI 服务中实现。而本插件的作用是把这条链路下沉到浏览器当前为 P1 MVP仅工具栏 popup——BillNote_extension/README.md插件本身不实现下载、转写、大模型推理而是做三件事识别读取当前标签页 URL识别是否属于支持的视频平台触发调用后端/api/generate_note提交笔记生成任务呈现轮询任务状态渲染 Markdown 结果提供复制与下载.md。这一分工在 README 中有明确说明桌面 Web 端BillNote_frontend/继续负责供应商/模型管理、转写器配置、笔记历史等管理界面插件不复刻这些管理界面仅消费已配置好的供应商。当前状态P1 MVP 与后续路线阶段状态能力P1✅ 已完成工具栏 popup自动读当前 tab URL、识别平台、触发笔记生成设置页后端地址、供应商/模型、画质、截图/跳转/风格默认值任务进度可视化、Markdown 渲染、复制/下载.mdchrome.storage.local持久化设置与最近 30 个任务P2⏳ 规划中视频页悬浮按钮 右键菜单 浏览器 cookie 直通P3⏳ 规划中side panel 思维导图markmapP4⏳ 规划中RAG 问答从源码结构看部分 P2/P3 能力已提前落地src/manifest.ts已声明contextMenus、cookies、sidePanel权限background/main.ts 已注册右键菜单「用 BiliNote 总结此视频」并实现chrome.sidePanel.open侧边栏界面src/sidepanel/与 markmap 依赖markmap-lib、markmap-view也已就位。说明 MVP 边界正在快速向 P2/P3 推进。二、环境依赖与本地开发2.1 依赖版本依赖要求Node.js20pnpm9package.json声明packageManager: pnpm9.7.1并基于 Vite 5 Vue 3 TypeScript 构建。2.2 安装与启动cd BillNote_extension pnpm install pnpm dev # watch 模式产物输出到 ./extension/pnpm dev实际执行的是 package.json 中的命令链先clear清理旧的extension/dist与extension/manifest.json再并行运行dev:prepareesno scripts/prepare.ts生成 manifest、dev:background构建 background service worker、dev:webVite 构建 popup/options/sidepanel 页面、dev:js构建 content script。开发模式下vite.config.background.mts会开启 HMRbackground 通过 contentScriptHMR.ts 注入最新版 content script避免浏览器缓存旧版本。如需 Firefox 开发构建用pnpm dev-firefox内部通过EXTENSIONfirefox环境变量切换 scripts/utils.ts 中的isFirefox标志从而生成 Firefox 适用的 manifest。2.3 加载到 Chrome打开chrome://extensions/开启右上角「开发者模式」点击「加载已解压的扩展程序」选择BillNote_extension/extension/目录启动后端cd backend python main.py默认端口 8483浏览器打开任意支持的视频页B 站 / YouTube / 抖音 / 快手点击工具栏 BiliNote 图标首次使用先打开「设置」填写后端地址 → 选择供应商 模型否则 popup 会提示「请先去设置页选择供应商和模型」。三、后端要求与 CORS 联通原理插件不依赖任何新增后端 endpoint唯一要求是后端 CORS 白名单需要放行扩展来源。当前后端 backend/main.py 已通过正则方式兼容CORS_ORIGIN_REGEX ( r^chrome-extension://[a-z]$ r|^moz-extension://.$ r|^http://(localhost|127\.0\.0\.1)(:\d)?$ r|^tauri://localhost$ r|^https?://tauri\.localhost$ )之所以用正则而非固定列表是因为chrome-extension://id的扩展 ID 在每次加载开发版扩展时不固定。若漏掉某类 origin会出现「前端报连不上后端但后端日志全是 200 OK」的典型症状——fetch请求本身到达了后端只是浏览器因 CORS 拒绝读取响应。插件端 API 层src/logic/api.ts统一以backendUrl默认http://localhost:8483拼接路径请求并对后端ResponseWrapper的{code, msg, data}信封做统一解包code ! 0视为业务错误抛出。四、popup从 URL 识别到笔记生成的核心链路popup 主逻辑位于 src/popup/Popup.vue。核心流程如下4.1 平台识别popup 挂载后通过browser.tabs.query({ active: true, currentWindow: true })读取当前标签页的 URL 与标题再由 src/logic/platform.ts 的detectPlatform判定平台if (/bilibili\.com\/video\//.test(url)) return bilibili if (/(youtube\.com\/watch|youtu\.be\/)/.test(url)) return youtube if (url.includes(douyin)) return douyin if (url.includes(kuaishou)) return kuaishou该函数注释明确「与 backend/app/validators/video_url_validator.py 保持一致」即前端识别规则与后端 URL 校验器严格对齐避免「前端识别成功、后端校验拒绝」的错位。非支持的页面会显示提示「当前页面不是 BiliNote 支持的视频链接」。4.2 B 站字幕预抓取Prefetched Transcript提交任务前若当前是 B 站视频popup 会先调用 src/logic/bilibili-subtitle.ts 的fetchBilibiliSubtitle在用户浏览器内直接抓取字幕利用 manifest 中host_permissions: *://*/*的覆盖service worker 里的fetch会自动携带.bilibili.com域名下的用户 cookiecredentials: include从而绕过 CORS调用api.bilibili.com/x/web-interface/view取cid再通过x/player/wbi/v2列出字幕轨字幕轨选择优先级为「人工中文 AI 中文 任意非空」pickSubtitle结果归一化为prefetched_transcript: { language, full_text, segments, source: bilibili_extension }随提交请求发送。该设计与后端 backend/app/downloaders/bilibili_subtitle.py 的BilibiliSubtitleFetcher行为对齐等于用用户当前浏览器的登录身份代替了后端配置的 SESSDATAAI 字幕等需要登录态的接口因此可以直接可用。对后端而言收到prefetched_transcript后即可跳过download_subtitles与音频转写两个阶段显著加快出笔记速度。4.3 提交任务与轮询start()方法把以下字段封装进GenerateRequest提交到/api/generate_note字段来源说明video_url当前 tab URL视频链接platformdetectPlatformbilibili / youtube / douyin / kuaishouquality设置项fast/medium/slow对应 32k / 64k / 128kprovider_id/model_name设置项大模型供应商与模型format设置项formats输出形式数组单一真相源screenshot/link由formats派生后端同时接受布尔与数组插件保持两者联动style/extras设置项笔记风格与额外提示词video_understanding/video_interval/grid_size设置项多模态视频理解参数见 §5.4prefetched_transcriptB 站预抓取可跳过后端转写阶段提交成功拿到task_id后poll()每 3 秒轮询/api/task_status/{taskId}并调用upsertTask更新本地任务记录。值得注意的细节getTaskStatus在 api.ts 中手动拆包——后端/task_status永远返回 HTTP 200任务失败时 body 为{code:500, msg, data:null}若走通用request()会抛异常导致 UI 收不到失败状态因此这里把失败翻译成status: FAILED交给 UI 展示。轮询出错如后端重启则以 5 秒间隔重试。任务状态机的完整阶段见 src/logic/types.tsPENDING → PARSING → DOWNLOADING → TRANSCRIBING → SUMMARIZING → FORMATTING → SAVING → SUCCESS或FAILED与 TaskProgress.vue 的进度条分段一一对应。4.4 侧边栏联动提交成功后 popup 会顺手调用openSidePanel()拉起侧边栏chrome.sidePanel.open({ tabId })避免用户来回切窗口。成功后侧边栏展示笔记/思维导图/AI 问答未完成时展示进度。侧边栏入口在 src/sidepanel/Sidepanel.vue。五、设置页每个配置项都对应后端什么行为设置页src/options/Options.vueManifest 中options_ui.open_in_tab: true使其以独立标签页打开包含 5 个标签通用、模型供应商、音频转写配置、下载配置、部署监控。5.1 后端地址与连通性测试「通用」页第一项是后端地址默认http://localhost:8483constants.ts 中DEFAULT_BACKEND_URL。提供「测试连通」按钮其实现为ping()——即尝试请求/api/get_all_providers成功即认为后端连通api.ts。「刷新」则重新拉取供应商列表并只保留enabled 1的项。5.2 供应商与模型选择供应商列表来自/api/get_all_providers展示内置type built-in与自定义供应商选定供应商后通过/api/model_enable/{providerId}拉取其可用模型若供应商下无模型页面提示「该供应商还没添加可用模型去『模型供应商』页编辑」。5.3 默认生成选项配置项取值对应后端影响画质快速 (32k) / 中等 (64k) / 高质 (128k)对应quality决定转写所用音频码率档位笔记风格minimal / detailed / tutorial / academic / xiaohongshu / life_journal / task_oriented / business / meeting_minutes对应style与后端 prompt_builder.py 的note_styles一一对齐types.ts输出形式目录(toc) / AI 总结(summary) / 原片截图(screenshot) / 原片跳转(link)对应formats与 web 端 NoteForm 对齐额外提示词自由文本对应extras追加到 prompt 末尾如「重点关注游戏开发部分保留所有专业术语原文」5.4 视频理解多模态设置页的「视频理解」区块对应后端多模态能力启用后按抽帧间隔截取视频帧拼成网格图连同字幕一起喂给视觉模型提升画面相关问题的回答质量。参数如下参数默认值范围说明video_understandingfalse开关是否启用抽帧拼图video_interval61–30 秒抽帧间隔grid_size[2, 2]每维 1–10拼图网格[rows, cols]每张拼图最多 rows×cols 帧重要限制启用视频理解必须选择视觉模型GPT-4o / Gemini / Claude 等文字模型会忽略图片——该警告在 popup 与设置页均有醒目提示。从提交逻辑可见video_interval与grid_size仅在启用video_understanding时才随请求发送见 Popup.vue避免无效字段干扰后端。5.5 模型供应商管理页「模型供应商」页src/options/pages/Providers.vue完整映射后端 Provider CRUDaddProvider→/api/add_provider自动附加logo: customupdateProvider→/api/update_providerconnectTest→/api/connect_test模型增删 →/api/models与/api/models/delete/{id}内置供应商type built-in只能查看与启停不能改 key。5.6 下载配置与浏览器 cookie 直通「下载配置」页src/options/pages/Downloader.vue支持为 bilibili / youtube / douyin / kuaishou 分别配置下载 cookie。其中「从浏览器同步」功能src/logic/cookies.ts即 P2 路线中的「cookie 直通」能力通过browser.cookies.getAll({ domain })读取当前浏览器内对应域名的 cookie拼成namevalue; namevalue; ...字符串后调用/api/update_downloader_cookie同步给后端——后端 bilibili_downloader.py 即按; 拆分解析该格式。若浏览器未登录该站点会提示「当前浏览器没有该域名的 cookie先在浏览器内登录目标站点」。5.7 部署监控「部署监控」页src/options/pages/Monitor.vue并发请求/api/deploy_status与/api/sys_health展示后端运行状态与端口、CUDA/GPU 可用性、Whisper 模型与转写器类型、FFmpeg 可用性等部署信息方便本地排障。六、存储chrome.storage.local 的持久化设计设置与任务历史均持久化于chrome.storage.local由 src/logic/storage.ts 统一管理设置键bilinote-settings默认值见 constants.tsbackendUrl: http://localhost:8483、quality: medium、formats: [toc,summary]、style: minimal等并通过useWebExtensionStorage的mergeDefaults: true保证旧版本升级后缺失字段自动补默认值任务键bilinote-tasks最多保留MAX_TASKS 30条最近任务upsertTask按 taskId 去重合并、新任务插队首、超限截断注意storage.ts使用 Vue 响应式封装注释明确「background service worker 不要 import 这个文件改用 chrome.storage 直读」——background 在 main.ts 中确实自己实现了readSettings/readTasks/writeTasks的 JSON 读写因为 service worker 无 DOM 也无 Vue 上下文。七、构建与发布pnpm build以 production 模式依次执行 clear → build:webpopup/options/sidepanel 页面→ build:prepare重新生成 manifest→ build:background → build:jscontent script产物输出到./extension/。发布打包命令如下pnpm build # 产物 → ./extension/ pnpm pack:zip # 打包 → ./extension.zip 上传 Chrome Web Store pnpm pack:crx # 打包 → ./extension.crx pnpm pack:xpi # 打包 → ./extension.xpi Firefoxpack:zip内部用jszip-cli压缩extension/*pack:crx用crx工具打包 Chrome 扩展pack:xpi用web-extMozilla 官方工具构建 Firefox 扩展包。Manifest 在构建期由 scripts/manifest.ts 调用 src/manifest.ts 动态生成MV3、popup/options/background/content script 声明、tabs/storage/activeTab/sidePanel/contextMenus/cookies权限、host_permissions: *://*/*等Firefox 下自动切换为background.scripts type: module与sidebar_actionChromium 下则使用service_worker与side_panel。此外pnpm start:chromium/pnpm start:firefox可直接用web-ext run启动浏览器调试扩展pnpm testVitest 单测与pnpm test:e2ePlaywright E2E见e2e/basic.spec.ts用于质量保障pnpm typecheck做 TS 静态检查。八、与桌面端 / 后端的职责边界总结层职责关键实现浏览器插件本文URL 识别、任务触发、进度展示、Markdown 渲染/复制/下载、B 站字幕预抓取、cookie 同步Popup.vue、background/main.ts、logic/api.ts桌面 Web 端BillNote_frontend/供应商/模型管理、转写器配置、笔记历史等完整管理界面src/pages/SettingPage/、src/services/后端backend/下载、转写、大模型总结、笔记落盘、任务状态机backend/app/routers/、backend/app/services/插件是后端的「轻量消费端」设置页的供应商/模型选择、转写器配置等管理功能不在此复刻而是直接消费后端已配置好的数据。这一边界的价值在于桌面端负责复杂管理插件负责随时随地一键出笔记。九、进阶排障与扩展提示连不上后端但后端日志 200多半是 CORS origin 未命中正则。开发版扩展 ID 会变化确认后端CORS_ORIGIN_REGEX覆盖chrome-extension://id本地调试也可直接访问http://localhost:8483验证后端存活。B 站字幕抓取失败AI 字幕需要登录态。确认已在浏览器登录 B 站插件利用的是当前浏览器会话的 cookie视频本身无字幕轨时fetchBilibiliSubtitle会返回null此时后端会走常规的下载转写链路兜底。任务卡在某个阶段轮询错误会以 5 秒间隔重试并展示错误信息可通过设置页「部署监控」查看后端各组件健康状态。模型未出现在下拉框先在「模型供应商」页为供应商添加模型/api/models并确认供应商enabled 1。右键菜单已可用虽然 P2 路线图仍标注「右键菜单」为规划项background 已在安装时注册bilinote-summarize-page菜单page/link/video 上下文配合bilinote-start消息桥即可在任意支持的视频页一键发起总结。赞分享AI 应用大模型RAG语音后端前端桌面应用【免费下载链接】BiliNoteAI 视频笔记生成工具 让 AI 为你的视频做笔记项目地址https://gitcode.com/gh_mirrors/bi/BiliNote点击查看免费下载相关推荐MAS 激活脚本上手Windows 激活与 Office 激活一次搞定MAS 激活脚本上手Windows 激活与 Office 激活一次搞定 MASMicrosoft Activation Scripts是社区开源激活脚本操作系统为什么Anti-recall能防撤回深入剖析微信QQ消息撤回机制为什么Anti recall能防撤回深入剖析微信QQ消息撤回机制 你是否曾经好奇过为什么别人撤回的消息你还能看到 今天我们就来深入探讨Anti rec移动开发即时通讯Markdown New Tab在浏览器新标签页中记录Markdown笔记Markdown New Tab在浏览器新标签页中记录Markdown笔记 1. 项目基础介绍与主要编程语言 Markdown New Tab 是一个开源项目上一篇告别混音烦恼Ultimate Vocal Remover GUI模型选择指南下一篇yazi字符串处理UTF-8安全与性能优化的平衡创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
