iOS9开发--（Content Blocker）Safari广告拦截详解

前言：

iOS9推出已经有一个多月了，想必各位开发者对iOS9的一些新特性，iOS的适配等方面已经都有所了解，在日常使用中也积累了一定的经验和心得。 Content Blocker这个iOS9中推出的新插件，你一定听说过吧，有了它，safari可以轻松的屏蔽掉页面上的广告，让我们的上网更加的方便，愉快。 在iOS9推出的这一个多月来，各路开发者已经开发了无数款基于content blocker插件的app，赚得盆满钵满，如果你也想自己开发一个content
blocker，那么请注意了，今天我们就来讲一讲怎么样开发一款content blocker插件的app。

首先我们来看下没有使用content blocker时，Safari用百度搜索时的情况，如下图



前面两个显示出来的词条都是属于广告词条，这个就是content blocker需要处理的东西

使用 content blocker后的搜索结果：



很明显的看到，前面两个广告词条被屏蔽掉了。

那么，这是如何做到的呢？

创建Extension

我们用一个demo来说明一下这个过程

首先创建一个工程，接着，在工程中创建一个Extension,如图

点击左下角，添加target



选择Application Extension -- Content Blocker Extension



工程中出现如下文件夹，说明创建成功，创建成功后，系统会自动生成blockerList.json的文件，这个文件就是屏蔽广告的核心文件，通过这个文件，我们可以自定义屏蔽规则，下面会重点介绍这个文件。

ActionRequstHandler类： 这个类可以帮助我们对extension和containing app（也就是我们这个ContentBlockerDemo这个app）进行一些通信，数据的交互等等。



extension创建后，运行这个工程，其实就已经实现了content blocker插件的功能了，什么？这么简单，确实就是这么简单，但是，注意，这里只是实现了content blocker的功能，但是屏蔽的规则，也就是blockerList.json这个文件，我们其实是没有进行过任何改动的，而这个文件，决定了我们可以屏蔽什么，因此，现在的demo具备了屏蔽的功能，但是是否可以屏蔽内容还取决于规则文件中的内容。接下来，我们就来看看这个json的规则文件到底是什么。

我们打开blockerList.json文件，里面的内容是这样的

[
{
"action": {
"type": "block"
},
"trigger": {
"url-filter": "webkit.org/images/icon-gold.png"
}
}
]

一条典型的规则就是由action 和 trigger组成的，下面我们分别来说说这两个参数

Trigger

trigger定义了规则激活的条件。当trigger中的条件达到时，规则就被激活，action中的操作就将执行。目前，trigger中跟着资源加载相关的信息，例如，url和网页资源resource的类型，document的domain，资源resource和document的关系，trigger中的参数有如下几种类型

url-filter(字符串，必须)匹配资源的url（注意这里是资源，包括图片，媒体文件，js文件等等都包含在内）
url-filter-is-case-sensitive（boolean类型，可选）url-filter中的内容是否区分大小写
resource-type (string数组，可选) 
load-type(string数组，可选)
if-domain(string数组，可选)
上面几个参数中，最重要的就是url-filter,它是必选的参数，一般，我们使用这个参数就可以达到目的了，下面的几个可以搭配使用，这里不一一介绍。url-filter可以使用通配符来进行匹配，特殊符号使用//来进行转义，可以精确匹配，也可以进行模糊匹配，这取决于我们的使用场景。后面会通过例子来说明。

Action

action指定了一旦trigger匹配成功了某些资源后该采取什么样的行动，一般有如下两个有效的参数

