Files
BiliNote/BillNote_extension/README.md
huangjianwu b8f359e7e7 feat(extension): 浏览器插件 P1 MVP
新建 BillNote_extension/ 工作空间(基于 vitesse-webext 骨架,Vue 3 + Vite + UnoCSS + MV3)。

P1 MVP 范围:
- popup:自动读当前 tab URL,识别 Bilibili / YouTube / 抖音 / 快手;提交 /generate_note 后轮询 /task_status;展示 markdown,复制 + 下载 .md
- options:后端地址输入与连通性测试;从 /get_all_providers + /get_models_by_provider 拉供应商/模型列表;默认画质、截图/跳转、笔记风格
- chrome.storage.local 持久化设置与最近 30 个任务,popup 重开恢复进行中任务
- markdown 里的 /static/screenshots 路径在渲染前重写为绝对地址

后端:CORS 改用 regex,新增允许 chrome-extension:// 与 moz-extension:// 源(同时保留 localhost / 127.0.0.1 / tauri.localhost)。无新增 backend endpoint。

P2-P4(content script 悬浮按钮、cookie 直通、side panel、思维导图、RAG 问答)保留 stub 文件,不在本次范围。

去掉 vitesse-webext 自带的 simple-git-hooks postinstall 配置——它会在仓库根装 pre-commit 钩子去跑 pnpm lint-staged,但仓库根没有 package.json,会破坏所有提交流。

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

1.9 KiB
Raw Blame History

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