谷歌抓取网页视频插件(上架Chrome插件市场，源代码在GitHub，欢迎Star(组图))

　　谷歌抓取网页视频插件(上架Chrome插件市场，源代码在GitHub，欢迎Star(组图))

　　TL;博士

　　这是一个Chrome插件，用于在B站视频进度条上方创建和显示弹幕的流行度。在高能场所（定义为弹幕次数的直方图）显示短时间内出现大量弹幕）。时间点）有一个明显的峰值，可以用来直观地看到视频中的热点，也可以作为空中指示（跳跃快进）。

　　Chrome插件市场已经上市，可以在这里找到或者搜索【弹幕】。

　　源代码在GitHub上，欢迎Star。

　　背景

　　其实做这样一个插件的想法已经有一段时间了（这个想法来自某个Hub），直到最近才有时间写出来（钓鱼)，正好作为 TypeScript 和 Chrome Extension 的训练工具使用。项目。

　　实现

　　插件的实现主要分为以下几个部分：

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

　　比较核心库

　　图表

　　rxjs

　　jquery

　　代码注入

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

　　获取av号，点P

　　av号和sub-P信息一般可以直接从url中获取（就像form里一样），但其实B站的视频格式有很多，目前我只看到以下几种：

　　因此，需要不同的处理方式，尤其是粉丝剧。 url中没有av号信息，需要从DOM中获取。

　　获取弹幕

　　B站的每个视频都有一个av号，但是由于每个视频可能有多个点，所以B站也有一个隐含的cid来索引一个特定的视频（和弹幕）。我通过分析发现了这个API：

　　其实cid可以通过多种方式获取，包括网页DOM、原网页HTML等，但是因为B站的视频分类很多（普通视频、电视剧、稍后观看、历史观看）和网页页面 DOM 各不相同，所以使用这个 API 更优雅

　　可以通过av号获取视频的每个sub-P的cid和视频长度，然后通过API

　　能够得到xml格式的弹幕数据，结束

　　弹幕数据分析参考本博客生成的直方图

　　这个很简单，调用echarts的API来处理弹幕数据即可。

　　监控网页重新加载

　　当用户点击切换sub-P或其他操作时，B站前端使用的是HTML5 History API（有些是hashchange），所以无法使用window.onhashchange事件进行*敏*感*词*。至于H5 History的监控，标准中只有onpopstate事件，没有onpushstate。

　　因此，只能采用折衷方案：利用插件的后台脚本和webNavigation权限来监控所有B站标签的历史更新（通过chrome提供的onHistoryStateUpdated事件），并建立content_script和单点通知background_script，触发页面中的URL更新事件。