大家肯定有這樣的經曆，浏覽網頁的時候，左右兩端廣告，諸如“屠龍寶刀，點選就送”，以及最近火的不行的林子聰37傳奇霸業什麼“霸業面具，霸業吊墜”的魔性廣告總是充斥我們的眼球。
當然有現成的擴充程式或者插件（兩者概念稍有不同）可以清除頁面廣告，但是既然身為一名程式猿，尤其是FEDer，為什麼不嘗試一下自己寫一個清除廣告的擴充程式呢。其實，編寫一個浏覽器擴充程式十分簡單，尤其是chrome擴充，可以完全使用前端技術（HTML/CSS/JS）完成一個自己編寫的擴充程式。讓我們一步一步，學習一下如何編寫一個簡單的清除廣告的擴充程式，跟煩人的頁面廣告say goodbye。
首先，想明确的一點是，編寫一個chrome擴充擴充程式并不難，入手也十分容易，大家不用覺得門檻特别高。
一個應用（擴充）其實是壓縮在一起的一組檔案，包括HTML，CSS，Javascript腳本，圖檔檔案，還有其它任何需要的檔案。 應用（擴充）本質上來說就是web頁面，它們可以使用所有的浏覽器提供的API，從XMLHttpRequest到JSON到HTML5全都有。
其實明白了這一點，那麼我們的目的就很明确了，要做一個清除頁面廣告的擴充程式，核心就是編寫一個腳本檔案，注入到我們通路的頁面中，通過比對廣告元素的DOM節點，将其幹掉清除。
每個擴充（extension）都應該包含下面的檔案：
一個manifest檔案
一個或多個html檔案
可選的一個或多個javascript檔案
可選的任何需要的其他檔案，例如圖檔
擴充程式圖示icon...
我們的擴充目錄需要建立的第一個檔案是一個清單檔案，包含了應用（擴充）的基本資訊，如擴充名稱、版本号，及最重要的檔案清單，應用（擴充）所需要的權限等。從更高的層次來看，我們将使用它來向 Chrome 浏覽器聲明擴充程式将會做什麼，以及為了完成這些任務所需要的權限：
接下來，将這一資料儲存在名為 <code>manifest.json</code> 的檔案中，放在您建立的目錄中，或者 從我的github上拷貝整個項目用作示例。
在manifest.json中，有個名為browser_action的key，其中"default_icon"和"default_popup"指的是擴充将顯示的圖示以及popup.html頁面。如果擴充配置及安裝成功，就會如下圖所示，其中在popup.html檔案中的内容将顯示在圖中default_popup區域中。
popup.html是擴充當中非常有用頁面，可以與使用者進行一個互動，不過在清除頁面廣告中并非主角。上面說的要向頁面當中注入腳本檔案，主要就是靠content_scripts，Content scripts是在Web頁面内運作的javascript腳本。通過使用标準的DOM，它們可以擷取浏覽器所通路頁面的詳細資訊，并可以修改這些資訊。
下面是content scipt可以做的一些事情範例：
比對頁面中的DOM結點，并修改他們的樣式
放大頁面字型使文字更清晰
從頁面中找到沒有寫成超連結形式的url，并将它們轉成超連結。
.......（所有你能想到的）
manifest.json中的content_scripts，有個"js"的key，擴充将會向所有比對的頁面，依次注入在"js"當中定義的頁面，在本擴充程式中，就是依次注入了"js/jquery-1.10.1.min.js", "js/my-del-ad-script.js"兩個檔案，其中my-del-ad-script.js就是我們要清除頁面廣告的代碼所在。
當上面的步驟你都看懂之後，後面的工作就是，編寫簡單的腳本，比對頁面當中的廣告元素的DOM節點，然後将其清除（簡單的利用JQ的.hide()）。
現在，我們要做的就是分析一下頁面當中，廣告元素的DOM節點樣式。
看看下面幾張圖：
通過觀察發現，頁面廣告要不就是出現頻率特别高的同類廣告（兩側的頁遊推廣），另一類是通過iframe内嵌到頁面中的圖檔。第一類廣告通常都擁有相同的ID屬性，基本上是 id:#cproIframe2001~#cproIframe2008。而第二類廣告通過選擇器比對，也能非常容易的定位到，譬如其中一種為$('div iframe').find('img')。
這樣，我們就算是找到了定位到了這些廣告的DOM節點，如何清除呢？其實很簡單，我是直接将其display:none将其隐藏。清除清除，不一定要删除節點，眼不見就可以了。
（很多園友提議直接remove掉節點能更好提升性能。）
看看簡單的JS代碼（此段代碼在my-del-ad-script.js中）：
當然，這裡隻是簡單是示例如何找到廣告并清除之，算法非常簡單并不嚴謹（勿噴），而且會有幾率誤殺”良性頁面“。有興趣的朋友可以自行改寫。
這樣，一個簡單的清除廣告的擴充程式就編寫好了，隻要擴充正常安裝，腳本将會被注入到所有比對到的頁面當中并發揮作用，看一下效果：
開啟擴充前後：
如果想檢視注入的腳本檔案是否正常運作，我寫了一句console，打開控制台檢視，看到Clear Start則是腳本正常運作。
可以看到，廣告全部被清除，但是可能誤殺了一些有用的元素，JS代碼可以更加精确改進。
更加精确的清除以及利用擴充實作更多的功能，趕緊動手試一下。
在您的浏覽器中通路 <code>chrome://extensions</code>（或者單擊多功能框最右邊的按鈕：打開 Chrome 浏覽器菜單，并選擇更多工具(L)菜單下的擴充程式(E)，進入相同的頁面）。
確定右上角開發者模式複選框已選中。(Ensure that the Developer mode checkbox in the top right-hand corner is checked)
單擊加載正在開發的擴充程式…，彈出檔案選擇對話框。
浏覽至您的擴充程式檔案所在的目錄，并標明。
您也可以将擴充程式檔案所在的目錄拖放到浏覽器中的 <code>chrome://extensions</code> 上加載它。如果擴充程式有效的話，它将被加載并且立刻處于活動狀态！如果無效的話，頁面頂部将顯示錯誤消息，請糾正錯誤再重試。
後記：
感謝有讀者提出指正 谷歌擴充程式 與 插件 的異同。
"擴充"和"插件"，其實都是軟體元件的一種形式，Chrome 隻不過是把兩種類型的元件分别給與了專有名稱，一個叫"擴充"，另一個叫"插件"。
擴充（Extension），指的是通過調用 Chrome 提供的 Chrome API 來擴充浏覽器功能的一種元件，工作在浏覽器層面，使用 HTML + Javascript 語言開發。比如著名的 Adblock plus。
插件（Plug-in），指的是通過調用 Webkit 核心 NPAPI 來擴充核心功能的一種元件，工作在核心層面，理論上可以用任何一種生成本地二進制程式的語言開發，比如 C/C++、Delphi 等。比如Flash player 插件，就屬于這種類型。一般在網頁中用 <object> 或者 <embed> 标簽聲明的部分，就要靠插件來渲染。
本文隻是非常簡單的介紹了chrome擴充，隻是chrome擴充的冰山一角，使用chrome擴充可以實作更多你想象不到的功能，更多詳情或者完整的API，請點選這裡。
本文執行個體的完整的擴充（extension）代碼在我的github上可以下載下傳。
原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。