Files
BiliNote/BillNote_extension
huangjianwu 880587f2db feat(extension): P2 视频页悬浮按钮 + 右键菜单 + cookie 直通;P3 侧边栏首版
- contentScripts: 仅在支持的视频平台(B 站 / YouTube / 抖音 / 快手)注入悬浮 BiliNote 按钮,点击通过 webext-bridge 发 'bilinote-start' 给 background
- background: 处理 bilinote-start 与右键菜单点击;调 /api/generate_note;写 chrome.storage;自动打开侧边栏。logic/storage 是 Vue 反应式版本,service worker 不能 import,因此把常量抽到 logic/constants.ts
- contextMenus: onInstalled 时注册"用 BiliNote 总结此视频",限定 4 个支持平台域名
- 浏览器 Cookie 同步:options 页加按钮,按平台读 chrome.cookies.getAll,序列化为 'name=value; ...' 后 POST 给后端 /api/update_downloader_cookie。chrome.cookies + contextMenus 权限补到 manifest
- 侧边栏(P3 首版):从 storage 读最近任务并轮询,复用 TaskProgress + MarkdownView。markmap 思维导图与 RAG 问答推到后续
- 修 P1 endpoint 拼错的 bug:/api/get_models_by_provider 实际是 /api/model_enable,404 来自这里

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-07 11:46:09 +08:00
..
2026-05-07 11:40:15 +08:00

BiliNote 浏览器插件

把 BiliNote 的"视频链接 → Markdown 笔记"能力下沉到浏览器插件。当前为 P1 MVP仅工具栏 popup

当前状态P1 MVP

  • 工具栏图标 popup自动读当前 tab URL识别支持平台触发笔记生成
  • 设置页:后端地址、供应商/模型、画质、截图/跳转/风格默认值
  • 任务进度可视化、Markdown 渲染、复制 / 下载 .md
  • chrome.storage.local 持久化设置和最近 30 个任务
  • P2视频页悬浮按钮 + 右键菜单 + 浏览器 cookie 直通
  • P3side panel + 思维导图markmap
  • P4RAG 问答

开发

依赖node 20+ / pnpm 9+

cd BillNote_extension
pnpm install
pnpm dev      # watch 模式,产物输出到 ./extension/

加载到 Chrome

  1. chrome://extensions/ → 打开右上"开发者模式"
  2. 点"加载已解压的扩展程序",选 BillNote_extension/extension/ 目录
  3. 启动后端:cd backend && python main.py(默认 8483
  4. 浏览器开任意支持的视频页B 站 / YouTube / 抖音 / 快手),点工具栏 BiliNote 图标
  5. 首次使用先打开"设置",填后端地址 → 选供应商 + 模型

后端要求

后端 backend/main.py 的 CORS 白名单已通过 regex 兼容 chrome-extension://moz-extension:// 与本地 web。无需新增任何 backend endpoint。

构建发布

pnpm build         # 产物 → ./extension/
pnpm pack:zip      # 打包 → ./extension.zip (上传 Chrome Web Store
pnpm pack:crx      # 打包 → ./extension.crx
pnpm pack:xpi      # 打包 → ./extension.xpi Firefox

与桌面端的关系

桌面 web 端(BillNote_frontend/)继续负责:供应商/模型管理、转写器配置、笔记历史。 插件复刻这些管理界面,仅消费已配置好的供应商。

致谢

骨架基于 vitesse-webextAntfu