TypeScript初战Chrome插件:Bilibili弹幕热度

im, 无色
im, 无色
im, 无色
884
文章
0
评论
2019年7月1日08:27:46 评论 466

TL;DR

这是一个用来在B站视频进度条上方创建显示弹幕热度的Chrome插件,以弹幕数量-时间的直方图显示,在高能处(定义为短时间内有大量弹幕出现的时间点)有明显的峰值,可以用来直观地看视频中的热点,也可以拿来作为空降(跳跃快进)的指示。

已经上架Chrome插件市场,在这里或者搜【Danmaku】就能找到。

源代码在GitHub,欢迎Star。

TypeScript初战Chrome插件:Bilibili弹幕热度

背景

其实做一个这样的插件的想法已经在脑海里盘桓好一阵了(创意来源于某Hub),直到最近才有空(摸鱼)写了出来,正好拿来作为TypeScript跟Chrome Extension的练手项目。

实现

插件的实现主要分为如下几个部分:

  • 代码注入
  • 获取av号及分P
  • 获取弹幕
  • 可视化
  • 监控网页重载

基于chrome-extension-typescript-starter的脚手架。

比较核心的库

  • TypeScript
    • 类型系统用来静态检查/代码提示的效率提升还是十分显著的,也减少了一些很蠢的bug的发生
  • echarts
    • 百度家的图表库,用来生成直方图
  • rxjs
    • 观察者 + 迭代器模式的实现
  • jquery
    • 简易的DOM操作

代码注入

依靠Chrome Extension的manifest.json文件可以指定在bilibili的页面中执行指定的代码文件。

获取av号、分P

av号跟分P信息一般可从url中直接获得(形如https://www.bilibili.com/video/avXXXXX/?p=XXXX),但事实上B站的视频格式分很多种,目前光我见到的就有下面几种:

  • 普通视频/video/avXXXXX/?p=XXXX
  • 稍后再看/watchlater/#/avXXXXXX/pXXXX
  • 从历史观看中进入/video/avXXXXXX/index_XXXXX.html
  • 番剧
    • 具体的某一集/bangumi/play/epYYYYY/
    • 从【番剧】分区中直接点进/bangumi/play/ssZZZZZ

因此需要有不同的处理,特别是番剧,url中没有av号信息,需要从DOM中获取。

获取弹幕

B站每个视频都有一个av号,但由于每个视频有可能有多个分P,因此B站还有一个隐含的cid用以索引一个具体的视频(以及弹幕),通过分析找到了这个API:

https://api.bilibili.com/x/player/pagelist?aid=AV_ID&jsonp=jsonp

其实cid可以有多种方法获得,包括网页DOM、原网页HTML等等,但由于B站视频分类众多(普通视频、番剧、稍后再看、历史观看)且网页DOM都有不同,因此还是用这个API比较优雅

可以通过av号拿到该视频每个分P的cid以及视频长度,然后通过API

https://comment.bilibili.com/CID.xml

能够获取xml格式的弹幕数据,告一段落

弹幕数据的解析参考自这篇博客

生成直方图

这个倒简单,处理一下弹幕数据调用echarts的API即可。

监控网页重载

在用户点击切换分P或者其他操作的时候,B站前端用的是HTML5的History API(也有的是hashchange),因此不能光用window.onhashchange事件来监控。而对于H5 History的监控,标准上又只有onpopstate事件,没有onpushstate(这一点是我比较困惑的,望有人解惑)。

因此只能使用折中的方案:利用插件的background script以及webNavigation权限监控所有B站选项卡的history更新(通过chrome提供的onHistoryStateUpdated事件),并且建立content_script与background_script的连接进行单点通知,触发页面中的url更新事件。

im, 无色
  • 本文由 发表于 2019年7月1日08:27:46
C# 开发Chrome内核浏览器(WebKit.net) Chrome开发

C# 开发Chrome内核浏览器(WebKit.net)

WebKit.net是对WebKit的.Net封装,使用它.net程序可以非常方便的集成和使用webkit作为加载网页的容器。这里介绍一下怎么用它来显示一个网页这样的一个最简单的功能。 第一步: 下载...
Google Chrome中的高性能网络 (三) Chrome开发

Google Chrome中的高性能网络 (三)

使用预连接优化了TCP连接管理   已经预解析到了主机名,也有了由OmniBox和Chrome Predictor提供信号,预示着用户未来的操作。为什么再进一步连接到目标主机,在用户真正发起...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: