【正文】 Chrome擴展開發(fā) 入門這是制作chrome擴展插件的入門指南，不需要任何編程基礎(chǔ)，看完這個后，我們就著手做自己的Chrome插件了。好吧，我們現(xiàn)在就開始，其實我也是個新手。準備工具做任何事情都要有個工具，制作chrome插件需要的工具很少。 記事本，用來編寫代碼 Chrome瀏覽器，這個不能少吧。Windows下，所有版本的Chrome都可以制作插件。Linux下需要下載Beta版本，Mac下載dev版本。開始制作第一個插件 在計算機中創(chuàng)建一個目錄來存放插件代碼。 ()，用記事本打開，寫入如下代碼1 {1 name: 第一個Chrome插件,1 version: ,1 description: 我的第一個Chrome插件，還不錯吧,1 browser_action: {1 default_icon: 1 }1 }復(fù)制代碼 把下面兩張圖片保存到文件夾中，圖片一： 圖片二： 安裝這個插件:，選擇擴展程序，打開擴展中心。“開發(fā)人員模式”，使得前面的“+”變成“”，打開相應(yīng)的菜單。如果一開始就是“”，那么不用點擊。“載入正在開發(fā)的擴展程序按鈕”，導(dǎo)入剛才創(chuàng)建的文件夾。如果一切順利，你的Chrome地址欄將會有個新圖標，你的第一個插件誕生了。給第一個插件增加新功能你現(xiàn)在雖然做了第一個插件，但實際上他并沒有實現(xiàn)任何功能，我們點擊圖標，沒有任何反應(yīng)。下面我們就給他增加點功能。 ，用下面的代碼替換現(xiàn)有的代碼，其實我們只是加了一行代碼和一個逗號而已。1 {1 name: 第一個Chrome插件,1 version: ,1 description: 我的第一個Chrome插件，還不錯吧,1 browser_action: {1 default_icon: ,1 popup: 1 }1 }復(fù)制代碼 ，用記事本打開，將下面的代碼寫進去1 pHello,Chrome!/p1 p我的名字叫ChromeChina!/p1 pa href= target=_blankChrome中文論壇歡迎你/a1 pimg src= //p復(fù)制代碼 回到Chrome的擴展中心，點擊插件下的“重新載入 ”?，F(xiàn)在點擊插件圖標看看。我們的第一個插件算是制作成功了。打包插件我們想把自己制作的插件給其他人用，那么就需要將插件打包。 回到Chrome的插件擴展中心，點擊“打包擴展程序”按鈕。 選擇剛才創(chuàng)建的文件夾，點擊確定生成后綴為crx和cpm文件各一個。把crx文件發(fā)送給自己的朋友，告訴他們你也會制作chrome插件吧。你可以修改里面的文字圖片，制作出極具個性的擴展來了。現(xiàn)在讓我們來看看大家都做出了什么樣的擴展，把你的第一個擴展上傳上來讓大家看看吧！這個是我的：Chrome擴展開發(fā)指南(2)——概述這篇文章翻譯自，我還沒有真正做過插件，翻譯這篇文章算是班門弄斧，有翻譯的不好的地方請一定指出來，希望能夠達到完美！( 對新手說的話：文章涉及到的一些術(shù)語，對沒有任何網(wǎng)頁知識的新手來說還是挺難懂的，可以借助Google/baidu看一下，其實不懂也沒多大關(guān)系，這篇文章只是一個概述，完全可以跳過這些術(shù)語，希望大家對制作插件不要失去信心。)只要看完這篇文章，并且做過入門指南中的例子，你就可以真正開始開發(fā)屬于自己的Chrome插件了?；A(chǔ)知識一個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)容可以從Developer39。s Guide看到。Chrome擴展的組成文件每個擴展由下列文件組成： 一個manifest文件(主文件,json格式) 至少一個HTML文件(主題可以沒有HTML文件) JavaScript文件 (可選，非必須) 任何其他你需要的文件(比如圖片)當你開發(fā)一個擴展的時候，需要把這些文件放在一個文件夾里，當你發(fā)布這個擴展的時候。引用文件你可以放置任何文件到你的擴展里面，但是怎么調(diào)用這些文件呢？一般來說，使用相對地址調(diào)用，類似HTML中調(diào)用文件。下面是個例子，我們可以這樣調(diào)用它1 img src=images/復(fù)制代碼其中images/。也許你注意到當使用Google Chrome debugger查看這些文件的時候給，每個文件的地址是下面這種格式2 chromeextension://extensionID/pathToFile復(fù)制代碼這個地址中，extensionID是你制作的擴展的唯一標示符，也就是擴展的身份證編號。pathToFile是文件相對擴展頂級文件夾得位置。manifest文件，用來描述這個擴展，包括擴展名字、版本、調(diào)用的文件、可用域等信息。下面是個典型的manifest文件。3 {4 name: My Extension,5 version: ,6 description: Gets information from Google.,7 icons: { 128: },8 background_page: ,9 permissions: [://*., ://*.],10 browser_action: {11 default_title: ,12 default_icon: ,13 popup: 14 }15 }復(fù)制代碼擴展結(jié)構(gòu)組成結(jié)構(gòu)絕大部分擴展有background文件，一個不可見的文件控制著整個擴展的運行。上面這個圖片顯示的瀏覽器至少安裝了兩個