B站弹幕统计开发踩坑

啦la啦

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

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

• 使用 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