因为避免不了与代码打交道，所以经常要上网搜代码，一般搜索到的资源都指向了CSDN，然而，好好的一篇博文，上面有很多广告，看着很不舒服，冲vip是不可能的，穷的的要死，怎么办呢？写个插件把！
去广告原理
当检测到匹配的网站时，我们将之前摸索发现的html中的广告位置通过JavaScript注入网页，修改他们的样式为不可见，这样广告就没了！
manifest.json
{
"author": "gshang",
"description": "为CSDN界面去除广告",
"icons":
{
"48": "48.png",
"96": "128.png"
},
"manifest_version": 2,
"name": "CSDN去广告",
"version": "1.0",
"permissions": [
"contextMenus",
"tabs"
],
"content_scripts": [ //将哪些脚本何时注入到哪些页面中
{
"matches": ["https://blog.csdn.net/*","https://www.csdn.net/","https://so.csdn.net/so/search/s.do?q=*"], //*：任意字符，注入js脚本的网页
"js": ["blog.js","home.js","search.js"] //注入网页的js脚本
}
]
}
然后是针对不同网址界面的修改样式的JavaScript文件
blog.js
// https://blog.csdn.net/*
var ad1 = document.getElementsByClassName('csdn-tracking-statistics mb8 box-shadow');//左侧用户下方
for (var i=0; i<ad1.length; i++){
ad1[i].style.display = "none";
}
var ad2 = document.getElementsByClassName('recommend-item-box recommend-ad-box');//评论区
for (var i=0; i<ad2.length; i++){
ad2[i].style.display = "none";
}
var ad4 = document.getElementsByClassName('box-box-large');//个人主页右下角
for (var i=0; i<ad4.length; i++){
ad4[i].style.display = "none";
}
document.getElementById('kp_box_57').style.display = 'none';//左侧下部
document.getElementById('dmp_ad_58').style.display = 'none';//评论顶部
document.getElementById('479').style.display = 'none';//右侧
document.getElementById('480').style.display = 'none';//右侧2
document.getElementById('adContent').style.display = 'none';//免VIP去广告
home.js
// https://www.csdn.net/
var ad1 = document.getElementsByClassName('banner-ad-box');//首页banner
for (var i=0; i<ad1.length; i++){
ad1[i].style.display = "none";
}
var ad2 = document.getElementsByClassName('slide-outer right_top');//首页右侧轮播
for (var i=0; i<ad2.length; i++){
ad2[i].style.display = "none";
}
var ad3 = document.getElementsByClassName('J_adv');//信息流
for (var i=0; i<ad3.length; i++){
ad3[i].style.display = "none";
}
searh.js
// https://so.csdn.net/so/search/s.do?q=*
var ad1 = document.getElementsByClassName('rightadv');//右侧
for (var i=0; i<ad1.length; i++){
ad1[i].style.display = "none";
}
document.getElementById('kp_box_471').style.display = 'none';//信息流1
document.getElementById('kp_box_472').style.display = 'none';//信息流2
这里面的去除方法主要分两类，一类是通过查找ID，对其进行修改，即getElementById 另一类是通过查找类名，再进行修改，即getElementsByClassName。需要注意的是ID查找返回的是单个元素，类名查找返回的是数组，所以处理时需要用循环来写。可能有更好的方法，等后续学习再进一步挖掘。
结果
经过测试，首页、博客、博客正文、还有搜索 这几个界面会被去广告