這篇文章翻譯自http://code.google.com/chrome/extensions/overview.html，我還沒(méi)有真正做過(guò)插件，翻譯這篇文章算是班門(mén)弄斧，有翻譯的不好的地方請(qǐng)一定指出來(lái)，希望能夠達(dá)到完美！

( 對(duì)新手說(shuō)的話(huà)：文章涉及到的一些術(shù)語(yǔ)，對(duì)沒(méi)有任何網(wǎng)頁(yè)知識(shí)的新手來(lái)說(shuō)還是挺難懂的，可以借助Google/baidu看一下，其實(shí)不懂也沒(méi)多大關(guān)系，這篇文章只是一個(gè)概述，完全可以跳過(guò)這些術(shù)語(yǔ)，希望大家對(duì)制作插件不要失去信心。)

只要看完這篇文章，并且做過(guò)入門(mén)指南中的例子，你就可以真正開(kāi)始開(kāi)發(fā)屬于自己的Chrome插件了。

一個(gè)Chrome擴(kuò)展是由HTML、CSS、JavaScript、圖片等文件壓縮而成。擴(kuò)展實(shí)際上就是一個(gè)web頁(yè)面，你可以用任何瀏覽器提供給web頁(yè)面的接口，從XMLHttpRequest 到JSON ，再到HTML本地緩存都可以使用。

Chrome擴(kuò)展能做什么呢？我們肯定使用過(guò)一些擴(kuò)展，會(huì)發(fā)現(xiàn)有些擴(kuò)展在Chrome地址欄右側(cè)區(qū)域增加一個(gè)圖標(biāo)。還有些擴(kuò)展能夠和瀏覽器的一些元素(如書(shū)簽、tab導(dǎo)航標(biāo)簽)交互。擴(kuò)展還可以和web頁(yè)面交互，甚至是從web服務(wù)器獲取數(shù)據(jù)。更加詳細(xì)的內(nèi)容可以從Developer's Guide看到。

每個(gè)擴(kuò)展由下列文件組成：

• 一個(gè)manifest文件(主文件,json格式)
• 至少一個(gè)HTML文件(主題可以沒(méi)有HTML文件)
• JavaScript文件 (可選，非必須)
• 任何其他你需要的文件(比如圖片)

當(dāng)你開(kāi)發(fā)一個(gè)擴(kuò)展的時(shí)候，需要把這些文件放在一個(gè)文件夾里，當(dāng)你發(fā)布這個(gè)擴(kuò)展的時(shí)候，這個(gè)文件夾下的所有文件將會(huì)打包成一個(gè)特殊后綴.crx的ZIP文件。

引用文件

你可以放置任何文件到你的擴(kuò)展里面，但是怎么調(diào)用這些文件呢？一般來(lái)說(shuō)，使用相對(duì)地址調(diào)用，類(lèi)似HTML中調(diào)用文件。下面是個(gè)例子，在子文件夾images中有個(gè)圖片myimage.png，我們可以這樣調(diào)用它

其中images/myimage.png表示這個(gè)文件。

也許你注意到當(dāng)使用Google Chrome debugger查看這些文件的時(shí)候給，每個(gè)文件的地址是下面這種格式

這個(gè)地址中，<extensionID>是你制作的擴(kuò)展的唯一標(biāo)示符，也就是擴(kuò)展的身份證編號(hào)。<pathToFile>是文件相對(duì)擴(kuò)展頂級(jí)文件夾得位置。

manifest文件

主文件取名manifest.json，用來(lái)描述這個(gè)擴(kuò)展，包括擴(kuò)展名字、版本、調(diào)用的文件、可用域等信息。下面是個(gè)典型的manifest文件，這個(gè)擴(kuò)展可以調(diào)用google.com的內(nèi)容。

絕大部分?jǐn)U展有background文件，一個(gè)不可見(jiàn)的文件控制著整個(gè)擴(kuò)展的運(yùn)行。

上面這個(gè)圖片顯示的瀏覽器至少安裝了兩個(gè)擴(kuò)展：一個(gè)瀏覽器行為擴(kuò)展(黃色的圖標(biāo)),頁(yè)面行為擴(kuò)展(藍(lán)色的圖標(biāo))。這個(gè)瀏覽器行為擴(kuò)展的background文件是用一個(gè)HTML文件定義的(background.html)，這個(gè)background文件中有JavaScript代碼控制整個(gè)瀏覽器的活動(dòng)。

HTML頁(yè)面

background不是唯一存在的HTML文件，比如瀏覽器行為可能是彈出一個(gè)小窗口，這個(gè)小窗口的內(nèi)容就可以調(diào)用一個(gè)HTML文件。Chrome擴(kuò)展也能夠用chrome.tabs.create() or window.open()這種函數(shù)來(lái)顯示HTML文件。

擴(kuò)展里面的HTML文件可以互相訪(fǎng)問(wèn)對(duì)方的DOM結(jié)構(gòu)，可以引用其他文件中定義的函數(shù)。

下面的圖展示了瀏覽器彈出一個(gè)窗口這個(gè)功能的結(jié)構(gòu)(這正是我們最開(kāi)始的例子)。這個(gè)彈出窗口的內(nèi)容是一個(gè)HTML的web文件，這個(gè)彈出窗口不需要包含background文件中的代碼，因?yàn)椋琾opup.html和background是可以互相訪(fǎng)問(wèn)的。

內(nèi)容腳本(Content scripts)

如果你插件需要和網(wǎng)頁(yè)交互，那么他就需要一個(gè)內(nèi)容腳本(Content scripts)，內(nèi)容腳本常由JavaScript編寫(xiě)，會(huì)在網(wǎng)頁(yè)載入完成后調(diào)用。完全可以把內(nèi)容腳本看做是網(wǎng)頁(yè)的一部分，而不是擴(kuò)展的一部分。

內(nèi)容腳本可以訪(fǎng)問(wèn)到當(dāng)前瀏覽器瀏覽的頁(yè)面，而且還可以改變網(wǎng)頁(yè)的顯示方式(油猴腳本就是內(nèi)容腳本)。下面的圖片中，內(nèi)容腳本可以讀取、更改網(wǎng)頁(yè)的DOM。注意，他不能更改background.html中的內(nèi)容。

內(nèi)容腳本也不是和父擴(kuò)展完全隔離開(kāi)來(lái)，他也可以和父級(jí)擴(kuò)展交換信息。如下圖中所示，內(nèi)容腳本在發(fā)現(xiàn)一個(gè)RSS Feed地址后將會(huì)給background.html發(fā)送一個(gè)信息?；蛘遙ackground.html給內(nèi)容腳本發(fā)送一個(gè)信息要求改變網(wǎng)頁(yè)外觀(guān)。

不同頁(yè)面間的交互

一個(gè)擴(kuò)展中的文件常常需要交互。由于擴(kuò)展的所有文件都由同一個(gè)進(jìn)程執(zhí)行，網(wǎng)頁(yè)能夠直接給其他頁(yè)面發(fā)送命令。

可以使用類(lèi)似chrome.extension methods such as getViews() and getBackgroundPage()這樣的方法引用擴(kuò)展中的方法。一旦頁(yè)面中引用了另外的頁(yè)面，第一個(gè)頁(yè)面就可以調(diào)用其他頁(yè)面的函數(shù)，甚至可以控制DOM。