话不多说,先看效果,非常之暴力+魔幻。
很多年前看到 b 站的弹幕,就非常想开发一个可以全网弹幕的工具。
彼时,还没有 ChatGPT 这么强大的伙伴,而我,一个前端菜鸡,想完成这一切是非常难的。
而如今不同了,在 ChatGPT 的加持下,我,已然成长为一个 StrongMan !
事情应该从前几天开始说起,这不,最近闲下来的我想给自己的博客的主机源码升级一下评论的插件,写着写着忽然想到,如果做成弹幕岂不是更好玩?然后又想起曾经想要做的全网弹幕插件,想到是不是可以用 tampermonkey 来实现。于是先用 tampermonkey 先简单实现了一版,但是又觉得但单调了。以来很多人不想用 tampermonkey ,也不想再为这个功能专门装个 tampermonkey ,此外既然是弹幕,多少得加上一些设置功能,设置特效啊啥的,所以就干脆写成独立的插件吧。然后就在 ChatGPT 的帮助下爆肝几个晚上开发了这个弹幕插件–弹幕局 v1.0
在 ChatGPT 的帮助下,源码很快就写出来了。
安装了这个插件之后,在网页上按下”F4“即可唤出这个弹幕面板,输入内容就可以发送弹幕了。
值得一提的是,可以允许用户切换频道,后端我已经完全开源出来了(基于 CloudFlare 的 Pages ),源码在这里: https://github.com/Chorder/danmuju ,你可以基于开源的后端源码,搭建一个只属于你和你小伙伴的专属私人弹幕频道,这样相对来说就更加私密和安全了。
这个开源的后端是基于 CloudFlare 的 Pages 构建的,如果你对 Pages 很熟悉,应该一看就明白,只需要克隆仓库过去,用 wrangler 创建一个 D1 数据库,然后在 pages 项目上绑定数据库,配置从 Github 仓库构建,框架选 Vue/Vite ,即可。如果你对上述这些不是很熟悉,也不用着急,过段时间我会再详细补充一下文档。
弹幕局插件包含一个设置界面,这里可以开启和关闭弹幕,也可以设置弹幕的字体和字号、速度等,一开始甚至想要加上自定义 css ,不过想到 css 可能会引入很多的安全问题,就这样也够用了,那就先这样吧,以后的版本有时间可以再慢慢完善。
目前的弹幕可以横着飞,竖着非,斜着飞,嘎嘎乱飞,已经很暴力了,我个人很喜欢,哈哈!
对了,怎么安装:
目前火狐的插件已经上传了正在审核中,审核完成我挥第一时间在这里分享。Chrome 的插件想要上传得支付 5 美金,算了算了,还是走开源路线吧。。。
所以想要尝鲜的小伙伴可以从 Github 直接下载客户端源码或者压缩包,临时加载插件,方法如下:
插件源码地址:
Chrome:https://github.com/Chorder/danmuju/tree/master/clients/danmuju-chrome
Firefox:https://github.com/Chorder/danmuju/tree/master/clients/danmuju-firefox
压缩包下载地址:
https://github.com/Chorder/danmuju/tree/master/clients
上面链接打开之后有两个压缩包:danmuju-chrome_1.0.zip 和 danmuju-firefox_1.0.zip ,需要哪个版本就下载哪个版本。下载下来解压之后就能看到源代码,觉得哪里不爽就自己改(改完可以 PR 到仓库呀!)
尤其是如果觉得快捷键(目前是 F4 )用的不爽,可以修改插件源码 content.js 的第 501 行,修改成你想要的快捷键即可。
火狐,点击临时加载附加组件,选择 danmuju-firefox_1.0.zip 即可安装。
Chrome 和 Edge ,打开开发模式,直接把压缩包下载下来解压,然后点击”加载解压缩的拓展“即可安装。
经过测试,Chrome 版的 zip 是可以在 Edge 良好运行的。如果安装之后看不到弹幕,需要点开插件的设置面板,把弹幕开关开启一下。
安装好弹幕,打开百度或者这个网页,你应该可以看到我发的测试弹幕了。
最后关于全网弹幕这个思路,再简单讲几点
安全
这个插件最应该防范的就是前端攻击,例如 XSS 、浏览器沙箱逃逸等。前者我已经测试过基本没啥问题,dom 型和非 dom 型的 xss 都测试过,希望大佬们再帮忙测一测,如有 bug 希望即使反馈(也可以在 Github 直接提交 PR 修了,哈哈哈哈)
而沙箱逃逸嘛这个。。但凡有这种漏洞想必遭殃的也不止这一个插件了。
可玩性
这个东西我之所以想要开发,就是希望当我们在浏览任何网页的时候,都能有网友在旁边提供帮助,增加网页的交互性。
后续期待
希望这个东西可以给 Web3.0 时代增添更多的乐趣,我觉得弹幕是一个有趣的发明。我能想到的一些好玩的使用场景,比如说在配置内网地址 192.168.x.x 的路由器的时候,跨域弹幕会很好玩,它就像有个网友老司机在身边指导你。
另外给插件写了个简单的官网,在这里,以后有重要内容会在官网上更新:
https://danmuju.pages.dev/
|