以下是一位Chrome用戶撰寫的開發(fā)心得。

這也是一個總結(jié)貼，關(guān)于最近一個月來利用空余時間寫的Chrome插件的方方面面。 

12月初第一個周六上午在瀏覽豆瓣時心血來潮想寫Chrome插件，因為之前有在豆瓣為網(wǎng)頁寫一些零碎的JS腳本（豆瓣是內(nèi)置使用jquery的），來實現(xiàn)一些特殊的比如“只看樓主”、“批量上傳/下載圖片”等等之類的JS腳本，在初略的讀了下Chrome插件的開發(fā)文檔的getting start tutorial以后，決定把之前寫的那些JS腳變直接變成插件里的某段程序，于是開始研究Chrome插件機制及相關(guān)的API。

自己寫的豆瓣精靈插件google code地址：http://code.google.com/p/douban-demon/，可以通過svn下載全部源代碼。包括豆瓣精靈和Rss Snack兩個插件，其中前者一直有在慢慢更新，而后者是在一次大學同學技術(shù)討論RSS相關(guān)時做的一個快速DEMO來談插件實現(xiàn)的技術(shù)可能性，暫無更新了，不過這個插件使用到了jqueryUI和定制chrome插件鼠標右鍵的功能，具有一定的參考價值。 

以下是Chrome插件技術(shù)的一些tip總結(jié)，更多內(nèi)容參考官方文檔。 

關(guān)于manifest.json 

manifest.json故名思義，是用來管理整個插件的核心配置文件。包括插件的權(quán)限設置、名字、版本號、以及所有用到的資源，都需要在這里面指定，下面是豆瓣精靈的manifest.json。

{  
  "name" : "豆瓣精靈",   //extension名稱  
  "version" : "1.6.0",   //版本號（自動更新時需要用到）  
  "update_url": "http://douban-demon./svn/updates.xml",  //自動更新時的對比配置文件  
  "description" : "【豆瓣精靈】有什么問題或意見或建議，請聯(lián)系russell.liuyi@gmail.com，或豆瓣ID：http://www.douban.com/people/3811658/",  
  "options_page": "html/options.html",   //選項頁面?？梢栽跀U展程序——選項里訪問到的  
  "permissions": ["tabs", "notifications","http://*/*", "https://*/*"],  //插件訪問權(quán)限，tabs是指打開的標簽頁，notifications是指桌面彈出窗口，其它兩個是可以訪問的鏈接地址。  
  "background_page" : "html/background.html", //后臺運行的頁面，所有的跨域請求應該放在這里面執(zhí)行。  
  "page_action" :  //插件小圖標的一些相關(guān)配置  
  {  
    "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"  
  }  
}

關(guān)于插件自動升級 

需要提供一個xml文件，用于記錄升級的配置屬性。 

需要指定一個appid，對應于生成的Chrome插件唯一ID（記住是加上了.pem文件一起打包擴展程序的ID，而不是開發(fā)版的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./files/DoubanDemon-v1.6.0.crx' version='1.6.0' />  
  </app>  
</gupdate>  

關(guān)于跨域提交請求 

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

另外要注意的是，有些網(wǎng)站跨域提交POST數(shù)據(jù)被直接被禁止，所以需要使用這些網(wǎng)站提供的API來實現(xiàn)對應的功能，驗證方式建議可以的話 盡量使用oauth一勞永逸的方式。

關(guān)于localStorage 

可以讓程序員來編程存儲用戶瀏覽器數(shù)據(jù)，也就是說用戶就算關(guān)閉瀏覽器，下次再打開時，localStorage的數(shù)據(jù)仍然存在。但是如果用戶執(zhí)行了清理所有瀏覽器數(shù)據(jù)及cookie時，存在localStorage里的數(shù)據(jù)將消失。 

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

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

關(guān)于oauth協(xié)議 

OAuth協(xié)議的詳細內(nèi)容可以參考RFC文檔或者oauth官方網(wǎng)站的文檔，以下我在研究過程中能記得的一些小TIP： 

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

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

本文來自：donnki的博客