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

结果

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

CSDN去广告插件的更多相关文章

  1. 7款Chrome去广告插件

     互联网时代,大家都习惯在电脑或手机上查阅信息.观看视频.遇到不知道的东西,百度一下:想看的电视剧,爱奇艺腾讯A站B站搜一下.整个操作十分简单,大到八九十岁的老人,小到几岁孩子,都能做到.然而,很多时 ...

  2. Microsoft Edge如何安装去广告插件

    Microsoft Edge如何安装去广告插件 第一步:安装最新版本Edge https://www.microsoft.com/zh-cn/edge?form=MA13DO&OCID=MA1 ...

  3. 谷歌Google浏览器去广告插件ABP插件安装与使用

    ---恢复内容开始--- 最新版本的 Chrome 浏览器,主版本号为 67,数字签名日期为 2018.05.30.对 Chrome 的扩展(俗称插件)安装策略进行了调整——只允许在 Chrome 应 ...

  4. 路由器03---k1去广告

    HOST文件 block.hosts:https://github.com/Diumo/ADhosts 由于k1的硬件限制,8M的Flash.在没有硬改的情况下,路由无法安装太多的插件,包括众所周知的 ...

  5. 快看!❤️又一超实用浏览器插件!常用网站自动整合,JSON格式化,CSDN全站去广告!多种工具一键调用。开发者的福音!

    其实这个插件才出来的时候博主也下载了使用过,并没有什么亮点,那时候甚至觉得有点多余,因为CSDN全站去广告啥的,早就安装了油猴脚本,广告?不存在的嘿嘿.. 就在前几天看见CSDN的活动在推荐这款插件, ...

  6. JS脚本实现CSDN免登陆免关闭广告插件自动展开“阅读更多”内容

    最近在CSDN查资料,总是弹出以下弹窗,然后就自动跳转到登录页面,蛋疼! 于是重新捣腾了一下,修改了原来的脚本,最新的脚本代码如下: 温馨提示:在打开CSDN页面后立刻执行以下脚本即可免登陆免关闭广告 ...

  7. csdn自动展开+去广告+净化剪切板+免登陆(如有侵权,立即删博)

    对于csdn的广告大家想必......又没钱充VIP,怎么办,下面是脚本源码: 重要的事说三遍:如有侵权,立即删除!如有侵权,立即删除!如有侵权,立即删除! // ==UserScript== // ...

  8. openwrt下部署adbyby去广告大师 免luci 带自启动,自动开启透明代理

    最近朋友送了个360老路由器 C301,于是乎就掉进了智能路由器的坑, 玩智能路由器第一件事一定是去广告, 要么怎么对得起智能路由器- -! 路由器去广告当然首推广告屏蔽大师 www.adbyby.c ...

  9. unity5.3 安卓广告插件打包出错的理解

    今天打包带广告插件的安卓包,出现了问题 ,上网找了很多解决的办法.整理一下. 1,有的说法是unity5的BUG  因为同一个项目 用unity4.6打包就没问题 到5就出问题,当然 姑且可以这么认为 ...

随机推荐

  1. js手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法

    if(window.navigator.userAgent.indexOf('Android') > -1 || window.navigator.userAgent.indexOf('Adr' ...

  2. 如何安装 MySql 5.7.22

    你首先得去官网去下载一个zip文件,https://dev.mysql.com/downloads/mysql/ 以我所选版本为例,选择MYSQL Community Server 然后在右边选择你所 ...

  3. jmeter 之调试

    目前知道的调试方法有两种:debug sample .http mirror server debug sample  debug sample 的用户界面如下: 如果选择ture则表示打印对应的数据 ...

  4. 写一个方法,用于解读 url 后面的请求参数,最终得到 {"a":2,"b":3,"c":4};

    function getUrlParams(url){ let searchParam = url.split("?")[1]; let searchItemParams = se ...

  5. C语言扫盲及深化学习

    c语言特点: (1)效率高 (2)控制性强 (3)硬件亲和性好 (4)可移植性高 一.关于注释 c语言中注释不能嵌套,因此注释代码时一定要注意源代码中是否已经存在注释.要从逻辑上删除一段代码,利用预编 ...

  6. centos7的systemd命令对比

    centos7的systemd命令对比 http://www.linuxidc.com/Linux/2014-09/106490p2.htmhttp://www.linuxidc.com/Linux/ ...

  7. css实现礼券效果

    <template> <div class="demo"> <div class="stamp stamp01"> < ...

  8. vue js判断长按触发及手指的上滑、下滑、左滑、又滑

    <span class="btn" @touchstart="touchstart()" @touchmove="touchmove()&quo ...

  9. zipkin链路追踪

    zipkin架构说明 zipkin api 我想自己搞一些满足zipkin格式的日志,入库es,然后让zipkin仅做展示 1.需要了解zipkin组件 2,学习zipkin设计原理,何时何地产生日志 ...

  10. JS获取页面复选框选中的值

    function jqchk(){ //jquery获取复选框值 var chk_value =[]; $('input[class="sel"]:checked').each(f ...