首先,CSDN的广告实在是让人受不了,有广告也行,别老动啊,不断轮播,烦死,它老是考验你的注意力!所以要想办法屏蔽它!
首选方法,启用 adblock 插件,这个很有名。我用的是QQ浏览器,估计其他浏览器都可以用。
那为啥还要自己编???
笔者在公司使用chrome,因为只能用公司的内网,连接外网有诸多限制(比如只能连某些技术网站CSDN什么的),无法下载这个插件,那不能想办法下载下来从外网发到公司?其实是可以的,这一切都是因为笔者想自己写个东西搞定它,其实也不是很难。下面就开始吧!
1、首先找有关编写chrome插件的文档
网上是有不少,翻墙什么的就算了,公司内基本没戏。我搜到了这个:https://github.com/sxei/chrome-plugin-demo。
2、明确目标
当前的目标是屏蔽广告,这就是说插件可以操作html的DOM就可以了,至于动态插入js,弹出窗口什么的都不需要。
3、开始开发
(1)首先插件一个文件夹 chrome_plugin_clear_ad
名字你随笔取,最终是为了导入插件用。这个文件夹下要有2个文件夹和一个文件。
文件夹:img和js,img下有这个插件的图标(随便找个png图,命名为 icon.pgn),js下是js文件,有两个 jquery.min.js(我的2.*版,其实哪一版都可以)和content-script.js(真正执行你的逻辑代码实现你的想法的js,非常重要!)。
文件:manifest.json
(2)编写manifest.json
内容如下:
{
"manifest_version":2, // 这个必须这样写,其他的看着编!
“name”: "sdemo",
"version":"1.0",
"description": "clear ads of some web",
"icons":
{
"16":"img/icon.png",
"48":"img/icon.png",
"128":"img/icon.png"
},
“browser_action”:
{
"default_icon": "img/icon.png",
"default_title": "clear ads",
"default_popup": "popup.html"
},
"content_scripts":
[
{
"matches": ["<all_urls>"], // 过滤url
"js": ["js/jquery.min.js", "js/content-script.js"],
"run_at": "document_start" // 启动时就起作用
}
],
"homepage_url': "www.a.com" // 如果有就填,没有就编
}
(3)content-scirpt.js
内容:
$(document).ready(function()
{
if($("link").attr("href").search("csdn.net")>0) // 判断是不是 CSDN 网站
{
$("div.box-box-large").remove(); // 这样做可能有风险,因为类的名称可能会变,不如id可靠,不过估计一时半会变不了
// 下面两个是侧边栏轮播的两个广告!!
$("aside div.csdn-tracking-statistics.mb8.box-shadow").remove();
$("aside div#asideFooter>.aside-box").remove();
}
// 还可以继续添加其他网站,然后做针对性的屏蔽
});
(3)加载插件
打开 扩展程序 菜单,勾选 开发者模式,点击 加载已解压的扩展程序,从弹出的窗口中选择上面创建那个文件夹,不报错误的话就可以正常使用了。打开CSDN的blog验证一下看看是不是有效果。。。