作为CSDN的忠实用户,我觉得它挺不错的。美中不足的是广告,虽然相比于微博啊,开源中国啊这些博客站点,它的广告已经算是很少的了。但还是会让博主有点尴尬,毕竟强迫症不是一天两天就能治好的。⊙﹏⊙b汗

于是就想着怎么能去掉这些广告,给自己一个清静的阅读环境。


第一招

最简单的方式就是使用现成的软件了。一劳永逸。

据博主了解,Chrome浏览器上有很多这样的插件,比如AdBlock, 电脑管家插件啊什么的。种类很多,找到一个适合自己的,下载安装即可使用。

鉴于博主被Chrome俘获,这里就演示一下如何安装去广告插件吧。

方式1

这第一招嘛,比较简单。但是需要有个前提,那就是本机上安装了 腾讯电脑管家这个杀毒软件。 这里对于杀毒软件什么的不过多叙述了,大家都懂的,但是为什么装这么个东西呢,无非就是懒呗,装完之后垃圾,痕迹,网络什么的也方便管理了。

关于“腾讯电脑管家是如何偷偷地安装chrome插件的?”这一个问题,知乎上有这么一个回答,我觉得还蛮不错,贴出来如下:

chrome是欢迎并允许这种插件自动安装用以扩充功能的!自然也就不给你任何提示。

所以,如果你的机器环境和博主的一致(装了电脑管家和Chrome浏览器),那么恭喜你,你将很轻松的获得一个不错的上网环境。

  • 普通模式下:看起来已经很不错了,但是留下一个小框框感觉还是让人有点纠结。

  • 强力过滤模式下:这下页面上终于没有广告咯。好好享受这片宁静吧。

方式2

这第二种方式就需要稍微的费点心思了,如果您的电脑管家插件没有自动安装的话,咱们就得手动的去装一个咯。

但是Chrome浏览器的“插件超市”有点让国人尴尬,墙的原因,大家都懂的了。于是我们首先得能够FQ,FQ的方法更是数不胜数了,不多叙述。博主这里采用了一个最笨的方法,那就是使用软件如Lantern,赛风,不是本文的重点,故不再叙述了,有兴趣的小伙伴们可以自行研究一番。

下面讲解一下怎么一步步的手动安装电脑管家的Chrome插件。

然后搜索下载,添加到Chrome即可。

第二招

添加JavaScript脚本,也是一件很爽的事情哦。看看下面的这两行代码,就知道了。

查看一下网页上的源码:

起初,我以为这是个随机生成的id,但是连续查看了好多页面之后发现,这是个固定值的常数,这样真的是如虎添翼了。那还等什么,让JavaScript出场吧。

现在发现了吧,没有广告咯。

但是问题来了,咱也不能每次都得打开控制台,写两行代码吧,这就显得有点麻烦了。至于解决办法嘛,估计你也想到了,那就是在网页上注入JavaScript代码。但是对于CSDN用户而言,这个权限只有博客专家才能有。那就是通过添加栏目的方式,写上脚本代码。但是普通用户是不能在栏目里面添加JavaScript脚本代码的,因为会被自动的替换掉。

博主比较幸运,恰好有这么个权限。

如果您的情况和博主一样的话,下面的代码就能帮到你了。

<script>
// 因为从刚才的控制台,博主发现有JQuery的支持,这样写比原生的会更加的方便一些,代码如下
$(document).ready(function(){
      setInterval(function(){
        $("#cpro_u2392861_closebtn").trigger("click");
        $("#bd-hl-content").css("display","none");
        $(".J_adv").css("display","none");
        $("#cpro_u2392861").css("display","none");
        $("#adJs52b5334").css("display","none");
      },3000);

// 添加轮询的原因是,注入的JavaScript代码在广告代码之后执行了,要想去掉广告,就必须再加载一次 去广告的脚本咯
    });
</script>

不过,这并没有真正的解决全站广告,去掉的也就是本机浏览时出现的广告罢了。

第三招

不过,话又说回来了,非博客专家难道就不能用代码去广告了吗?

答案是否定的,不然写这篇文章也就没什么意义了。博主下面正式的介绍本文的重点,那就是为普通的用户写一个切实有用的去广告插件。

素材准备

  • 16X16的png图片,48X48, 128X128的png图片三张
  • 文本编辑器一个
  • Chrome浏览器一个
  • 一颗勇敢的❤

必备知识

