CSDN去广告插件

Posted 2021-11-23 gshang

因为避免不了与代码打交道，所以经常要上网搜代码，一般搜索到的资源都指向了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查找返回的是单个元素，类名查找返回的是数组，所以处理时需要用循环来写。可能有更好的方法，等后续学习再进一步挖掘。

结果：

经过测试，首页、博客、博客正文、还有搜索 这几个界面会被去广告