接触浏览器的广告过滤功能是从使用“世界之窗”(下面简称 TW )浏览器开始的,其它浏览器像 Opera、Maxthon 和 Firefox 也提供广告过滤功能。TW 的广告过滤规则是通配符或正则表达式,2.0 版本时书写简单,一条规则一行,包括定义域名范围、被替代内容的正则表达式和替代内容。3.0 版本把广告过滤模块独立成插件,还是使用正则表达式,改用 XML 文件,添加定阅功能,更易管理。值得强调的是 TW 的广告过滤是由替换实现的,可以把广告部分替换成任意的内容,而不是简单的“删除”广告。所以,你可以更自由地控制最终的输出,如修改样式,甚至导入本地资源文件。
Firefox 的广告过滤功能是由插件提供的,最出名的是 Adblock Plus。它只提供删除功能,但一般情况下已经够用了。一般规则在 官方文档 中有详细介绍,不再重复,下面结合一个例子说明如何用 CSS selectors 编写更自由的过滤规则。
选择的示范网站是著名的 W3Schools ,要过滤的主要内容有两个部分,导航栏下和中栏页尾的广告。第一个部分容易过滤,用 Firebug 查看,知道是一个完整的 ,在一个 下面。第二部分就麻烦了,在页尾导航条 之后的广告不是一个完整的 Block ,包含有 等标签,难道要一个个过滤?一则规则编写麻烦,二则不同页面这部分的标签分布还不一样,没法统一编写。一个好的想法当然是定义一个规则,能过滤某个 Block 后的所有兄弟元素,此时 CSS selectors 的强大选择功能就体现出来了。最后的过滤规则为:
!--w3schools.com
w3schools.com##table#topnav + div
w3schools.com##td>table.chapter ~ *
第一行是注释,第二行过滤第一部分,第三行过滤第二部分。第二行表示过滤一个紧跟在 的 之后的 。第三行表示过滤在两个以 为父亲 的 之后的所有标签。这样上面要求的任务就完成了,如果想继续过滤其它广告,可以仿着编写。
再举一个校内 BT 网站“缘网”的广告过滤结果。这个网站为校内资源分享做了很大贡献,平时买小物品可以先考虑下这里噢,点击广告是最简单的支持方式。
下面是过滤规则 (日志提交时提示内容不适合,只好上图了,汗!) 和广告过滤先后的效果图。
为了更好的编写和管理 Adblock filters, 有三个插件推荐:Adblock Plus Filter Uploader,Element Hiding Helper for Adblock Plus 和前面提到的 Firebug。它们的功能分别是上传过滤规则到指定位置,方便的交互式过滤规则制定(适合新手)及网页分析。相信依靠这样工具,正如 Adbock Plus 插件的功能说明所述:“广告已成往事”。有点煽和狂,不过,不正是这种狂热激励着无数技术人员去,创造出一个又一个的奇思妙想。
再介绍两个工具。一个是 Adblock Filters Optimizer ,用于优化过滤规则。另一个是 Javascript 写的小游戏 Kick Ass ,你可以控制着飞行器“打”下任意页面元素,have fun!