一天，在B站刷着视频，突然想查看up主在视频下的评论，奈何评论太多，很难找到up主的评论，因此便有了做该插件的想法。话不多说，马上开始动手，首先我们应该先了解一下一个插件的构成。
插件框架
在上图中我们可以看到一个插件需要的有三个文件，图片是用来做插件的图标，js文件是脚本文件，json则是配置文件。
插件制作
知道了一个插件的主要框架后，接下来就要动手写代码了。
配置json文件
-
manifest.json
{ "name": "B-comment", // 名称 "manifest_version": 2, //声明是我们使用的版本。 "version": "1.0", "description": "B-comment",//描述 "browser_action": { "default_icon": "1.png" //插件显示图标 }, "content_scripts": [ { "matches": ["https://www.bilibili.com/*"], //运行页面 "js": ["test.js"] //运行脚本 } ] }
编写脚本代码
-
test.js
//获取评论并进行相关操作 var f = function(){ //获取up主B站id var up = document.getElementsByClassName('username')[0].pathname.substring(1), //评论列表 comment = document.getElementsByClassName('list-item reply-wrap'), //评论条数 len = comment.length; //遍历评论 for(i = 0; i < len; i++){ //获取楼主B站id nowId = comment[i].getElementsByClassName('user')[0].getElementsByTagName('a')[0].dataset.usercardMid; //如果不是up主的评论 if(nowId != up){ //设置评论不显示 comment[i].style.display = 'none'; } } }; /*观察可以知道B站的评论并不是在页面加载的时候一起加载出来的，而是在下拉的时候才会刷新，所以我们直接运行上面代码的话并无法达到我们的目的，因此还需要以下代码。*/ //延时运行 var wait = function(ms){ //判断页面是否加载完成 if(document.readyState == "complete"){ //页面下滚 document.documentElement.scrollTop=11100; //延时触发函数 setTimeout(()=>{ f(); //获取翻页按钮 var btn = document.getElementsByClassName('bottom-page paging-box-big'); //翻页后进行筛选 btn[0].onclick = function(){ setTimeout(()=>{ f(); },2000); } },2000); }else{ setTimeout(()=>{ wait(1000); },ms); } } wait(1000);上传插件
编写好代码之后就可以上传自己的插件到浏览器上去了。
- 打开Chrome的扩展程序
- 打开开发者模式
- 将整个文件夹拉到浏览器上
- 运行插件
测试
随便打开B站的一个视频：
可以看到评论数量很多，运行插件后效果如下：
非up主的评论都被屏蔽了，我们的目的也就达到了。
后面我们还能对此进行一系列的改造，如：屏蔽指定用户的评论、屏蔽含有指定关键字的评论……
知识点归纳
1、插件框架的基本认识
{
"name": "B-comment", // 名称
"manifest_version": 2, //声明是我们使用的版本。
"version": "1.0",
"description": "B-comment",//描述
"browser_action": {
"default_icon": "1.png" //插件显示图标
},
"content_scripts": [
{
"matches": ["https://www.bilibili.com/*"], //运行页面
"js": ["test.js"] //运行脚本
}
]
}
2、JavaScript相关知识点学习
（1）document.documentElement.scrollTop
获取滚动条位置，后面直接用等号赋值的话可以设置当前滚动条位置，及页面滚动效果。
（2）document.readyState
一个document 的 Document.readyState 属性描述了文档的加载状态。
当该属性值发生变化时，会在document 对象上触发readystatechange事件。
一个文档的 readyState 可以是以下之一：
loading/ 正在加载
document 仍在加载。interactive/ 可交互
文档已被解析，"正在加载"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。complete/ 完成
文档和所有子资源已完成加载。表示 load 状态的事件即将被触发。
当这个属性的值变化时，document 对象上的readystatechange 事件将被触发。