下面通過圖文並茂的方式給大家分享下這方面的知識,具體內容如下。
相對於Google對廣告攔截的禁止,蘋果與之態度截然相反,繼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" } }]]
1、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,趕快去學習吧。
2、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中搜尋任何內容,你再也見不到排前面這一堆的廣告。
以上就是本文的全部內容,希望大家喜歡。