这里说的必备知识,也就是制作一个Chrome插件所需的知识。但是不要被标题吓到了,只要我们按照套路出牌,比着葫芦画瓢还是很简单的。

  • 具备一定的JavaScript语言
  • 了解开发Chrome插件的“骨架”
  • 相关文件的格式及写法

  • 骨架:就是一个图片文件夹,一个js文件夹,一个manifest.json文件和一个popup.html文件。当然了,这是最基础的,我们还可以添加option.html等文件来进一步丰满插件的内容。

  • 本例的manifest.json文件,比较基础。就不再过多介绍了。
{

    "manifest_version": 2,

    "name": "Ad Block",

    "version": "1.0",

    "description": "去除页面上的广告",

    "icons":{"16":"./image/icon16.png","48":"./image/icon48.png","128":"./image/icon128.png"},

    "browser_action": {
        "default_icon": "./image/icon16.png",
        "name": "Ad Block",
        "default_title": "Ad Block",
        "default_popup": "popup.html"
    },

    "permissions": [
        "tabs",
        "http://blog.csdn.net/*",
        "activeTab",
        "notifications","storage","http://*/"
    ]

}
  • 需要注意的地方:

    需要注意的地方就是 manifest_version 一定要为2,这是规定。所以大家遵守就可以了。

    还有就是图片一定要按照要求放置和处理。

代码部分

  • 待注入的JavaScript代码文件如下:
window.onload = function(){
    setInterval("blockad()", 3000);
    //如果嫌不放心的话,下面的注释也可以去掉
    //blockad();
}

function blockad(){

    document.getElementById("adJs52b5334").style.display = "none";
    document.getElementById("bd-hl-content").style.display = "none";
    document.getElementById("cpro_u2392861").style.display = "none";
    document.getElementById("cpro_u2392861_closebtn").style.display = "none";
}

  • popup.html部分
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>去除广告</title>
    <style>
        * {
            margin:0;
            padding:0;
        }

        body {
            width: 248px;
            height: 97px;
        }

        div {
            line-height: 100px;
            font-size: 42px;
            text-align: center;
        }

        input {
            border-radius: 28px;
            width:82%;
            font-size: 42px;
            background-color: white;
            box-shadow: 2px 2px 2px #e6e6e6;
            font-family: "Georgia, serif";
            height: 100%;
        }

        #blockad_input {
            transition-duration: 2.8s;
        }
        #blockad_input:hover {
            background-color: black;
            color: white;
        }

    </style>
    <script src="./js/adblock.js"></script>
</head>
<body>
<div id="ad_div">
    <input id="blockad_input" type="button" name="addblockbtn" onclick="blockad()" value="Ad Block">
</div>
</body>
</html>

测试

我们只需要在刚才的拓展程序界面选中 “开发者模式”,就可以加载咱们自己的插件咯。

这里博主的情况如下:

很明显,图标部分出了点意外。博主仔细查看了一下,貌似是manifest.json文件中需要添加一个专门针对于拓展栏上的大小的图标,39X39.png,不过这不是什么重要的了。

这样,一个简易的去广告插件就完成了。

总结

回顾一下,这篇文章主要是讲解了如何去除CSDN的博客页面上的广告,代码也比较的简单。

或许您会有更大点的需求,去除所有页面的广告。按理说这也是可行的,不过是需要一些手段罢了。不过这样的话,岂不是又自己做了一个“腾讯电脑管家插件”了吗?

这样重复造轮子的活,博主不是很想做,除非下定决心做一个更好的轮子出来。


展望:

博主的展望就是通过手动的添加类似于上面的广告位的id,来扩充去广告的数据库,这样的话就必须有一台甚至多台服务器了,每次插件一旦启动,就自动的去更新广告位id,然后执行当前页面的去广告逻辑... ...

思路就是这么个思路,有兴趣的小伙伴不妨试试咯。 ~\(≧▽≦)/~啦啦啦

