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

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

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

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

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

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

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

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

引用文件

你可以放置任何文件到你的擴(kuò)展里面，但是怎么調(diào)用這些文件呢？一般來說，使用相對(duì)地址調(diào)用，類似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，用來描述這個(gè)擴(kuò)展，包括擴(kuò)展名字、版本、調(diào)用的文件、可用域等信息。下面是個(gè)典型的manifest文件，這個(gè)擴(kuò)展可以調(diào)用google.com的內(nèi)容。

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

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

HTML頁面

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

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

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

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

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

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

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

不同頁面間的交互

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

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