我的页面我做主——浏览器去广告正确姿势

会CSS就会去广告~

传统去广告方法的弊端

我们浏览网页的时候经常不免会看到各种不想看到的广告内容,最简单的方案就是通过浏览器插件来解决,比如大名鼎鼎的AdBlock插件以及国内的各种广告拦截助手。
但这些插件的拦截能力可定制化程度不高,像AdBlock需要通过其定义的一套语法规则通过CSS选择器来屏蔽一些DOM元素,碰到一些特殊的情况就无能为力了。
比如一个页面上的某些重要元素被绑定了事件,点击的时候会跳转到广告页面,这时候就不能通过简单的屏蔽DOM元素的方式来实现了。

简单高效的自定义方式

对于这些情况我们可以使用一个强大的浏览器插件——Greasemonkey,简称GM,中文俗称为“油猴”,支持Firefox和Chrome浏览器。
油猴并不是一个专门用来去广告的插件,而是一个往页面中植入JavaScript代码的工具,用来修改页面,或者添加一些功能,比如自动填充表单、显示网盘文件下载链接等。
开发功能非常简单,只需要通过js调用对应API函数即可。
简单几行代码,就可以去除大部分页面广告。

快速入门GM脚本

油猴的使用非常简单,我们编写一个js脚本,然后配置好对应的网址。
这样当浏览器访问匹配的网址时,油猴会加载我们编写的js脚本,运行里面的代码。
简而言之分两步。

  • 配置脚本。配置项大概在20个左右,下面我们介绍最重要的3个配置项。
  • 编写脚本。调用插件提供的API函数,为页面添加CSS样式或者执行js代码。
  • @include 脚本匹配的网址,支持星号“* ”来匹配任意字符。可以使用多次表示匹配多个网址。
  • @grant 声明需要使用的API函数。
  • @run-at 脚本执行的时间,有5个可选值,CSS样式我们选择“document-start”在页面渲染之前加载,而js脚本可以选择“document-end”在页面渲染完成后加载。
    需要注意的是,配置参数是在以==UserScript==开头,==/UserScript==结尾的注释中的。
    完整的示例如下:
    // ==UserScript==// @name         XX广告过滤// @version      0.1// @icon         https://www.xxx.com/favicon.ico// @description  try to take over the world!// @author       You// @include      http*://xx.com/*// @grant GM_addStyle// @run-at document-start// ==/UserScript==
    具体说明可以参考官方文档:
    https://www.tampermonkey.net/documentation.php?ext=dhdg&show=dhdg

    2种常见场景以及对应的操作

    修改样式

    这是最简单的屏蔽广告的方式,只要配置规则就行了,能屏蔽80%以上的广告。
    以某论坛广告为例,这个论坛的广告是直接夹杂在帖子当中,下方有个小小的字标明广告,一不小心就点进去了。
    而且帖子中间夹杂着毫不相干的广告,相当影响体验。



  • 这种广告屏蔽起来相当简单,写一条样式规则,将其display属性置为none就行了。
    .home-place-item {display: none!important;}
    以防被覆盖,我们可以加上!important提升权限。
    大部分广告可以通过上面 css选择器 + display属性 的方式屏蔽。但有些广告处理起来会比较麻烦。
    例如搜索引擎的广告,就使用了一些方式来“保护”。
    某搜索引擎搜索“机票”可以看到下面的广告信息。



  • 可以看到该广告元素style属性中使用了最高权重的display、visibility两个属性,所以用上面隐藏的方式肯定是无效的。
    所以只能选择其他的方式,这里需要考验大家的css基本功了。
    让一个元素隐藏的方式有哪些?
    下面是一种实现方式:
    [cmatchid] {height: 0;overflow: hidden;}

    阻止js文件加载

    还有一类广告并不是以静态元素的方式呈现,甚至你在页面上都看不到它,它只在你第一次点击某个功能的时候弹出来。
    这种处理起来就相对麻烦,因为直接对元素进行修改可能会影响到正常功能使用。
    但是这种广告的事件绑定一般都是单独写在某个js文件中的,细心查找,然后阻止对应的js文件加载就可以从根本上解决问题。
    浏览器其实为插件提供了API用来阻止资源加载,但是油猴却没有主动提供。
    后来在issue中找到了一个隐藏API来实现这个功能。
    以阻止 https://xx.com 下的文件为例,可以在脚本开头引用webRequest功能:
    // @webRequest [{"selector":"https://xx.com/*","action":"cancel"}]

    更多

    只要你懂web前端,只要你肯动手,你的网页都可以变成你想象的样子。
    装上插件,去自定义你的页面吧!
    示例脚本地址:
    https://github.com/yalishizhude/block-ad-scripts
  • 最后编辑于
    ©著作权归作者所有,转载或内容合作请联系作者
    • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
      沈念sama阅读 205,236评论 6 478
    • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
      沈念sama阅读 87,867评论 2 381
    • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
      开封第一讲书人阅读 151,715评论 0 340
    • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
      开封第一讲书人阅读 54,899评论 1 278
    • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
      茶点故事阅读 63,895评论 5 368
    • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
      开封第一讲书人阅读 48,733评论 1 283
    • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
      沈念sama阅读 38,085评论 3 399
    • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
      开封第一讲书人阅读 36,722评论 0 258
    • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
      沈念sama阅读 43,025评论 1 300
    • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
      茶点故事阅读 35,696评论 2 323
    • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
      茶点故事阅读 37,816评论 1 333
    • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
      沈念sama阅读 33,447评论 4 322
    • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
      茶点故事阅读 39,057评论 3 307
    • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
      开封第一讲书人阅读 30,009评论 0 19
    • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
      开封第一讲书人阅读 31,254评论 1 260
    • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
      沈念sama阅读 45,204评论 2 352
    • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
      茶点故事阅读 42,561评论 2 343

    推荐阅读更多精彩内容

    • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
      Simon_s阅读 2,219评论 0 8
    • 发送 & 接收信息 数据是以“数据包”的形式通过互联网发送,而数据包以字节为单位。当你编写一些 HTML、CSS ...
      mongofeng阅读 901评论 0 0
    • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
      怡宝丶阅读 2,569评论 0 7
    • 前端面试题的简单整理,都只是大概回答,具体某些问题的具体理解后续会补上。 前端页面有哪三层构成,分别是什么?作用是...
      李欢li阅读 475评论 0 2
    • 有时候会讨厌不甘平庸却又不好好努力的自己,觉得自己不够好,羡慕别人闪闪发光,但其实大多人都是普通的,只是别人的付出...
      茉言心语阅读 312评论 1 3