去除CSDN 博客页广告的历程的更多相关文章

  1. Python爬取CSDN博客文章

    0 url :http://blog.csdn.net/youyou1543724847/article/details/52818339Redis一点基础的东西目录 1.基础底层数据结构 2.win ...

  2. Android应用开发-小巫CSDN博客client之嵌入有米广告

    Android应用开发-小巫CSDN博客client之嵌入有米广告 上一篇博客给大家介绍怎样集成友盟社会化组件,本篇继续带来干货,教大家怎样嵌入广告到应用中去.小巫自称专业对接30年,熟悉各大渠道SD ...

  3. Python爬虫小实践:爬取任意CSDN博客所有文章的文字内容(或可改写为保存其他的元素),间接增加博客访问量

    Python并不是我的主业,当初学Python主要是为了学爬虫,以为自己觉得能够从网上爬东西是一件非常神奇又是一件非常有用的事情,因为我们可以获取一些方面的数据或者其他的东西,反正各有用处. 这两天闲 ...

  4. 梦想还是要有的-纪念正式成为csdn博客专家暨年中总结

    csdn博客:http://blog.csdn.net/tuzongxun 我的csdn历程(坚持总会有收获):   一年零三个月之前,2015年3月3日,我在csdn写下第一篇技术博客,只是记录了一 ...

  5. JAVA爬虫挖取CSDN博客文章

    开门见山,看看这个教程的主要任务,就去csdn博客,挖取技术文章,我以<第一行代码–安卓>的作者为例,将他在csdn发表的额博客信息都挖取出来.因为郭神是我在大学期间比较崇拜的对象之一.他 ...

  6. 让 QtWebkit 支持跨域CROS - nowboy的CSDN博客 - 博客频道 - CSDN.NET

    让 QtWebkit 支持跨域CROS - nowboy的CSDN博客 - 博客频道 - CSDN.NET 让 QtWebkit 支持跨域CROS 2013-05-23 22:05 450人阅读 评论 ...

  7. Python 爬取CSDN博客频道

    初次接触python,写的很简单,开发工具PyCharm,python 3.4很方便 python 部分模块安装时需要其他的附属模块之类的,可以先 pip install wheel 然后可以直接下载 ...

  8. Android应用开发-小巫CSDN博客client之显示博文具体内容

    Android应用开发-小巫CSDN博客客户端之显示博文具体内容 上篇博文给大家介绍的是怎样嵌入有米广告而且获取收益,本篇博客打算讲讲关于怎样在一个ListView里显示博文的具体信息.这个可能是童鞋 ...

  9. python实战--csdn博客专栏下载器

    打算利用业余时间好好研究Python的web框架--web.py,深入剖析其实现原理,体会web.py精巧之美.但在研究源码的基础上至少得会用web.py.思前想后,没有好的Idea,于是打算开发一个 ...

随机推荐

  1. c#之监控文件结构

    如果需要知道修改文件或目录的时间,可以通过FileSystemWatcher类,这个类提供了一下应用程序可以捕获的事件,应用程序可以对事件作出响应. 使用FileSystemWatcher非常简单,首 ...

  2. C# 传统四舍五入保留两位小数(网上流传好多错误的版本)

    关于C#里面的Math.Round,很多人都会用到,而且以为是四舍五入,其实不是这样的: C#里面的Math.Round是符合IEEE标准的“四舍五入”,其实是五舍六入. 网上好多流传的下面这种方式实 ...

  3. java基本数据类型的包装类

    基本类型对应的包装类 byte(Byte).short(Short).int(Integer).long(Long).float(Float).double(Double).char(Characte ...

  4. [LeetCode] Two Sum IV - Input is a BST 两数之和之四 - 输入是二叉搜索树

    Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...

  5. Python系列之 - 上下文管理协议

    with obj as f: '代码块' 1.with obj ---->触发obj.__enter__(),拿到返回值 2.as f----->f=返回值. 3.with obj as ...

  6. [HAOI2011]Problem c

    题目描述 给n个人安排座位,先给每个人一个1~n的编号,设第i个人的编号为ai(不同人的编号可以相同),接着从第一个人开始,大家依次入座,第i个人来 了以后尝试坐到ai,如果ai被占据了,就尝试ai+ ...

  7. 组合数问题(zyys版)

    [问题描述]定义"组合数"S(n,m)代表将 n 个不同的元素拆分成 m 个非空集合的方案数.举个栗子,将{1,2,3}拆分成 2 个集合有({1},{2,3}),({2},{1, ...

  8. 【NOIP2016】换教室

    题目描述 对于刚上大学的牛牛来说, 他面临的第一个问题是如何根据实际情况中情合适的课程. 在可以选择的课程中,有2n节课程安排在n个时间段上.在第 i ( 1≤ i≤n)个时同段上, 两节内容相同的课 ...

  9. [POI2000] 最长公共子串

    给出几个由小写字母构成的单词,求它们最长的公共子串的长度. 任务 从文件中读入单词 计算最长公共子串的长度 输出结果到文件 输入 文件的第一行是整数 n,1<=n<=5,表示单词的数量.接 ...

  10. poj 2886 线段树+反素数

    Who Gets the Most Candies? Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 12744   Acc ...