B站弹幕统计开发踩坑

啦la啦 · 发表于前天 01:17

本帖最后由啦la啦于 2026-4-16 11:03 编辑

脚本B站弹幕统计 v3.0.0 开发踩坑

原版 bilibili 视频弹幕统计|下载|查询发送者是我第一次写油猴脚本，原本只是想写个看看谁发刷屏弹幕的小功能，结果越写越臃肿，成了一坨石山，于是下定决心重构项目。非常感谢脚本站的教程 🙏

技术路线

Vue 框架
naive UI库
echarts 图表库（另外还有单独的echarts-wordcloud 词云图表）
jieba-wasm 分词库，可直接引入，跑在worker里
html2canvas 截图库
vite-plugin-monkey 构建项目。好的工具对开发效率提升很大，有ai在也没有多少学习成本。除了这个也可以用站长开发的webpack插件 ~~感觉没有vite-plugin-monkey好用~~

重构项目踩坑

从原本ElementPlus转向NaiveUI，支持切换主题色

切换主题色是次要的，主要是因为ElementPlus不支持Shadow DOM，NaiveUI 使用Shadow DOM也有坑，但还能解决。Naive UI 还有个优势就是样式是js动态注入的，不需要引入css
大幅提升打开面板速度
- B站本身也有用Vue，必须隔离脚本。之前使用iframe，每次打开都要加载库，因此很慢
- 现在使用@require加载库，油猴会缓存。
  
  有个我很久才弄明白的事情，脚本发布 GreasyFork 的话，对@require 的cdn有比较严格的限制。对于jsdelivr来说，npm源需要@具体版本号，github源需要@具体某次的commit的SHA
- @require Vue的话，需要赋给window，不然naive-ui用不了。参考教程 Vue的引用
B站本身有很多奇奇怪怪的bug，需要@grant沙盒隔离脚本，ShadowDOM隔离样式。
- 在沙盒环境echarts.wordcloud 画的奇慢无比，问ai说是因为油猴沙盒本质是对window的Proxy代理，词云绘制时需要大量频繁使用window方法，被Proxy拖慢了速度。因此echarts和wordcloud还是通过 \<script> 直接插入页面。
- B站还会导致 html2canvas 截图卡很久，问ai问冒烟了都没解决，实在没招了。现在方案是先打开外部页面，在外部页面截图。（也试过使用html-to-image。问题是 html-to-image 截图时不同步滚动条，虚拟列表如果滚动了，还截最上面那就成空白了）
jsdelivr 国内访问不稳定，因此脚本猫版本使用 jsdmirror 。脚本猫好像不怎么检查 @require