前言：

首先我們來看下沒有使用content blocker時，Safari用百度搜索時的情況，如下圖

前面兩個顯示出來的詞條都是屬於廣告詞條，這個就是content blocker需要處理的東西

使用 content blocker後的搜尋結果：

很明顯的看到，前面兩個廣告詞條被遮蔽掉了。

那麼，這是如何做到的呢？

建立Extension

我們用一個demo來說明一下這個過程

首先建立一個工程，接著，在工程中建立一個Extension,如圖

點選左下角，新增target

選擇Application Extension -- Content Blocker Extension

工程中出現如下資料夾，說明建立成功，建立成功後，系統會自動生成blockerList.json的檔案，這個檔案就是遮蔽廣告的核心檔案，通過這個檔案，我們可以自定義遮蔽規則，下面會重點介紹這個檔案。

ActionRequstHandler類： 這個類可以幫助我們對extension和containing app（也就是我們這個ContentBlockerDemo這個app）進行一些通訊，資料的互動等等。

extension建立後，執行這個工程，其實就已經實現了content blocker外掛的功能了，什麼？這麼簡單，確實就是這麼簡單，但是，注意，這裡只是實現了content blocker的功能，但是遮蔽的規則，也就是blockerList.json這個檔案，我們其實是沒有進行過任何改動的，而這個檔案，決定了我們可以遮蔽什麼，因此，現在的demo具備了遮蔽的功能，但是是否可以遮蔽內容還取決於規則檔案中的內容。接下來，我們就來看看這個json的規則檔案到底是什麼。

我們開啟blockerList.json檔案，裡面的內容是這樣的

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

Trigger

• url-filter(字串，必須)匹配資源的url（注意這裡是資源，包括圖片，媒體檔案，js檔案等等都包含在內）
• url-filter-is-case-sensitive（boolean型別，可選）url-filter中的內容是否區分大小寫
• resource-type (string陣列，可選) 
• load-type(string陣列，可選)
• if-domain(string陣列，可選)

Action

action指定了一旦trigger匹配成功了某些資源後該採取什麼樣的行動，一般有如下兩個有效的引數

• type  (字串，必須)：定義了當規則啟用後做什麼，目前有三種類型的type可以用來處理資源的：block，block-cookies，css-display-none，其實還有一種（ignore-previous-rules），這個是用來控制content blocker的行為的，跟資源遮蔽沒有關係
• selector（字串，當type型別是css-display-none時必須新增selector引數）定義了匹配頁面上元素的selector列表，類似css選擇器

  [
        {
            "trigger": {
                …
            },
            "action": {
                …
            }
        },
        {
            "trigger": {
                …
            },
            "action": {
                …
            }
        }
    ]

示例一：webkit網站上圖片的遮蔽

       

[
    {
        "action": {
            "type": "block"
        },
        "trigger": {
            "url-filter": "webkit.org/images/icon-gold.png"
        }
    },
    {
        "action": {
            "type": "block"
        },
        "trigger": {
            "url-filter": "webkit.org/images/download.png"
    }
]

示例二：

 {
        "action": {
            "type": "css-display-none",
            "selector": "div.ec_wise_ad"
    },
        "trigger": {
            "url-filter": "baidu.com"
        }
    }

根據css選擇器的規則，可以知道selector中的內容應該是"selector":"div.ec_wise_ad"，CSS選擇器語法在這裡可以看到:http://www.w3school.com.cn/cssref/css_selectors.asp，相信看過這個，css選擇器該怎麼操作，應該很有把握了。

通過這兩個例子，你應該掌握了content blocker的基本用法了吧，關於ActionRequestHandler這個類的作用，extension與containing app的通訊，留待下一篇吧。如果有什麼問題或者疑問，歡迎評論或指正。