以下是一位Chrome用戶撰寫的開(kāi)發(fā)心得。
這也是一個(gè)總結(jié)貼，關(guān)于最近一個(gè)月來(lái)利用空余時(shí)間寫的Chrome插件的方方面面。
12月初第一個(gè)周六上午在瀏覽豆瓣時(shí)心血來(lái)潮想寫Chrome插件，因?yàn)橹坝性诙拱隇榫W(wǎng)頁(yè)寫一些零碎的JS腳本（豆瓣是內(nèi)置使用jquery的），來(lái)實(shí)現(xiàn)一些特殊的比如“只看樓主”、“批量上傳/下載圖片”等等之類的JS腳本，在初略的讀了下Chrome插件的開(kāi)發(fā)文檔的getting start tutorial以后，決定把之前寫的那些JS腳變直接變成插件里的某段程序，于是開(kāi)始研究Chrome插件機(jī)制及相關(guān)的API。
自己寫的豆瓣精靈插件google code地址：http://code.google.com/p/douban-demon/，可以通過(guò)svn下載全部源代碼。包括豆瓣精靈和Rss Snack兩個(gè)插件，其中前者一直有在慢慢更新，而后者是在一次大學(xué)同學(xué)技術(shù)討論RSS相關(guān)時(shí)做的一個(gè)快速DEMO來(lái)談插件實(shí)現(xiàn)的技術(shù)可能性，暫無(wú)更新了，不過(guò)這個(gè)插件使用到了jqueryUI和定制chrome插件鼠標(biāo)右鍵的功能，具有一定的參考價(jià)值。
以下是Chrome插件技術(shù)的一些tip總結(jié)，更多內(nèi)容參考官方文檔。
關(guān)于manifest.json
manifest.json故名思義，是用來(lái)管理整個(gè)插件的核心配置文件。包括插件的權(quán)限設(shè)置、名字、版本號(hào)、以及所有用到的資源，都需要在這里面指定，下面是豆瓣精靈的manifest.json。
{ "name" : "豆瓣精靈", //extension名稱 "version" : "1.6.0", //版本號(hào)（自動(dòng)更新時(shí)需要用到） "update_url": "http://douban-demon.googlecode.com/svn/updates.xml", //自動(dòng)更新時(shí)的對(duì)比配置文件 "description" : "【豆瓣精靈】有什么問(wèn)題或意見(jiàn)或建議，請(qǐng)聯(lián)系russell.liuyi@gmail.com，或豆瓣ID：http://www.douban.com/people/3811658/", "options_page": "html/options.html", //選項(xiàng)頁(yè)面?？梢栽跀U(kuò)展程序——選項(xiàng)里訪問(wèn)到的 "permissions": ["tabs", "notifications","http://*/*", "https://*/*"], //插件訪問(wèn)權(quán)限，tabs是指打開(kāi)的標(biāo)簽頁(yè)，notifications是指桌面彈出窗口，其它兩個(gè)是可以訪問(wèn)的鏈接地址。 "background_page" : "html/background.html", //后臺(tái)運(yùn)行的頁(yè)面，所有的跨域請(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ì)哪些頁(yè)面生效、需要哪些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，而不是開(kāi)發(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.googlecode.com/files/DoubanDemon-v1.6.0.crx' version='1.6.0' />
- </app>
- </gupdate>
關(guān)于跨域提交請(qǐng)求
Chrome瀏覽器禁止跨域提交Ajax請(qǐng)求（除非是jsonp方式），但是在插件的backgroupd頁(yè)面是可以直接跨域提交Ajax請(qǐng)求的！比如說(shuō)如果想在contentscript.js中在豆瓣的頁(yè)面訪問(wèn)新浪微博的鏈接，這樣是不行的，Chrome會(huì)提示你禁止訪問(wèn)，這個(gè)時(shí)候需要把它放到background.html中來(lái)做。
另外要注意的是，有些網(wǎng)站跨域提交POST數(shù)據(jù)被直接被禁止，所以需要使用這些網(wǎng)站提供的API來(lái)實(shí)現(xiàn)對(duì)應(yīng)的功能，驗(yàn)證方式建議可以的話 盡量使用oauth一勞永逸的方式。
關(guān)于localStorage
可以讓程序員來(lái)編程存儲(chǔ)用戶瀏覽器數(shù)據(jù)，也就是說(shuō)用戶就算關(guān)閉瀏覽器，下次再打開(kāi)時(shí)，localStorage的數(shù)據(jù)仍然存在。但是如果用戶執(zhí)行了清理所有瀏覽器數(shù)據(jù)及cookie時(shí)，存在localStorage里的數(shù)據(jù)將消失。
每個(gè)網(wǎng)站都有自己的localStorage存放在Chrome緩存中互不沖突。而插件仍然也保存了一份不沖突的localStorage。也就是說(shuō)：如果在豆瓣的contentscript.js中執(zhí)行對(duì)localStorage的操作，只能取到豆瓣的localStorage，而無(wú)法取到插件的localStorage，如果要執(zhí)行對(duì)插件的localStorage的讀寫操作，需要使用Chrome的chrome.extensions.sendMessage()來(lái)存取。
另外，localStorage只能存二維數(shù)據(jù)。但是可以通過(guò)JSON.parse(normalString)來(lái)讓它解壓更復(fù)雜的json數(shù)據(jù)，相應(yīng)的可以通過(guò)JSON.stringify(jsonString)來(lái)序列化一串JSON數(shù)據(jù)。
關(guān)于oauth協(xié)議
OAuth協(xié)議的詳細(xì)內(nèi)容可以參考RFC文檔或者oauth官方網(wǎng)站的文檔，以下我在研究過(guò)程中能記得的一些小TIP：
官方OAUTH文檔是說(shuō)所有的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ò)路。
計(jì)算簽名時(shí)，有些數(shù)據(jù)是必須放到basicString中做為簽名的一部分來(lái)簽名的，比如說(shuō)新浪微博的發(fā)表新微博，需要把發(fā)表的內(nèi)容轉(zhuǎn)碼后以status作為KEY，內(nèi)容作為value成為basicString的一部分，然后再計(jì)算簽名。此外簽名時(shí)參數(shù)的順序也不能錯(cuò)。否則會(huì)出現(xiàn)簽名認(rèn)錯(cuò)失敗的情況。雖然很多網(wǎng)站的API OAUTH認(rèn)證的文檔寫得不詳細(xì)，但是容易出錯(cuò)的地方還是可以到他們的網(wǎng)站上找到的，一旦出錯(cuò)了，先到文檔上找找是不是有什么特別的提示，這樣可能可以更快的發(fā)現(xiàn)錯(cuò)誤。
本文來(lái)自：donnki的博客
聯(lián)系客服
