Chrome外掛程式（Extensions）開發攻略

標籤：

目錄

1. 為什麼需要

2. 為什麼是Chrome

3. 需要準備什麼

4. 如何開始

5. Page Action

6. Chrome外掛程式結構

7. 學習資料

8. 我的例子

9. 調試

• 調試Content Scripts

• 調試Background

• 調試Popup

• 一些問題

10. 總結

為什麼需要

簡單地說，瀏覽器外掛程式，可以大大的擴充你的瀏覽器的功能。包括但不僅限於這些功能：捕捉特定網頁的內容，捕捉HTTP報文，捕捉使用者瀏覽動作，改變瀏覽器地址欄/起始頁/書籤/Tab等介面元素的行為，與別的網站通訊，修改網頁內容……給你增加許多想象空間，試想想看，你可以用它來識別一些網站上的廣告代碼，並直接把這些代碼刪掉，這樣你就不會受到廣告的困擾了，沒錯，如你所願，這樣的外掛程式別人已經開發好了，你可以直接用。不過，也要說瀏覽器外掛程式的弊端，那就是：會帶來一些安全隱患，也可能讓你的瀏覽器變得緩慢甚至不穩定。

為什麼是Chrome

因為Chrome的外掛程式開發起來最簡單，總體上看沒什麼新的技術，開發語言就是javascript，web前端工程師能很快上手；而Firefox的外掛程式開發則複雜許多，涉及到環境的搭建和一些WEB以外的技術；IE的外掛程式開發就更複雜了，需要熟悉C++和COM技術，當然還要裝微軟的Visual Studio。

這裡有篇老外寫的文章，對比Chrome、Opera和Firefox的外掛程式開發的：http://blog.nparashuram.com/2011/10/writing-browser-extensions-comparing.html。

應該說Chrome和Opera的外掛程式的開發都不難，但Firefox的則比較棘手，也許你要問，那為什麼Firefox的外掛程式是最豐富的？我想這有些曆史原因，Chrome出來畢竟比較晚，另外幾種瀏覽器提供的外掛程式的功能也是不盡相同的，OK，我們還是言歸正傳吧。

需要準備什麼

幾乎是零需求。Chrome瀏覽器和一個文字編輯器即可，文字編輯器最好是帶文法高亮的那種。Google對我們做技術的人來說真是太大度了。

如何開始

強烈建議看看官方的說明：https://developer.chrome.com/extensions/getstarted.html。

文章不長，照著文章去做，完成後，你就成功開發了第一個Chrome外掛程式，這個外掛程式會彈出一個小視窗，上面顯示些阿貓阿狗的小圖片。

這個外掛程式一共有4個檔案：

• manifest.json - 所有外掛程式都要有這個檔案，這是外掛程式的設定檔，可看作外掛程式的“入口”。

• icon.png - 小表徵圖，推薦使用19*19的半透明png圖片，更好的做法是同時提供一張38*38的半透明的png圖片作為大表徵圖，在我後面提供的例子中，我就是那麼乾的。

• popup.html - 就是你所看到的那個阿貓阿狗的彈出頁面。

• popup.js - 阿貓阿狗頁面所引用的javascript檔案。

這裡千萬千萬注意了，我當初沒仔細看popup.html裡有一小段注釋，這一小段注釋說：出於安全考慮，javascript必須與html分開存放。而我想嘛，一個小測試程式，沒必要分開吧，直接寫一起不就行了嗎？結果javascript死活執行不了，我翻來覆去找不到原因，還以為彈出的小視窗不支援javascript，在網上搜尋了半天又沒有結果，最後才發現是這個原因，浪費了許多時間，這個事情也一定程度上說明了：細節決定成敗。

manifest.json中的內容也非常顯而易見，我選擇其中幾個屬性講一下：

{  "manifest_version": 2,  "name": "One-click Kittens",  "description": "This extension demonstrates a browser action with kittens.",  "version": "1.0",  "permissions": [    "https://secure.flickr.com/"  ],  "browser_action": {    "default_icon": "icon.png",    "default_popup": "popup.html"  }}

"manifest_version"：現在應該總是2。

