乐趣区

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

会 CSS 就会去广告~

<!– more –>

传统去广告方法的弊端

我们浏览网页的时候经常不免会看到各种不想看到的广告内容,最简单的方案就是通过浏览器插件来解决,比如大名鼎鼎的 AdBlock 插件以及国内的各种广告拦截助手。

但这些插件的拦截能力可定制化程度不高,像 AdBlock 需要通过其定义的一套语法规则通过 CSS 选择器来屏蔽一些 DOM 元素,碰到一些特殊的情况就无能为力了。

比如一个页面上的某些重要元素被绑定了事件,点击的时候会跳转到广告页面,这时候就不能通过简单的屏蔽 DOM 元素的方式来实现了。

简单高效的自定义方式

对于这些情况我们可以使用一个强大的浏览器插件——Greasemonkey,简称 GM,中文俗称为“油猴”,支持 Firefox 和 Chrome 浏览器。

油猴并不是一个专门用来去广告的插件,而是一个往页面中植入 JavaScript 代码的工具,用来修改页面,或者添加一些功能,比如自动填充表单、显示网盘文件下载链接等。

开发功能非常简单,只需要通过 js 调用对应 API 函数即可。

简单几行代码,就可以去除大部分页面广告。

快速入门 GM 脚本

油猴的使用非常简单,我们编写一个 js 脚本,然后配置好对应的网址。

这样当浏览器访问匹配的网址时,油猴会加载我们编写的 js 脚本,运行里面的代码。

简而言之分两步。

  1. 配置脚本。配置项大概在 20 个左右,下面我们介绍最重要的 3 个配置项。
  2. 编写脚本。调用插件提供的 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

退出移动版