Skip to content

工作原理

This content is not available in your language yet.

Danmaku Anywhere 是一个纯前端的浏览器插件(mv3),通过注入脚本的方式在网页上显示弹幕。

所有的用户数据都保存在浏览器中,不会上传到服务器。由于弹幕数据量一般会大于浏览器可同步的限制,弹幕数据只保存在当前设备上。

此插件基本只做两件事情:

  1. 获取弹幕
  2. 渲染弹幕

获取弹幕

弹幕数据保存在IndexedDB中,分为两种类型:用户上传和第三方源。

用户上传

用户上传作为最基本的获取弹幕的方式,保证插件可以在不联网的情况下使用。

在能够使用第三方弹幕源的情况下,用户上传的弹幕一般是用来补充第三方弹幕源的不足,比如暂不支持的网址,一些小众网站、自制视频等。

第三方源

除了用户上传之外,其他的获取方式均依赖第三方网站,而这些网站普遍不提供官方的 API,

浏览器插件可以通过declarativeNetRequest权限来更改请求头从而绕过cors问题。而且由于插件拥有非常宽松的host_permissions权限,发送的请求会自动带上用户的cookie,所以可以获取到登录状态下的弹幕,而且可以绕过一些风控。 而坏处是,由于每个请求都会附带用户cookie(登录的情况),滥用可能会影响到用户的账号安全。

从设计原则上来说,插件尽可能的最小化对第三方网站的访问,只获取必要的数据。本地缓存弹幕数据很大一部分是因为这个原因。

B站

在启用B站弹幕源时,插件会先GET https://www.bilibili.com/以保证cookie正常,然后再确认用户的登录状态,如果未登录则会提示登录。

腾讯

腾讯视频需要的cookie通过javascript注入,所以无法简单通过GET https://v.qq.com/来获取。启用时,如果发现cookie缺失,会要求用户手动前往腾讯视频页面获取cookie

渲染弹幕

渲染指在正确的网站的正确的视频上显示弹幕。

匹配网页

插件安装时会请求所有网站的权限,但并不是所有网站都需要弹幕,因此需要装填配置来告诉插件哪些网页需要弹幕。

通过白名单的方式,只有在配置中指定的网址模式才会注入脚本并显示弹幕。同时,装填配置可以用来关联网址和其他配置和规则,比如网页适配和弹幕样式(未实装)等。

具体是通过chrome.scripting.registerContentScripts来注册脚本,只有在配置中指定的网址模式下才会注入脚本。

最早的设计是在添加装填配置时请求配置中网址的权限,这样可以最小化权限的需求,但后来发现这样太麻烦了,用户体验不好,而且权限管理也很繁琐,就索性安装时一次性请求所有权限。

匹配视频

弹幕是和视频绑定的,会与视频的播放/暂停同步。插件始终只会渲染一个视频的弹幕,如果存在多个视频,就需要判断在哪个个视频上显示弹幕。

可能出现多个视频的情况有:

  • 广告
  • 视频预览,比如鼠标悬停时自动播放的视频
  • 隐藏的视频,有些网站会使用隐藏的视频元素来实现一些功能

一开始的设计是用装填配置中的视频元素来选择某个视频,如果选到了多个,就取第一个。但是要求用户正确配置视频元素存在技术门槛,而且有些网站的视频元素是动态的,会随着时间/版本变化,所以这个方法并不可靠。

现在的方案是默认网站上存在多个视频,插件会选择最后一个开始播放的视频。如果该视频暂停了,就会选择正在播放的视频中最后一个开始播放的视频,如果有的话。如果出现问题,用户依然可以通过装填配置来指定视频元素。

渲染

渲染弹幕主要的问题是如何保证弹幕始终显示在视频上方。

考虑的最坏情况是视频全屏,一般全屏是通过Top Layer实现的,所以弹幕也需要使用Top Layer,这样才能保证弹幕始终显示在视频上方。

这样做会导致无法实现弹幕互动,例如鼠标悬停、点击等。由于弹幕层在最上层,会遮挡下方的元素,比如视频控件等。如果要和下方的元素交互,就需要给弹幕层设置pointer-events: none,这样可以避免弹幕层拦截点击事件,但也导致弹幕无法接收用户互动。

限制

iframe

对于插件来说,网页和网页内的 iframe 是两个不同的网页。如果视频位于 iframe 中,而装填配置匹配到了网页但没有匹配到 iframe,插件将无法获取到视频元素,导致无法正常工作。

Shadow DOM

Shadow DOM 会阻止脚本访问元素。

如果一个网站的视频元素位于 Shadow DOM 中,插件无法直接访问到视频元素,导致无法正常工作。

目前无解,但也没有遇到过这种情况。