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

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

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

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

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

關(guān)于manifest.json 

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

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

需要提供一個(gè)xml文件，用于記錄升級(jí)的配置屬性。 

需要指定一個(gè)appid，對(duì)應(yīng)于生成的Chrome插件唯一ID（記住是加上了.pem文件一起打包擴(kuò)展程序的ID，而不是開發(fā)版的ID），以及下載地址、版本號(hào)，以下是豆瓣精靈的例子： 

<?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)于跨域提交請(qǐng)求 

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

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

關(guān)于localStorage 

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

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

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

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

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

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

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

本文來自：donnki的博客