制作一个浏览器插件来屏蔽百度经验的视频

写在最前面：Chrome插件不只支持Google Chrome浏览器，像360安全浏览器、搜狗高速浏览器等浏览器用的是Chrome内核，Chrome插件在这些浏览器上都是通用的，所以本文对Chrome内核的浏览器都是适用的。

---

对百度经验的自动播放的视频积怨已久，今天做个Chrome插件屏蔽它。
首先，一般情况下访问百度经验的画风一般是这样的。。。

我们的目标就是让那个灰色的视频框连同它里面的视频都消失

原理

屏蔽视频跟屏蔽广告是一个道理，下面是两种通常用的方案：

• 嵌入CSS，找到广告对应的class设置成display: none。
• 嵌入JavaScript，运用JavaScript语言提供的.removeChild()等方法去除广告对应的HTML元素，或者用createElement()方法注入内容为display: none的style标签。

CSS的方案

现在开始编写插件，项目的文件夹目录结构如下，其中除了manifest.json外的文件夹或文件都是可以随意命名的。 manifest.json是专用的文件名，这个文件用来描述插件的基本信息。

Bdjy
│  manifest.json
│  
└─css
        pbsp.css

---

manifest.json文件内容如下

{
    "manifest_version": 2,
    "name": "百度经验屏蔽视频",
    "version": "1.0",
    "description": "可以屏蔽百度经验网页中的视频",
    "content_scripts": [
        {
            "matches": ["https://jingyan.baidu.com/*"],
            "css": ["css/pbsp.css" ]
        }
    ]
}

• manifest_version属性是manifest.json文件所用的数据交换标准的版本，目前来说这个值只能填2。
• name属性是插件的名字，可以按照自己的喜好命名。
• version属性是插件的版本号，当然这个版本号是多少由插件的开发者自己决定，这里就填个1.0好了。
• description属性是对插件的介绍。
• 在content_scripts里，matches属性指明本插件是针对哪些web内容的，"matches": ["https://jingyan.baidu.com/*"],这句代码指明了本插件专门针对百度经验的网页，由于现在百度旗下的网站基本都用https而不用http，所以我没有写http。想要加上http的朋友可以自行把这句代码改为"matches": ["https://jingyan.baidu.com/*", "http://jingyan.baidu.com/*"],
  然后，"css": ["css/pbsp.css" ]这句代码指明了要嵌入的css文件的相对位置（bsp.css文件在c名为ss的文件夹下，css文件夹跟manifest.json文件在同一级目录下）

更多标准请参考官方文档https://developer.chrome.com/extensions/manifest

---

现在来写css文件，为此需要找一下百度经验页面里视频框对应的HTML元素。

通过审查元素可以发现视频框对应的元素的class为"clearfix feeds-video-box"，即同时属于clearfix和clearfix两个class，所以pbsp.css文件的内容应为：

.clearfix.feeds-video-box
{
	display: none;
}

到此为止，CSS方案的插件代码就写完了(一共不超过20行)。。。

插件安装

这里只以360安全浏览器的Chrome插件安装为例，其他Chrome内核的浏览器怎么安装咱不是很清楚（应该可以类比吧？）

进入扩展管理–>高级管理–>加载已解压的扩展程序…，找到刚刚写的插件代码所在的文件夹并点击确定就安装了自己写的插件 φ(゜▽゜*)♪

测试看一下效果：

另外还有JavaScript的方案

有了前面的经验就不用再多说了，直接贴代码吧

• manifest.json文件内容

{
    "manifest_version": 2,
    "name": "百度经验屏蔽视频",
    "version": "1.0",
    "description": "可以屏蔽百度经验网页中的视频",
    "content_scripts": [
        {
            "matches": ["https://jingyan.baidu.com/*"],
            "js": ["js/pbsp.js" ]
        }
    ]
}

• pbsp.js文件的内容（pbsp.js在名为js的文件夹下）

var v = document.getElementsByClassName("clearfix feeds-video-box")[0];
v.parentNode.removeChild(v);

这里给出的JavaScript方案效果并不完美，直接用.removeChild()去除HTML元素的话，在页面未加载完全之前广告还是“苟延残喘”一段时间，即使加载网页速度也只能做到“广告一闪而过”。（这里的广告也就是指视频框）JavaScript方案想要更完美地实现屏蔽还需要更多的功夫。（好吧其实我不会）