"permissions"：很重要的東西，即允許外掛程式做哪些事情，訪問哪些網站，假如一個外掛程式的"permissions"裡寫有“http://*.hacker.com/”，那麼這個外掛程式就被允許訪hacker.com上的所有內容，包括可能會把你的一些個人資訊提交給hacker.com，危險性不言而喻，查看一個外掛程式能訪問那些網站的方法是：在chrome的地址欄裡輸入“chrome://extensions/”（注意：這個頁面我們之後要頻繁用到，請收藏一下），然後點對應外掛程式的旁邊的那個“許可權”，如：

"default_popup"：用來指定點擊小表徵圖後彈出的小視窗中預設顯示的是哪個html，這個彈出的小視窗就叫做“popup”。

"browser_action"：這是一個瀏覽器級的動作，也就是說，不管你現在在訪問哪個頁面，那個小按鈕總是顯示出來，而我們的外掛程式如果僅僅是針對某些頁面的話，就不適合用這個"browser_action"了。下面我們來弄一個只有訪問部落格園（www.cnblogs.com）才會出現的小按鈕。

Page Action

chrome-plugin-page-action-demo.7z

這個外掛程式只有4個檔案，其中兩個還是表徵圖，那就只剩下一個必須的manifest.json和一個background.js了。

mainifest.json：

{     "manifest_version": 2,     "name": "cnblogs.com viewer",     "version": "0.0.1",     "background": { "scripts": ["background.js"] },     "permissions": ["tabs"],     "page_action": {          "default_icon": {               "19": "cnblogs_19.png",               "38": "cnblogs_38.png"          },          "default_title": "cnblogs.com article information"     }}

注意：這裡是“page_action”而不是“browser_action”屬性了。

“permissions”屬性裡的“tabs”是必須的，否則下面的js不能擷取到tab裡的url，而這個url是我們判斷是否要把小表徵圖show出來的依據。background是什麼概念？這是一個很重要的東西，可以把它認為是chrome外掛程式的主程式，理解這個很關鍵，一旦外掛程式被啟用（有些外掛程式對所有頁面都啟用，有些則只對某些頁面啟用），chrome就給外掛程式開闢了一個獨立的javascript運行環境（又稱作運行上下文），用來跑你指定的background script，在這個例子中，也就是background.js。

