天天看点

iOS9 广告拦截 CONTENT BLOCKER

什么是Content Blocker

在iOS9系统中的Safari中,用户可以通过安装和开启支持内容拦截插件的app,对Safari中的广告、cookies追踪、banner、分享widget等内容进行拦截。

Content Blocker工作原理

开发者将iOS9系统中新的Extension——Content Blocker加入到app中,提交至App Store,用户在下载安装带有Content Blocker Extension app后,可在系统设置中开启拦截功能。

Content Blocker并不是自动的识别和拦截广告,而且用开发者设定的规则对网页中的元素进行匹配,隐藏匹配成功的元素。Safari在工作时会将Content Blocker Extension的过滤规则编译成bytecode,在load网页的时候使用。

iOS9 广告拦截 CONTENT BLOCKER

如何使用Content Blocker

首先需要是iOS9系统,在之前版本的系统中没有Content Blocker功能。

然后安装带有屏蔽广告插件的app,Safari的设置里会出现Content Blocker这个cell,点击进入子页面,选择相应的app,打开开关,启动拦截功能。

创建Content Blocker app

参考自《iOS 9之Safari广告拦截器(Content Blocker)》

示例代码

1. 新建project,选择iOS > Single View Application。

2. 添加Target, 选择 iOS> Application Extension > Content Blocker Extension。

可以看到工程中自动创建了blockerList.json文件,以及一个ActionRequestHandler类。从ActionRequestHandler类的实现代码不难看出,它是将blockerList.json文件嵌入Safari。事实上,这个json文件正是Content Blocker的核心,使用它将可以用最简单的配置方式,为我们实现内容拦截,接下来,我来讲解一下这个json文件的编写规则。

blockerList.json文件里面自动生成了几行代码,代码中包含了一个action和一个trigger,每一个action和trigger的组合构成一条规则。

[[
    {
        "action":
        {
            "type": "block"  
        },
        "trigger": {
            "url-filter": "webkit.org/images/icon-gold.png"
        }
    }
]]
           
  • action指定这条规则采用的拦截方式
  • type可选值为 “block”,“block-cookies”,“css-display-none”,分别表示拦截资源文件(比如css文件,js文件,图片资源)、拦截cookies,将指定html元素css的display属性设置为none。而当type为css-display-none时,必须在action中加入“selector”的键值对,selector即是css selector,指定哪一些html元素的display属性将被设置为none(即隐藏),当然,如果你不熟悉css selector,赶快去学习吧。
  • trigger指定这条规则适用的网站url,可以使用正规表达式,当然尽量精确的表达式,不要影响网页浏览效率,毕竟Content Blocker是应用于整个浏览器和所有的网站。

了解了这些,我们不难理解blockList.json的含义,type为block,表明这是在阻止webkit.org/images/icon-gold.png这个图片的加载。当然,我们今天的目标是拦截Google搜索结果中的广告项。

3. 修改blockList.json

首先,对action type的选择,这里很明显是对网页内容的拦截,我们选择的type值为css-display-none,接着获取我们要隐藏的html元素,这里我们借助Mac版Safari的网页源码分析工具:

1)打开Mac版Safari,打开菜单栏中preference偏好设置 > advance高级,勾选Show Develop menu in menu bar在菜单栏中显示“开发”菜单。

2)打开菜单栏中 develop开发> Simulator, 然后选择正在浏览的www.Google.com.hk页面,Web Inspector工具随即将Simulator上Safari正在浏览的网页源码陈列出来, 找到广告对应的div和它对应的id。

Notice: 若Simulator下没有可选项,则打开Mac下Xcode的Simulator,点开Simulator中的Safari

(注意不是Mac的Safari), 即可看到Simulator子菜单中出现可选项。

iOS9 广告拦截 CONTENT BLOCKER

有了div的id,我们将selector属性设置为div#taw,指定id为taw的div,然后设置trigger的url-filter为google.com.hk/。

[
    {
        "action": {
             "type": "css-display-none",
             "selector":"div#taw"
        },
        "trigger": {
            "url-filter": "google.com.hk/"
        }
    }
]
           

4.配置Architectures

由于content blocker只能运行在64-bit 并且不低于Apple A7处理器的机器上,包括:iPhone 5s、iPhone 6、iPhone 6 Plus、iPad Air 2、iPad Air、iPad mini 2、iPad mini 3、iPod touch 6。

所以必须设置Architectures。选择Target > Build settings > Architecture.

修改Architecture下的Architecture:

iOS9 广告拦截 CONTENT BLOCKER

修改Valid Architecture:

iOS9 广告拦截 CONTENT BLOCKER

设置好后,当run到32位的机器上时,Xcode会提示一个错误:

No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=armv7, VALID_ARCHS=arm64).

如果你对Architecture的设置不是很熟, 请看这里:《Xcode设置项之Architectures和Valid Architectures》

5. 运行插件

运行代码,打开系统设置界面,选择Safari->Content Blockers(内容拦截器)->打开你的插件(如果已经打开了,切记关掉后重新打开一次)。