type  (字符串，必须)：定义了当规则激活后做什么，目前有三种类型的type可以用来处理资源的：block，block-cookies，css-display-none，其实还有一种（ignore-previous-rules），这个是用来控制content
blocker的行为的，跟资源屏蔽没有关系
selector（字符串，当type类型是css-display-none时必须添加selector参数）定义了匹配页面上元素的selector列表，类似css选择器
block：最强大的一种屏蔽广告的方式，它通知插件，不要加载trigger中匹配成功的资源，从源头上杜绝了广告，并且从某种意义上来说，加快了网页的加载速度，并且节省了流量，所以，我们一般优先使用block方式来进行广告的屏蔽；
block-cookies：Safari在contentblocker这套规则之上有自己的一套隐私策略，开发者只能在这个基础之上进行cookies的屏蔽，使用block-cookies和ignore-previous-rules的组合仍然遵循Safari的隐私设置。
css-display-none:通过对css元素的控制来达到屏蔽广告的效果，将trigger匹配到的css元素进行隐藏操作，从而达到屏蔽广告的作用。css-display-none要通过和selector的组合来使用，selector匹配页面中的css元素。

blockerList.json中一般包含多条规则，一个典型的规则文件类似于下面的格式，不同的规则之间用“，”隔开，一个大的规则文件，甚至可以包含上下条规则，当然，这个文件并不是可以无限大的，实际使用中我们文件一旦大到数10M后，会出现无法读取规则的现象，不知道这个是不是个例。

[
{
"trigger": {
…
},
"action": {
…
}
},
{
"trigger": {
…
},
"action": {
…
}
}
]

具体操作看下面的例子。

示例一：webkit网站上图片的屏蔽

extension创建后，默认的extension中自带有一条规则，上面我们已经列出来了，现在来解读一下
action type：block表示我们将使用block方法来进行屏蔽
trigger中使用的是url-filter，直接进行资源的匹配，匹配的是webkit.org/images/icon-gold.png这张图片资源

我们运行demo，然后在设置中打开Safari的content blocker


       


打开Safari，然后打开webkit.org，然后在mac的Safari的Develop菜单中选择simulator--Safari  www.webkit.org，这样就可以打开Safari的Web inspector
(如果是真机测试，那么首先要在设置的Safari--高级中打开web检查器)，Mac上面如果没有Develop选项的话打开Safari的preference，选择高级，把最下面的显示develop按钮勾上。
v

     


接下来，我们就可以利用web inspecor来进行资源或者css元素的查看



在resource中我们可以看到icon-gold.png这个文件，在Safari网页中可以看到，这个显示在标题左边的



现在，我们启动demo，看看这种图片是否被屏蔽了



很明显的，标题边上的icon被屏蔽了，说明block规则是生效的，下面，我们想把download那个图标也给屏蔽掉，该怎么操作呢，同样，在web inspector找到图标的名称，download.png，在json文件中添加一条block这个图标的规则，添加后的json文件如下：

[
{
"action": {
"type": "block"
},
"trigger": {
"url-filter": "webkit.org/images/icon-gold.png"
}
},
{
"action": {
"type": "block"
},
"trigger": {
"url-filter": "webkit.org/images/download.png"
}
]

示例二：

这个例子是通过block来屏蔽资源达到屏蔽广告的目的，下面，我们来通过css-display-none结合selector来屏蔽广告，效果图就是文章开头百度的例子，它的规则是怎么样的呢

{
"action": {
"type": "css-display-none",
"selector": "div.ec_wise_ad"
},
"trigger": {
"url-filter": "baidu.com"
}
}

为什么selector是div.ec_wise_ad？
同样，我们可以利用web inspector来进行筛选。手机上的Safari打开baidu.com并且搜索科鲁兹，然后在Mac的Safari中单击Develop中选择simulator或者真机xxx的iPhone，选中打开的网页，然后弹出web inspector，选择element标签，通过点击不同的节点可以定位到网页中的广告，如图



根据css选择器的规则，可以知道selector中的内容应该是"selector":"div.ec_wise_ad"，CSS选择器语法在这里可以看到:http://www.w3school.com.cn/cssref/css_selectors.asp，相信看过这个，css选择器该怎么操作，应该很有把握了。

通过这两个例子，你应该掌握了content blocker的基本用法了吧，关于ActionRequestHandler这个类的作用，extension与containing app的通信，留待下一篇吧。如果有什么问题或者疑问，欢迎评论或指正。