我用vibe coding一天做了个B站笔记插件（opencode + cursor）

MaXiaoTiao1105
5 阅读4分钟

产品介绍

有许多人会选择在Bilibili这一平台上进行学习，其中有着非常广泛的学习资源，我自己在B站看学习视频，苦于没办法边看边记笔记，所以就自己做了一个。针对这一个边看边记的场景，开发了这一款可以应用于Edge浏览器以及Chrome浏览器的小插件，使得我们可以在边看视频，亦或是边看文章，便可以随手打开一个便签进行一个记录。

功能概览

  1. 快捷键Alt + N,即刻弹出记笔记的快捷窗口
  2. 点击截屏按钮，可以获取当前视频的时间戳，截屏这一时刻的视频内容，并且插入到当前笔记当中
  3. 在写好当前的笔记之后，点击保存，即可保存至插件中
  4. 当看完一个学习视频后，可以直接点击插件，这时可以看到，笔记会以每个视频的方式记录下来，按照视频的顺序进行排列，并且按照时间戳的顺序排列好
  5. 导出之后，会得到一个html的文件，其中就会包含视频的笔记以及相应的截图

技术栈选型

  • Manifest V3
  • Chrome Storage API
  • Chrome Downloads API
  • Canvas API
  • MutationObserver
  • 纯前端

提示词

  • 关于功能开发上的prompt
帮我做一个Chrome浏览器插件，功能如下：
在bilibili视频页面，用户按下快捷键 Alt+N，在视频右侧弹出一个输入框，自动记录当前视频的时间戳，用户可以输入笔记内容，按Enter保存。
所有笔记显示在一个侧边栏里，每条笔记显示时间戳+内容，点击时间戳可以跳转到视频对应位置。
笔记数据保存在本地，页面刷新后不丢失。支持一键导出所有笔记为Markdown格式。
技术要求：纯Chrome插件，manifest v3，不需要后端。
  • UI设计上的prompt
UI的设计 尤其是popup的设计简直是AI的标准 请你redesign这一个UI 其余的功能保持不变
要求UI的设计页面，不要使用蓝紫渐变配色，可以使用粉白，白金，亦或是黑金配色
要求UI的设计是简洁流畅的，不要有突兀的按钮，和不恰当不自然的Icon图标出现

遇到的问题以及解决的方案

  1. 在导出的时候，截屏的图片无法显示，只能显示一串base64的编码

    考虑到markdown文件的特殊性和其base64编码的复杂性
可以考虑适当换一种展现形式
例如HTML的展现方式这一展现方式要求是可以简洁的展示出截屏图片以及图片对应的笔记内容

  2. 在初始导出的时候，会出现导出的图片聚在一起，并没有与配文相对应，且归纳方式不是以时间戳，也不是以视频作为笔记的分类标准，因此使用起来会出现体验不好的情况

    这一个项目现在面临着一个难题就是：
1、在导出笔记的时候，截屏无法正常导出
2、且不能随着每一个笔记的完整来进行导出
（就是它好像不是笔记一 笔记二 xxx加截图）而是一股脑地先给出笔记一 二的内容，然后最后放图片 
这违反了人们使用的习惯
请你根据这一个问题，优化用户的体验

  3. 默认情况下 chrome.storage.local 只有 10MB 的配额，而你每次截图保存的是 base64 编码的 PNG 图片，一张截图可能就有几百 KB 甚至几 MB。存几条带截图的笔记就超限了。

    修复的方案为：1、在 manifest.json 里加一个 unlimitedStorage 权限
             2、优化截图体积——把 PNG 改成 JPEG 压缩，大幅减少存储占用

v1.0的产品展示

  • 笔记记录

动画.gif

  • 导出笔记的样式 {5A22069B-50D8-481B-8E15-8D30DD616804}.png

GitHub开源链接

github.com/MaXiaoTiao1…

使用流程

下载zip → 打开扩展程序页面 → 开启开发者模式 → 加载解压的扩展程序，会让更多不熟悉Chrome插件安装的读者也能用起来

欢迎大家有其他需求和意见的 都可以在评论区进行评论，后续的优化与开发会详细参考各位的意见！ 谢谢大家了！

avatar
文章
阅读
粉丝