B站弹幕统计开发踩坑
本帖最后由 啦la啦 于 2026-4-16 11:03 编辑## 脚本(https://scriptcat.org/zh-CN/script-show-page/3750) v3.0.0 开发踩坑
原版 (https://bbs.tampermonkey.net.cn/thread-9084-1-1.html) 是我第一次写油猴脚本，原本只是想写个看看谁发刷屏弹幕的小功能，结果越写越臃肿，成了一坨石山，于是下定决心重构项目。非常感谢脚本站的[教程](https://learn.scriptcat.org/) 🙏
**技术路线**
- Vue 框架
- (https://www.naiveui.com/) UI库
- (https://echarts.apache.org/zh/index.html) 图表库（另外还有单独的(https://www.npmjs.com/package/echarts-wordcloud) 词云图表）
- (https://www.npmjs.com/package/jieba-wasm) 分词库，可直接引入，跑在worker里
- (https://www.html2canvas.cn/) 截图库
- (https://github.com/lisonge/vite-plugin-monkey) 构建项目。好的工具对开发效率提升很大，有ai在也没有多少学习成本。除了这个也可以用站长开发的(https://bbs.tampermonkey.net.cn/thread-1191-1-1.html) ~~感觉没有vite-plugin-monkey好用~~
**重构项目踩坑**
- 从原本`ElementPlus`转向(https://www.naiveui.com/)，支持切换主题色
> 切换主题色是次要的，主要是因为ElementPlus不支持`Shadow DOM`，(https://github.com/ZBpine/bili-data-viewer/blob/main/README.md#shadow-dom踩坑)，但还能解决。`Naive UI` 还有个优势就是样式是js动态注入的，不需要引入css
- 大幅提升打开面板速度
- B站本身也有用Vue，必须隔离脚本。之前使用`iframe`，每次打开都要加载库，因此很慢
- 现在使用`@require`加载库，油猴会缓存。
> 有个我很久才弄明白的事情，脚本发布 `GreasyFork` 的话，对`@require` 的cdn有比较严格的[限制](https://greasyfork.org/zh-CN/help/cdns)。对于jsdelivr来说，npm源需要@具体版本号，github源需要@具体某次的commit的SHA
- `@require` Vue的话，需要赋给window，不然naive-ui用不了。参考[教程 Vue的引用](https://learn.scriptcat.org/实用知识库/引用库使用/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` 国内访问不稳定，因此脚本猫版本使用 (https://cdn.jsdmirror.com/) 。脚本猫好像不怎么检查 `@require`
**感谢**
- (https://github.com/SocialSisterYi/bilibili-API-collect) 几乎收集了B站大部分的API，可惜就在今年被B站发律师函了，可以在github搜别人fork的
- (https://github.com/esterTion/BiliBili_crc2mid) 反查hash的代码来自这
- 感谢chatgpt、gemini的大力栽培，没有你们就没有我的脚本
!(https://cdn.jsdmirror.com/gh/ZBpine/bili-data-statistic@main/assets/legend.png) ggnb! 感谢分享！这个webpack插件确实没vite monkey好用{:4_108:}，而且也没怎么维护 王一之 发表于 2026-4-15 14:16
感谢分享！这个webpack插件确实没vite monkey好用，而且也没怎么维护
太感谢大佬们的教程和工具了orz. webpack插件其实没啥问题，主要是vue项目用vite确实有优势
页:
[1]