天天看點

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(内容攔截器)->打開你的插件(如果已經打開了,切記關掉後重新打開一次)。