IOS 9 Updated Safari ad blocker (Content blocker) development Combat

<span id="Label3"></p><p style="text-align: center;"><p style="text-align: center;"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">Gold field (github Source Download)</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">In contrast to Google's ban on ad interception, Apple's attitude is diametrically opposed, and the upcoming iOS9 has introduced the content blocker plugin-content blocker to safari after the Mac version of Safari joins the ad blocker. And developers can use the latest XCODE7 development and use the iOS 9 simulator for debugging, below, I will use a simple example to explain how to develop content blocker.</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">When using Google search, the top few are always ads, such as search "iPhone6", resulting in 1 of the results are as follows:</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;"></span></p></p><p style="text-align: center;" align="left"><p style="text-align: center;" align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">Figure 1 Google Search iphone 6 is not an example of ad blocking</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;"></span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">Today's goal is to intercept the ads, and later, when using Google search, there will be no such unsightly ads in front of the LINE.</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">First of all, of course, build a project, Create an iOS single View application, and then create an iOS Content blocker extension target for your project. Then we'll see that the project automatically creates a Blockerlist.json file for us, as well as a actionrequesthandler class. From the implementation code of the Actionrequesthandler class, it is easy to see that it is embedding the Blockerlist.json file in Safari. In fact, this JSON file is the core of the content blocker, using it will be able to use the simplest configuration, for us to achieve the contents of interception, next, I will explain the JSON file writing Rules.</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;"></span></p></p><p style="text-align: center;" align="left"><p style="text-align: center;" align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">Figure 2 Creating an ad blocker (Content blocker) project</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">A few lines of code are automatically generated in the Blockerlist.json file, and the code contains an action and a trigger, each combination of action and trigger constitutes a rule.</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">[[</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">{</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">' Action ': {</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">"type": "block"</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">},</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">"trigger": {</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">"url-filter": "webkit.org/images/icon-gold.png"</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">}</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">}</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">]]</span></p></p><p align="left"><p align="left"></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">1, The action specifies the interception method adopted by this rule, the 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 the CSS selector, which specifies which HTML Element's display property will be set to none (that is, hidden). of course, If you are unfamiliar with CSS selector, go ahead and Learn.</span></p></p><p align="left"><p align="left"></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">2, Triggerr specified This rule applies to the site 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 Site.</span></p></p><p><p></p></p><p align="left"><p align="left"></p></p><p><p><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">With this in view, 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 this image. of course, Our goal today is to intercept ads in Google search Results.</span></p></p><p align="left"><p align="left"><span style="font-family: ‘Microsoft YaHei‘; font-size: 14px;">first of all, the choice of action type, here is obviously the interception of Web content, we choose the type value of css-display-none, and then get the HTML element we want to hide, here we use the Mac version of Safari Web source analysis tool, Open the Mac version of safari, Select Simulator under Develop menu, and select the www.Google.com.hk page you're browsing, and the Web Inspector tool will display the source of the Web page simulator on Safari. what, No develop menu? Select the advance option in Mac Safari's preference and choose the Show Develop menu in the menu bar Option. next, It's easy to find the corresponding Div for the ad and its corresponding ID. </span></p></p><p align="left"><p align="left"></p></p><p style="text-align: center;" align="left"><p style="text-align: center;" align="left">Figure 3 Getting the plug-in element</p></p><p><p>With the Div id, we set the Selector property to div#taw, specify the div with ID taw, and then set trigger Url-filter as google.com.hk/.</p></p><p align="left"><p align="left">[</p></p><p align="left"><p align="left">{</p></p><p align="left"><p align="left">' Action ': {</p></p><p align="left"><p align="left">"type": "css-display-none",</p></p><p align="left"><p align="left">"selector": "div#taw"</p></p><p align="left"><p align="left">},</p></p><p align="left"><p align="left">"trigger": {</p></p><p align="left"><p align="left">"url-filter": "google.com.hk/"</p></p><p align="left"><p align="left">}</p></p><p align="left"><p align="left">}</p></p><p><p>]</p></p><p><p>The exciting moment is here, and then let's witness the success or failure, run the project, and remember, don't choose the target of the content blocker, although it can also embed the JSON in safari, but the dead or alive is invalid, perhaps the beta Bug.</p></p><p><p></p></p><p style="text-align: center;"><p style="text-align: center;">Figure 4 AD intercept after search</p></p><p style="text-align: left;" align="left"><p style="text-align: left;" align="left">Run the program is blank, next we will go to the system setup interface, select Safari->content blockers (content blocker), Open your plug-in (if it is already open, remember to turn it off and reopen it once). Go back to the browser, refresh the Google search page, the ad item is gone, and no matter what you search for in google, you'll never see a bunch of ads in the front ROW.</p></p><p style="text-align: left;" align="left"><p style="text-align: left;" align="left"></p></p><p align="center"><p align="center"></p></p><p align="left"><p align="left">Related References:</p></p><p align="left"><p align="left">https://developer.apple.com/videos/wwdc/2015/?id=511</p></p><p align="left"><p align="left">https://www.webkit.org/blog/3476/content-blockers-first-look/</p></p><p align="left"><p align="left"></p></p><p align="left"><p align="left"></p></p><p><p>IOS 9 Updated Safari ad blocker (Content blocker) development Combat</p></p></span>