话不多说，先看效果，非常之暴力+魔幻。

很多年前看到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良好运行的。如果安装之后看不到弹幕，需要点开插件的设置面板，把弹幕开关开启一下。

安装好弹幕，打开百度或者这个网页，你应该可以看到我发的测试弹幕了。

最后关于全网弹幕这个思路，再简单讲几点

1. 安全
   这个插件最应该防范的就是前端攻击，例如XSS、浏览器沙箱逃逸等。前者我已经测试过基本没啥问题，dom型和非dom型的xss都测试过，希望大佬们再帮忙测一测，如有bug希望即使反馈（也可以在Github直接提交PR修了，哈哈哈哈）
   而沙箱逃逸嘛这个。。但凡有这种漏洞想必遭殃的也不止这一个插件了。

2. 可玩性
   这个东西我之所以想要开发，就是希望当我们在浏览任何网页的时候，都能有网友在旁边提供帮助，增加网页的交互性。

3. 后续期待

希望这个东西可以给Web3.0时代增添更多的乐趣，我觉得弹幕是一个有趣的发明。我能想到的一些好玩的使用场景，比如说在配置内网地址192.168.x.x的路由器的时候，跨域弹幕会很好玩，它就像有个网友老司机在身边指导你。

目前服务端和客户端都开源在了https://github.com/Chorder/danmuju
希望多多支持，多多PR~

另外给插件写了个简单的官网，在这里，以后有重要内容会在官网上更新：https://danmuju.pages.dev/

在以root用户运行Puppeteer程序时，遇到一些错误，这里记录下解决的过程。
首先提示一个X11错误，这是因为我在服务器上运行Chrome，而服务器没有安装桌面环境导致的。
安装以下依赖项即可，以Debian系统为例：

1

apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

接着就是报了一个sandbox错误，报错内容是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(node:4963) UnhandledPromiseRejectionWarning: Error: Failed to launch chrome!
[0428/104254.469304:ERROR:zygote_host_impl_linux.cc(89)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.


TROUBLESHOOTING: https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

    at onClose (/root/monkey/node_modules/puppeteer/lib/Launcher.js:342:14)
    at Interface.helper.addEventListener (/root/monkey/node_modules/puppeteer/lib/Launcher.js:331:50)
    at emitNone (events.js:111:20)
    at Interface.emit (events.js:208:7)
    at Interface.close (readline.js:370:8)
    at Socket.onend (readline.js:149:10)
    at emitNone (events.js:111:20)
    at Socket.emit (events.js:208:7)
    at endReadableNT (_stream_readable.js:1064:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
(node:4963) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:4963) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

不了解具体的含义，但是从sandbox来看，应该是和Chrome的安全沙箱有关，单纯的想解决这个问题，只需要在代码中加入--no-sandbox启动Chrome的参数即可。

Example:

1
2
3
4
5
6
7

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox']});
  const page = await browser.newPage();
  await page.goto("https://www.baidu.com");
  await browser.close();
})()

Tips：

但是这样做可能会造成一些风险，主要是Chrome的sandbox会多一些安全特性（我理解的），如果是将Node的代码作为生产环境运行在产品中，还是需要谨慎一些的，确保请求的站点安全可信（最好不信）。