Chrome外掛程式技術開發總結

以下是一位Chrome使用者撰寫的開發心得。

這也是一個總結貼，關於最近一個月來利用空餘時間寫的Chrome外掛程式的方方面面。 

12月初第一個周六上午在瀏覽豆瓣時心血來潮想寫Chrome外掛程式，因為之前有在豆瓣為網頁寫一些零碎的JS指令碼（豆瓣是內建使用jquery的），來實現一些特殊的比如“只看樓主”、“批量上傳/下載圖片”等等之類的JS指令碼，在初略的讀了下Chrome外掛程式的開發文檔的getting start tutorial以後，決定把之前寫的那些JS腳變直接變成外掛程式裡的某段程式，於是開始研究Chrome外掛程式機制及相關的API。

自己寫的豆瓣精靈外掛程式google code地址：http://code.google.com/p/douban-demon/，可以通過svn下載全部原始碼。包括豆瓣精靈和Rss Snack兩個外掛程式，其中前者一直有在慢慢更新，而後者是在一次大學同學技術討論RSS相關時做的一個快速DEMO來談外掛程式實現的技術可能性，暫無更新了，不過這個外掛程式使用到了jqueryUI和定製chrome外掛程式滑鼠右鍵的功能，具有一定的參考價值。 

以下是Chrome外掛程式技術的一些tip總結，更多內容參考官方文檔。 

關於manifest.json 

manifest.json故名思義，是用來管理整個外掛程式的核心設定檔。包括外掛程式的使用權限設定、名字、版本號碼、以及所有用到的資源，都需要在這裡面指定，下面是豆瓣精靈的manifest.json。

{    "name" : "豆瓣精靈",   //extension名稱    "version" : "1.6.0",   //版本號碼（自動更新時需要用到）    "update_url": "http://douban-demon.googlecode.com/svn/updates.xml",  //自動更新時的對比設定檔    "description" : "【豆瓣精靈】有什麼問題或意見或建議，請聯絡russell.liuyi@gmail.com，或豆瓣ID：http://www.douban.com/people/3811658/",    "options_page": "html/options.html",   //選項頁面。可以在擴充程式——選項裡訪問到的    "permissions": ["tabs", "notifications","http://*/*", "https://*/*"],  //外掛程式存取權限，tabs是指開啟的標籤頁，notifications是指案頭快顯視窗，其它兩個是可以訪問的連結地址。    "background_page" : "html/background.html", //後台啟動並執行頁面，所有的跨域請求應該放在這裡面執行。    "page_action" :  //外掛程式小表徵圖的一些相關配置    {      "default_icon" : "image/demon-19.gif",      "default_title" : ""    },    "content_scripts" : [  //content_script.js只對哪些頁面生效、需要哪些JS檔案      {        "matches" : [          "http://*.douban.com/*",      "http://api.t.sina.com.cn/oauth/*"        ],       "js": ["js/jquery.js","js/jquery-ui.js", "js/contentscript.js"],        "run_at" : "document_idle",        "all_frames" : false      }    ],    "icons" : {       "48" : "image/demon-48.gif"    }  }

關於外掛程式自動升級 

需要提供一個xml檔案，用於記錄升級的配置屬性。 

需要指定一個appid，對應於產生的Chrome外掛程式唯一ID（記住是加上了.pem檔案一起打包擴充程式的ID，而不是開發版的ID），以及、版本號碼，以下是豆瓣精靈的例子： 

<?xml version='1.0' encoding='UTF-8'?>  <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>    <app appid='hldoefihoaojobhlpfmnkjodjkmpicha'>      <updatecheck codebase='http://douban-demon.googlecode.com/files/DoubanDemon-v1.6.0.crx' version='1.6.0' />    </app>  </gupdate>  

關於跨域提交請求 

Chrome瀏覽器禁止跨域提交Ajax請求（除非是jsonp方式），但是在外掛程式的backgroupd頁面是可以直接跨域提交Ajax請求的！比如說如果想在contentscript.js中在豆瓣的頁面訪問新浪微博的連結，這樣是不行的，Chrome會提示你禁止訪問，這個時候需要把它放到background.html中來做。 

另外要注意的是，有些網站跨域提交POST資料被直接被禁止，所以需要使用這些網站提供的API來實現對應的功能，驗證方式建議可以的話 盡量使用oauth一勞永逸的方式。

關於localStorage 

可以讓程式員來編程儲存使用者瀏覽器資料，也就是說使用者就算關閉瀏覽器，下次再開啟時，localStorage的資料仍然存在。但是如果使用者執行了清理所有瀏覽器資料及cookie時，存在localStorage裡的資料將消失。 

每個網站都有自己的localStorage存放在Chrome緩衝中互不衝突。而外掛程式仍然也儲存了一份不衝突的localStorage。也就是說：如果在豆瓣的contentscript.js中執行對localStorage的操作，只能取到豆瓣的localStorage，而無法取到外掛程式的localStorage，如果要執行對外掛程式的localStorage的讀寫操作，需要使用Chrome的chrome.extensions.sendMessage()來存取。 

另外，localStorage只能存二維資料。但是可以通過JSON.parse(normalString)來讓它解壓更複雜的json資料，相應的可以通過JSON.stringify(jsonString)來序列化一串JSON資料。 

關於oauth協議 

OAuth協議的詳細內容可以參考RFC文檔或者oauth官方網站的文檔，以下我在研究過程中能記得的一些小TIP： 

官方OAUTH文檔是說所有的OAUTH實現應該可以放在HTTP HEADER或者POST FORM或者URL GET中，但是很多網站提供的AIP都只支援其中一種，比如豆瓣和新浪的api是放在http header中，而騰迅微博的API的OAUTH資料是只能附加上URL上做為GET的請求資料。這個需要仔細查看對應網站的API文檔，以免走錯路。 

計算簽名時，有些資料是必須放到basicString中做為簽名的一部分來簽名的，比如說新浪微博的發表新微博，需要把發表的內容轉碼後以status作為KEY，內容作為value成為basicString的一部分，然後再計算簽名。此外簽名時參數的順序也不能錯。否則會出現簽名認錯失敗的情況。 

雖然很多網站的API OAUTH認證的文檔寫得不詳細，但是容易出錯的地方還是可以到他們的網站上找到的，一旦出錯了，先到文檔上找找是不是有什麼特別的提示，這樣可能可以更快的發現錯誤。 

本文來自：donnki的部落格