插件制作实战（B站视频评论屏蔽）

一天，在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站idvar 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站idnowId = 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 事件将被触发。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！