话不多说,先看效果,非常之暴力+魔幻。
很多年前看到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://github.com/Chorder/danmuju
希望多多支持,多多PR~
另外给插件写了个简单的官网,在这里,以后有重要内容会在官网上更新:https://danmuju.pages.dev/