background.js

 host = "null"( url == "undefined" ||  === regex = /.*\:\/\/([^\/]*).*/ match =( match != "undefined" &&  !== match[1(getDomainFromUrl(tab.url).toLowerCase()=="www.cnblogs.com"

代碼中，我們使用了一個Regex去匹配url，擷取出其中的domain部分，如果domain部分是“www.cnblogs.com”的話，就把小表徵圖show出來，效果如下：

當然了，你現在點那個小表徵圖的話，是沒有任何反應的，我沒有像官方提供的那個例子那樣提供了popup。OK，現在是時候描述下chrome外掛程式的結構了。

Chrome外掛程式結構

需要聲明的是，這個結構圖是我自己畫的，代表我對Chrome外掛程式的理解，可能並不全面，甚至還不是十分準確，但找來找去找不到現成的，只好自己動手，如有謬誤，請不吝指出。

，manifest.json作為外掛程式的設定檔，同時可以看作程式的“入口”，因為它指定了顯示什麼表徵圖，background script有哪些檔案，content script又有哪些檔案，pop up的頁面是什麼，等等。

什麼是popup，什麼是background script，相信大家都清楚了，那什麼是content script呢？content script就是我們要注入到頁面中的指令碼，外掛程式允許我們往網頁中注入指令碼，這是一個多麼讓人有想象力的功能，其功能之強大無需多解釋，總的來說，就是讓我們全面幹預頁面的內容！也許你馬上會想到，這可能帶來很大的安全隱患，沒錯，有些惡意外掛程式會竊取你的頁面資訊，而有些有漏洞的外掛程式則可能讓你遭受跨站指令碼注入（XSS）的攻擊；另一個可能你會想到的問題是：往頁面中注入自己的指令碼，難道不會跟頁面原本的指令碼發生衝突嗎？能想到這點說明你真的很厲害，如果我們的注入指令碼和頁面原本的指令碼處於同一個運行環境中，確實會發生衝突，所以，Chrome是另外開闢了一個獨立的Runspace，供我們的Content Script使用的，Content Script能訪問DOM的內容，但卻不能訪問頁面原本的指令碼（我是說直接存取不行），反之，頁面原本的指令碼也不能直接存取Content Script。在圖中，淺紅色的背景塊代表Content Script的運行環境，而淺藍色的背景塊代表頁面運行環境，另外外掛程式的運行環境我用淺綠色表示，注意，這是三個不同的運行環境，調試的時候你會充分體會到它們的不同。

那麼，Content Script會在什麼時候運行呢？預設情況下，是在網頁載入完了和頁面指令碼執行完了，頁面轉入閒置情況下（Document Idle），但這個是可以改變的，詳情可參考https://developer.chrome.com/extensions/content_scripts.html，查看其中的“run_at”。

由於處於不同的運行環境中，Content Script和Background Script不能直接互相訪問，那它們之間如何通訊？通過Message！這個之後的代碼中會有。

學習資料

理解了Chrome外掛程式結構之後，我相信你完全有能力開發一款自己的外掛程式了，當然了，你得自己去google一些資料，這裡我就分享下我的方法。

首先，官方的資料一定得看看，https://developer.chrome.com/extensions/index.html，這個上面的資料得大致瀏覽一下（不需要全部仔細看），這樣你能夠明白一些術語，知道如何去尋找你的解決方案。

再則，官方提供的例子，可以看看，https://developer.chrome.com/extensions/samples.html，我發現上面的例子有些已經不能用於新版的Chrome了，但沒關係，你只要找你想要的就行了，也不用一個個嘗試，就根據你的需要，挑選幾個你感興趣的看看即可。

遇到問題，怎麼辦？當然是用google去尋找問題，但這裡我最最最強烈推薦stackoverflow.com，這簡直是解決問題的神器！不多解釋了，用過便知。

學習過程基本上就是：看個大概，寫點代碼，調試調試。就可以了。哦，大前提當然是你得有javascript的基礎。（你：呵呵，你在逗我吧！）

我的例子

chrome-plugin-cnblogs-article-information.zip

chrome-plugin-cnblogs-article-info-server.zip （伺服器端，PHP代碼）

好，輪到我的例子登場了。它的功能是這樣的：當你瀏覽部落格園的時候，它會啟動並嘗試擷取你瀏覽的文章的資訊（標題、作者和日期），再通過往另一個伺服器發送請求的方式，記錄和擷取你第一次訪問這篇文章的時間，把這個時間連帶文章的資訊，顯示在popup上。聽起來挺無聊的功能，但關鍵是為了示範嘛，

這個外掛程式一共有9個檔案，新出現的檔案有兩個（其它相信大家都很熟悉了），一個是“content_script.js”，這就是前面提到的Content Script，擷取和修改頁面的內容就靠它了；另一個是“jquery-2.0.0.min.js”，大名鼎鼎的jQuery，我很喜歡用的js庫，其理念是“write less，do more”，能幫我減少很多代碼，這是目前最新的2.0.0版，這個版本跟以前的1.x.x的最大差別就是不再支援IE6、7和8，我個人是十分贊同這種做法的，微軟的舊版瀏覽器都成了Web技術發展的絆腳石了，而且這次我們用的是Chrome瀏覽器，果斷選擇最新版了。

另外還有一個伺服器端，為了讓問題簡化，這次我用了php代碼，一個php檔案就是整個處理了，沒有太多繁雜的配置，簡潔，這是php最大的優勢。系統結構

抓取網頁的內容得依靠content_script.js，然後通過sendMessage/onMessage和background.js交換資料，background.js將url資訊通過ajax（XMLHttpRequest）發送給localhost，擷取此頁面的第一次訪問的時間，最後，使用者點小表徵圖，popup.html出現，popup.html會讀取（代碼在popup.js中）background.js中的articleData的資料，把它顯示出來。這就是整個過程。

我抓取網頁資料的方式並不能確保所有的部落格園的文章都能被正常擷取，這跟使用者使用的部落格模板有關係，但我嘗試下來大多數文章還是可以抓取的，我不去適應所有的模板了，畢竟這隻是個示範的demo。

另外還需說明的一點是我使用了jQuery做XMLHttpRequest，post的內容不是傳統的html表單形式，而是json資料，所以在伺服器端這邊，就不能直接用$_REQUEST擷取，而是通過讀取“php://input”的內容擷取。順便談談個人對web api的一個看法：“統一”大於“靈活”，這是我的觀點，我確定我的介面的格式是json，使用utf-8編碼，於是就一直用下去，調用者不用考慮用XML還是html表單還是別的，開發人員也不必多考慮，讓這成為一種統一的約定，在團隊協助和以後的開發中會很省事。

調試

程式開發，必定要涉及到調試，記得我剛開始做WEB開發前，問一些做了好久WEB開發的朋友，你們是怎樣做javascript調試的，我發覺大多數人竟然回答：用alert一點點試吧——不是不行，是太原始，太低效了，對吧？其實Chrome直接支援javascript的調試，擁有了Chrome，就相當於擁有了一個強大的javascript調試器了。

Chrome開啟開發人員工具的方法是<Ctrl>+<Shift>+<I>（Windows版），大致如下：

我們這次需要關心的有“Elements”、“Sources”和“Console”這三個標籤。Elements是用來做DOM分析的，功能有點類似Firebug，協助我們分析頁面的內容；而Sources，是我們用來調試javascript的；Console則是我們的Log的輸出視窗，也是一個調試利器。

調試Content Script

如我提供的這個例子，可在Sources的“Copntent Scripts”下看到“content_script.js”然後設斷點，執行到斷點處時，Chrome會挺住，你可以觀察到上面的值，

太cool了，請問你還要一點點alert嗎？

調試Background

由於background和content script並不在同一個運行環境中，因此上面的方法是看不到Background的javascript的。要調試Background，還需要開啟外掛程式頁，也就是“chrome://extensions”。點對應的外掛程式的“generated background page.html”，就出現了調試視窗，接下來的操作就跟前面的類似了。

至於你看到ID，“aajnhhjiia……”這一長串東西，這是chrome自動安排的一個ID。

調試Popup

雖然Popup和Background是處於同一運行環境中，但在剛才的Background的調試視窗中是看不到Popup的代碼的。調試Popup還需要這樣：

然後……就跟前面差不多了。

一些問題

也許有時候你會發覺調試器不是很靈，至少我用下來感覺如此，比如你可能發現斷點設不了，或者斷點不起作用，或者看不到你自己的javascript檔案。我的方法是在外掛程式頁中，把對應的外掛程式的“已啟用”這個複選框去掉，再重新勾上，然後再點一下“重新載入(Ctrl+R)”，通常能解決問題。當然了，還有些很古怪的問題，還不好重現，總體的解決思路就是重新載入一下，實在不行的話重啟瀏覽器，或者清除瀏覽器緩衝什麼的，再試試看。

在做外掛程式調試的時候我還遇到一個十分鬱悶的問題，那就是我的Chrome使用了“和G諧和o諧和Ag諧ent”，關於  和G諧和o諧和Ag諧ent  是用來幹嘛的，這個嘛，可以去google一下，我相信絕大多數程式員都會喜歡上它……可由於使用了這個東西，很可能會導致外掛程式的XMLHttpRequest工作不正常，而且可能你會思索半天也找不到原因，好吧，暫時把  和G諧和o諧和Ag諧ent  停用掉，甚至可能你需要重啟下Chrome——我的經驗。

總結

我還是想說，我覺得Google對我們程式員來說是個很大度的公司，在Chrome這個產品上面就可見一斑。利用Chrome外掛程式技術，我們可以做許多有用的東西，通過本文，相信你已經知道如何去開發一款Chrome外掛程式了，當然了，Chrome外掛程式的功能是很強大的，我用到的僅是冰山一小角。要深入，當然還需要更加充分地利用google和stackoverflow.com了。

Chrome外掛程式（Extensions）開發攻略