IOS 9 Update Safari AD Interceptor (Content blocker) development tutorial _ios

The following through the way to share the information in this area, the specific contents are as follows.

Compared to Google's ban on advertising interception, Apple's attitude is diametrically opposed, following the Mac version of Safari to join the advertising interception tool, the upcoming iOS9 to Safari also introduced a content interception plug-in-content blocker, And developers can use the latest XCODE7 development and use the iOS 9 simulator for debugging, the following, I will use a simple example to explain how to develop content blocker.

When using Google search, the first few are always ads, such as search "IPhone6", the results are as shown in Figure 1:

Figure 1 Google search for the iphone 6 does not advertise blocking example

Today's goal is to intercept the ads, later in the use of Google search, there will be no such unsightly ads in front of the line.

First of course is to build a project, create an iOS single View application, and then create an iOS Content blocker extension target for the project. Then we'll see that the project automatically creates a Blockerlist.json file for us, as well as a Actionrequesthandler class. It is easy to see from the implementation code of the Actionrequesthandler class that it embeds the Blockerlist.json file in Safari. As a matter of fact, this JSON file is the core of content blocker, and using it will enable us to intercept the content with the simplest configuration, and then I'll explain the rules for writing this JSON file.

Figure 2 Establishing the Advertising Interceptor (Content blocker) project

The Blockerlist.json file automatically generates a few lines of code that contains an action and a trigger, and each combination of action and trigger constitutes a rule.

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

1, action specifies this rule to use the interception method, type optional value is "block", "Block-cookies", "Css-display-none", respectively, the interception of resource files (such as CSS files, JS files, picture resources), Block cookies, set the display property of the specified HTML element css to none. When type is Css-display-none, you must include the key value pair of "selector" in the action, selector is CSS selector, specifying which HTML element's display property will be set to none (that is, hidden). Of course, if you are not familiar with CSS selector, go to study quickly.

2, Triggerr Specify this rule applicable website URL, you can use regular expression, of course, as far as possible accurate expression, do not affect the efficiency of web browsing, after all, content blocker is applied to the entire browser and all the sites.

With this understanding, it is not difficult to understand the meaning of Blocklist.json, type block, which indicates that this is preventing webkit.org/images/icon-gold.png from loading the picture. Of course, our goal today is to intercept ads in Google's search results.

First of all, the choice of action type, here is obviously to intercept the content of the page, we choose the type value of Css-display-none, and then get the HTML elements we want to hide, here we use the Mac version of Safari Web page Source Analysis tool, Open the Mac version Safari, select the simulator under Develop menu, and then select the WWW.GOOGLE.COM.HK page you are browsing, and the Web Inspector tool will then display the source code on the page that Safari is browsing in simulator. What, no develop menu? Select the advance option in the preference of Mac Safari and the Show develop menu in menu bar option is available. Next, it's easy to find the corresponding Div for the ad and its corresponding ID.

Figure 3 Getting a schematic of the plug-in element

With the div ID, we set the Selector property to Div#taw, specify the div with ID Taw, and then set trigger Url-filter to google.com.hk/.

[
 {
  ' action ': {'
    type ': ' Css-display-none ',
    ' selector ': ' Div#taw '
  },
  ' trigger ': {
   ' Url-filter ":" google.com.hk/"
  }
 }
]

The exciting moment is coming, and then let's see what happens, run the project, and remember, don't choose target for content blocker, which can embed JSON in Safari, but it doesn't work, it's probably a beta bug.

Fig. 4 Search schematic after AD interception

The running program is blank, next we go to the System Setup interface, select Safari->content blockers (content Interceptor)-> Open your plugin (if it is already open, remember to turn it off once again). Go back to the browser, refresh the Google search page just now, the ads are gone, and no matter what you search for in Google, you will never see the stack of ads in front of you.

The above is the entire content of this article, I hope you like.