iOS 9之Safari廣告攔截器（Content Blocker）

金田（ github 示例源碼）

      相對於谷歌對廣告攔截的禁止，蘋果與之態度截然相反，繼Mac版Safari加入廣告攔截工具以後，即將到來的iOS9對Safari也引入了內容攔截插件-Content Blocker，而且開發者可使用最新的Xcode7開發以及使用iOS 9模擬器進行調試，下面，筆者將用一個簡單的實例進行講解如何開發Content Blocker。

      在使用Google搜索時，排行靠前面的幾條永遠都是廣告項，好比搜索「iPhone6」，獲得的結果如圖1所示：

      

圖1 Google 搜索iPhone 6未進行廣告攔截示例

 

    今天的目標就是將廣告項攔截掉，之後在使用Google搜索時，都不會再有這種礙眼的廣告排在前面了。

     首先固然是建工程，建立一個iOS Single View Application,接着爲工程建立一個iOS Content Blocker Extension的target。而後咱們會看到，工程爲咱們自動建立了一個blockerList.json文件，以及一個ActionRequestHandler類。從ActionRequestHandler類的實現代碼不難看出，它是將blockerList.json文件嵌入Safari。事實上，這個json文件正是Content Blocker的核心，使用它將能夠用最簡單的配置方式，爲咱們實現內容攔截，接下來，我來說解一下這個json文件的編寫規則。

圖2 創建廣告攔截器（Content Blocker）工程

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,趕快去學習吧。

 

二、triggerr指定這條規則適用的網站url，可使用正規表達式，固然儘可能精確的表達式，不要影響網頁瀏覽效率，畢竟Content Blocker是應用於整個瀏覽器和全部的網站。

 

 

     瞭解了這些，咱們不難理解blockList.json的含義，type爲block，代表這是在阻止webkit.org/images/icon-gold.png這個圖片的加載。固然，咱們今天的目標是攔截Google搜索結果中的廣告項。

     首先，對action type的選擇，這裏很明顯是對網頁內容的攔截，咱們選擇的type值爲css-display-none，接着獲取咱們要隱藏的html元素，這裏咱們藉助Mac版Safari的網頁源碼分析工具，打開Mac版Safari，選擇Develop menu下的simulator，而後選擇正在瀏覽的www.Google.com.hk頁面，Web Inspector工具隨即將simulator上Safari正在瀏覽的網頁源碼陳列出來。什麼，沒有Develop menu？在Mac Safari的preference裏選擇advance選項，將Show Develop menu in menu bar選項選擇就有了。接下來，咱們很輕鬆地找到了廣告對應的div和它對應的id。 

 圖3 獲取插件元素示意圖

有了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/"

        }

    }

]

     激動人心的時刻到了，接下來讓咱們見證成敗，運行工程，記住，不要選擇了Content Blocker的target，那樣子雖然也能將json嵌入Safari，可是死活是無效的，也許是beta版的bug。

　　圖4 廣告攔截後搜索示意圖

     運行的程序一片空白，接下來咱們要到系統設置界面，選擇Safari->Content Blockers（內容攔截器）->打開你的插件（若是已經打開了，切記關掉後從新打開一次）。回到瀏覽器，刷新剛剛的Google搜索頁面，廣告項已經不在，且不管你在Google中搜索任何內容，你再也見不到排前面這一堆的廣告。

 

 

相關參考文獻：

https://developer.apple.com/videos/wwdc/2015/?id=511

https://www.webkit.org/blog/3476/content-blockers-first-look/

 

 
版權全部，轉載須註明做者（金田）及原文出處（原文）。