|
這篇文章翻譯自http://code.google.com/chrome/extensions/overview.html，我還沒有真正做過插件，翻譯這篇文章算是班門弄斧，有翻譯的不好的地方請一定指出來，希望能夠達到完美！
( 對新手說的話：文章涉及到的一些術(shù)語，對沒有任何網(wǎng)頁知識的新手來說還是挺難懂的，可以借助Google/baidu看一下，其實不懂也沒多大關(guān)系，這篇文章只是一個概述，完全可以跳過這些術(shù)語，希望大家對制作插件不要失去信心。)
只要看完這篇文章，并且做過入門指南中的例子，你就可以真正開始開發(fā)屬于自己的Chrome插件了。
一個Chrome擴展是由HTML、CSS、JavaScript、圖片等文件壓縮而成。擴展實際上就是一個web頁面，你可以用任何瀏覽器提供給web頁面的接口，從XMLHttpRequest 到JSON ，再到HTML本地緩存都可以使用。
Chrome擴展能做什么呢？我們肯定使用過一些擴展，會發(fā)現(xiàn)有些擴展在Chrome地址欄右側(cè)區(qū)域增加一個圖標。還有些擴展能夠和瀏覽器的一些元素(如書簽、tab導(dǎo)航標簽)交互。擴展還可以和web頁面交互，甚至是從web服務(wù)器獲取數(shù)據(jù)。更加詳細的內(nèi)容可以從Developer's Guide看到。
每個擴展由下列文件組成：
- 一個manifest文件(主文件,json格式)
- 至少一個HTML文件(主題可以沒有HTML文件)
- JavaScript文件 (可選，非必須)
- 任何其他你需要的文件(比如圖片)
當你開發(fā)一個擴展的時候，需要把這些文件放在一個文件夾里，當你發(fā)布這個擴展的時候，這個文件夾下的所有文件將會打包成一個特殊后綴.crx的ZIP文件。
引用文件
你可以放置任何文件到你的擴展里面，但是怎么調(diào)用這些文件呢？一般來說，使用相對地址調(diào)用，類似HTML中調(diào)用文件。下面是個例子，在子文件夾images中有個圖片myimage.png，我們可以這樣調(diào)用它
- <img src="images/myimage.png">
復(fù)制代碼
其中images/myimage.png表示這個文件。
也許你注意到當使用Google Chrome debugger查看這些文件的時候給，每個文件的地址是下面這種格式
- chrome-extension://<extensionID>/<pathToFile>
復(fù)制代碼
這個地址中，<extensionID>是你制作的擴展的唯一標示符，也就是擴展的身份證編號。<pathToFile>是文件相對擴展頂級文件夾得位置。
manifest文件
主文件取名manifest.json，用來描述這個擴展，包括擴展名字、版本、調(diào)用的文件、可用域等信息。下面是個典型的manifest文件，這個擴展可以調(diào)用google.com的內(nèi)容。
- {
- "name": "My Extension",
- "version": "2.1",
- "description": "Gets information from Google.",
- "icons": { "128": "icon_128.png" },
- "background_page": "bg.html",
- "permissions": ["http://*.google.com/", "https://*.google.com/"],
- "browser_action": {
- "default_title": "",
- "default_icon": "icon_19.png",
- "popup": "popup.html"
- }
- }
復(fù)制代碼
| 擴展結(jié)構(gòu)組成結(jié)構(gòu) |
絕大部分擴展有background文件，一個不可見的文件控制著整個擴展的運行。
上面這個圖片顯示的瀏覽器至少安裝了兩個擴展：一個瀏覽器行為擴展(黃色的圖標),頁面行為擴展(藍色的圖標)。這個瀏覽器行為擴展的background文件是用一個HTML文件定義的(background.html)，這個background文件中有JavaScript代碼控制整個瀏覽器的活動。
HTML頁面
background不是唯一存在的HTML文件，比如瀏覽器行為可能是彈出一個小窗口，這個小窗口的內(nèi)容就可以調(diào)用一個HTML文件。Chrome擴展也能夠用chrome.tabs.create() or window.open()這種函數(shù)來顯示HTML文件。
擴展里面的HTML文件可以互相訪問對方的DOM結(jié)構(gòu)，可以引用其他文件中定義的函數(shù)。
下面的圖展示了瀏覽器彈出一個窗口這個功能的結(jié)構(gòu)(這正是我們最開始的例子)。這個彈出窗口的內(nèi)容是一個HTML的web文件，這個彈出窗口不需要包含background文件中的代碼，因為，popup.html和background是可以互相訪問的。
內(nèi)容腳本(Content scripts)
如果你插件需要和網(wǎng)頁交互，那么他就需要一個內(nèi)容腳本(Content scripts)，內(nèi)容腳本常由JavaScript編寫，會在網(wǎng)頁載入完成后調(diào)用。完全可以把內(nèi)容腳本看做是網(wǎng)頁的一部分，而不是擴展的一部分。
內(nèi)容腳本可以訪問到當前瀏覽器瀏覽的頁面，而且還可以改變網(wǎng)頁的顯示方式(油猴腳本就是內(nèi)容腳本)。下面的圖片中，內(nèi)容腳本可以讀取、更改網(wǎng)頁的DOM。注意，他不能更改background.html中的內(nèi)容。
內(nèi)容腳本也不是和父擴展完全隔離開來，他也可以和父級擴展交換信息。如下圖中所示，內(nèi)容腳本在發(fā)現(xiàn)一個RSS Feed地址后將會給background.html發(fā)送一個信息?；蛘遙ackground.html給內(nèi)容腳本發(fā)送一個信息要求改變網(wǎng)頁外觀。
不同頁面間的交互
一個擴展中的文件常常需要交互。由于擴展的所有文件都由同一個進程執(zhí)行，網(wǎng)頁能夠直接給其他頁面發(fā)送命令。
可以使用類似chrome.extension methods such as getViews() and getBackgroundPage()這樣的方法引用擴展中的方法。一旦頁面中引用了另外的頁面，第一個頁面就可以調(diào)用其他頁面的函數(shù)，甚至可以控制DOM。
|
