1、Chrome擴(kuò)展開發(fā)指南（1）入門這是制作chrome擴(kuò)展插件的入門指南，不需要任何編程基礎(chǔ)，看完這個(gè)后，我們就著手做自己的Chrome插件了。好吧，我們現(xiàn)在就開始，其實(shí)我也是個(gè)新手。準(zhǔn)備工具做任何事情都要有個(gè)工具，制作chrome插件需要的工具很少。 記事本，用來編寫代碼 Chrome瀏覽器，這個(gè)不能少吧。Windows下，所有版本的Chrome都可以制作插件。Linux下需要下載Beta版本，Mac下載dev版本。開始制作第一個(gè)插件 在計(jì)算機(jī)中創(chuàng)建一個(gè)目錄來存放插件代碼。 在目錄里面創(chuàng)建文件manifest.json（注意后綴名是.json）,用記事本打開，寫入如下代碼1name:第一個(gè)C

2、hrome插件,Iversion:1.0,1description:我的第一個(gè)Chrome插件，還不錯(cuò)吧,Ibrowser_action:1default_icon:icon.gif11復(fù)制代碼把下面兩張圖片保存到文件夾中，分別取名icon.gif和smile.gif圖片一：圖片二：安裝這個(gè)插件:a.點(diǎn)擊右上角扳手，選擇擴(kuò)展程序，打開擴(kuò)展中心。b.點(diǎn)擊右上角的開發(fā)人員模式”，使得前面的+“變成-”，打開相應(yīng)的菜單。如果一開始就是那么不用點(diǎn)擊。c.點(diǎn)擊載入正在開發(fā)的擴(kuò)展程序按鈕”，導(dǎo)入剛才創(chuàng)建的文件夾。如果一切順利，你的Chrome地址欄將會(huì)有個(gè)新圖標(biāo)，你的第一個(gè)插件誕生了給第一個(gè)插件增加新功能

3、你現(xiàn)在雖然做了第一個(gè)插件，但實(shí)際上他并沒有實(shí)現(xiàn)任何功能，我們點(diǎn)擊圖標(biāo)，沒有任何反應(yīng)。F面我們就給他增加點(diǎn)功能。編輯manifest.json這個(gè)文件，用下面的代碼替換現(xiàn)有的代碼，其實(shí)我們只是加了一行代碼和一個(gè)逗號(hào)而已。I(1 name:第一個(gè)Chrome插件,1version:1.0,1description:我的第一個(gè)Chrome插件，還不錯(cuò)吧,：browser_action:1default_icon:icon.gif,Ipopup:popup.html11復(fù)制代碼下面我們創(chuàng)建一個(gè)文本文件popup.html,用記事本打開，將下面的代碼寫進(jìn)去Hello,Chrome!1 我的名字叫Chro

4、meChina!1Chrome中文論壇歡迎你|復(fù)制代碼回到Chrome的擴(kuò)展中心，點(diǎn)擊插件下的重新載入現(xiàn)在點(diǎn)擊插件圖標(biāo)看看。我們的第一個(gè)插件算是制作成功了。打包插件我們想把自己制作的插件給其他人用，那么就需要將插件打包。回到Chrome的插件擴(kuò)展中心，點(diǎn)擊打包擴(kuò)展程序”按鈕。選擇剛才創(chuàng)建的文件夾，點(diǎn)擊確定生成后綴為crx和cpm文件各一個(gè)。把crx文件發(fā)送給自己的朋友，告訴他們你也會(huì)制作chrome插件吧。你可以修改里面的文字圖片，制作出極具個(gè)性的擴(kuò)展來了。現(xiàn)在讓我們來看看大家都做出了什么樣的擴(kuò)展，把你的第一個(gè)擴(kuò)展上傳上來讓大家看看吧！這個(gè)是我的：Chrome擴(kuò)展開發(fā)指南（2）概述這篇文章翻譯

5、自真正做過插件，翻譯這篇文章算是班門弄斧，有翻譯的不好的地方請(qǐng)一定指出來，希望能夠達(dá)到完美！（對(duì)新手說的話：文章涉及到的一些術(shù)語(yǔ)，對(duì)沒有任何網(wǎng)頁(yè)知識(shí)的新手來說還是挺難懂的，可以借助Google/baidu看一下，其實(shí)不懂也沒多大關(guān)系，這篇文章只是一個(gè)概述，完全可以跳過這些術(shù)語(yǔ)，希望大家對(duì)制作插件不要失去信心。）只要看完這篇文章，并且做過入門指南中的例子，你就可以真正開始開發(fā)屬于自己的Chrome插件了。基礎(chǔ)知識(shí)一個(gè)Chrome擴(kuò)展是由HTML、CSS、JavaScript、圖片等文件壓縮而成。擴(kuò)展實(shí)際上就是一個(gè)web頁(yè)面，你可以用任何瀏覽器提供給web頁(yè)面的接口，從XMLHttpRequest

6、到JSON,再到HTML本地緩存都可以使用。Chrome擴(kuò)展能做什么呢？我們肯定使用過一些擴(kuò)展，會(huì)發(fā)現(xiàn)有些擴(kuò)展在Chrome地址欄右側(cè)區(qū)域增加一個(gè)圖標(biāo)。還有些擴(kuò)展能夠和瀏覽器的一些元素（如書簽、tab導(dǎo)航標(biāo)簽）交互。擴(kuò)展還可以和web頁(yè)面交互，甚至是從web服務(wù)器獲取數(shù)據(jù)。更加詳細(xì)的內(nèi)容可以從DevelopersGuide看到。Chrome擴(kuò)展的組成文件每個(gè)擴(kuò)展由下列文件組成： 一個(gè)manifest文件（主文件,json格式） 至少一個(gè)HTML文件（主題可以沒有HTML文件） JavaScript文件（可選，非必須）任何其他你需要的文件（比如圖片）當(dāng)你開發(fā)一個(gè)擴(kuò)展的時(shí)候，需要把這些文件放在一個(gè)

7、文件夾里，當(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)用它：復(fù)制代碼其中images/myimage.png表示這個(gè)文件。也許你注意到當(dāng)使用GoogleChromedebugger查看這些文件的時(shí)候給，每個(gè)文件的地址是下面這種格式二chrome-extension:/復(fù)制代碼這個(gè)地址中，是你制作的擴(kuò)展的唯一標(biāo)示符，也就是擴(kuò)展的身份證編號(hào)。是文件相對(duì)擴(kuò)

8、展頂級(jí)文件夾得位置。manifest文件主文件取名manifest.json,用來描述這個(gè)擴(kuò)展，包括擴(kuò)展名字、版本、調(diào)用的文件、可用域等信息。下面是個(gè)典型的manifest文件，這個(gè)擴(kuò)展可以調(diào)用的內(nèi)容4name:MyExtension,:version:2.1,6description:GetsinformationfromGoogle.,icons:128:icon_128.png,Sbackground_page:bg.html,permissions:http:*,11browser_action:11default_title:,12default_icon:icon_19.png,1

9、、；popup:popup.html|4D復(fù)制代碼擴(kuò)展結(jié)構(gòu)組成結(jié)構(gòu)絕大部分?jǐn)U展有background文件，一個(gè)不可見的文件控制著整個(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ò)展也能夠用c

10、hrome.tabs.create()orwindow.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)椋琾opup.html和background是可以互相訪問的。內(nèi)容腳本(Contentscripts)如果你插件需要和網(wǎng)頁(yè)交互，那么他就需要一個(gè)內(nèi)容腳本(Contentscripts),內(nèi)容腳本常由JavaScript編寫，會(huì)在網(wǎng)頁(yè)載入完成后

11、調(diào)用。完全可以把內(nèi)容腳本看做是網(wǎng)頁(yè)的一部分，而不是擴(kuò)展的一部分。內(nèi)容腳本可以訪問到當(dāng)前瀏覽器瀏覽的頁(yè)面，而且還可以改變網(wǎng)頁(yè)的顯示方式(油猴腳本就是內(nèi)容腳本)。下面的圖片中，內(nèi)容腳本可以讀取、更改網(wǎng)頁(yè)的DOM。注意，他不能更改background.html中的內(nèi)容。內(nèi)容腳本也不是和父擴(kuò)展完全隔離開來，他也可以和父級(jí)擴(kuò)展交換信息。如下圖中所示，內(nèi)容腳本在發(fā)現(xiàn)一個(gè)RSSFeed地址后將會(huì)給background.html發(fā)送一個(gè)信息。或者background.html給內(nèi)容腳本發(fā)送一個(gè)信息要求改變網(wǎng)頁(yè)外觀。不同頁(yè)面間的交互一個(gè)擴(kuò)展中的文件常常需要交互。由于擴(kuò)展的所有文件都由同一個(gè)進(jìn)程執(zhí)行，網(wǎng)頁(yè)能夠直接

12、給其他頁(yè)面發(fā)送命令。可以使用類似chrome.extensionmethodssuchasgetViews()andgetBackgroundPage()這樣的方法引用擴(kuò)展中的方法。一旦頁(yè)面中引用了另外的頁(yè)面，第一個(gè)頁(yè)面就可以調(diào)用其他頁(yè)面的函數(shù)，甚至可以控制DOMo結(jié)束語(yǔ)好了，你已經(jīng)大概了解了一個(gè)擴(kuò)展程序的基本內(nèi)容，可以開始寫作自己的擴(kuò)展了本文由ChromeChina翻譯，轉(zhuǎn)載注明出處Chrome擴(kuò)展開發(fā)指南（3）BrowserAction（T展圖標(biāo)）這是擴(kuò)展開發(fā)指南的第三篇，前面我們首先作了第一個(gè)擴(kuò)展，然后學(xué)習(xí)了Chrome擴(kuò)展的大概結(jié)構(gòu)，看完后可能會(huì)有些迷惑，別擔(dān)心，相信隨著我們學(xué)習(xí)的深入

13、，我們漸漸發(fā)現(xiàn)我們已經(jīng)可以做擴(kuò)展了。當(dāng)然為了做出優(yōu)秀的擴(kuò)展，我們還需要學(xué)習(xí)一些HTML、CSS、JavaScript的基礎(chǔ)知識(shí)，今天的文章翻譯自介紹BrowserAction,即右側(cè)的擴(kuò)展圖標(biāo)。這節(jié)的內(nèi)容還是挺有趣的。（同樣，有翻譯需要改進(jìn)的地方請(qǐng)指出來）BrowserActions的作用就是控制Chrome地址欄右側(cè)添加一個(gè)圖標(biāo)。除了給chrome增加一個(gè)圖標(biāo)的功能外，還可以設(shè)置提示文字、圖標(biāo)標(biāo)記、彈出窗口。下圖中，在地址欄右側(cè)的彩色圖標(biāo)就是一個(gè)BrowserAction。BrowserActions創(chuàng)建的圖標(biāo)是一直可見的，如果你想創(chuàng)建一個(gè)不是一直不可見的圖標(biāo)，可以使用pageactionB

14、rowserAction在Manifest文件中的位置下面是個(gè)在擴(kuò)展的manifest文件中注冊(cè)browseraction的例子:name:Myextension,3 .4 browser_action:default_icon:images/icon19.png,/required6 default_title:GoogleMail,/optional;shownintooltipdefault_popup:popup.html/optional、),I，)復(fù)制代碼UI部分BrowserAction必須有一個(gè)圖標(biāo)。同時(shí)還可以有提示文字、圖標(biāo)標(biāo)記、彈窗。圖標(biāo)BrowserAction的圖標(biāo)會(huì)被

15、瀏覽器縮放成19px*19Px大小，太大的圖標(biāo)是沒有意義的。你可以用兩種方法定義圖標(biāo)：用一個(gè)靜態(tài)圖片，或者用HTML中的canvas元素。用靜態(tài)圖片的話簡(jiǎn)單些，但是用canvas元素可以創(chuàng)建更加平滑的圖片。靜態(tài)圖片可以是任意常見格式的圖片，包括BMP,GIF,ICO,JPEG,orPNG。我們可以在manifest文件中用default_icon語(yǔ)句來定義這個(gè)圖標(biāo)，也可以調(diào)用setIcon()函數(shù)。提示文字提示文字是指將鼠標(biāo)移到擴(kuò)展圖標(biāo)上顯示的文字。我們可以在manifest中用default_title定義，也可以通過調(diào)用setTitle()函數(shù)。圖標(biāo)標(biāo)記圖標(biāo)標(biāo)記是指覆蓋在擴(kuò)展圖標(biāo)上的一些文

16、字，比如Gmail提醒圖標(biāo)上未讀郵件數(shù)，PR查詢工具上PR值。由于標(biāo)記的位置很小，他最多只能容納4個(gè)字母。設(shè)置標(biāo)記文字或者背景可以分別使用setBadgeText()andsetBadgeBackgroundC010ro。彈窗當(dāng)我們點(diǎn)擊一些擴(kuò)展的時(shí)候，會(huì)發(fā)現(xiàn)有個(gè)小彈窗出現(xiàn)，比如我們一開始的例子中。這個(gè)彈窗可以包含彳J何HTML內(nèi)容，他的大小也是和內(nèi)容自適應(yīng)的。給BrowserAction增加彈窗可以在manifest的default_popup定義彈窗中顯示的html文件名字，當(dāng)然也可以使用setPopup()函數(shù)。幾個(gè)小提醒為了擴(kuò)展更加美觀，請(qǐng)遵守下列守則：僅在這個(gè)擴(kuò)展需要在大部分頁(yè)面運(yùn)行的

17、時(shí)候才使用browseraction僅在小部分頁(yè)面起作用的話就不要用browseraction,而是用pageactions。使用顯眼的圖標(biāo)不要試圖模仿chrome瀏覽器原有的扳手/頁(yè)面圖標(biāo)，你的擴(kuò)展要獨(dú)特一些。你的圖標(biāo)邊緣應(yīng)該使用alpha透明，這樣的話可以融合到各種不同的瀏覽器主題里。輸入：11121314151617IS19例子解析激動(dòng)人心的時(shí)候來了，在這個(gè)文件夾下examples/api/browserAction有些browseraction的例子。其中有個(gè)set_page_color,我們?cè)囍匦戮帉懰Ｊ紫任覀冎溃紫刃陆ㄒ粋€(gè)文件夾myExtension用來存放所有文件，我們知

18、道每個(gè)Chrome擴(kuò)展需要有個(gè)manifest.json文件來描述這個(gè)擴(kuò)展，新建文件manifest.json,用文本編輯器打開,name:我的擴(kuò)展實(shí)例，version:1.0,browser_action:default_title:Setthispagescolor.,default_icon:icon.png,popup:popup.html復(fù)制代碼這是一個(gè)很簡(jiǎn)單的manifest.json文件模板，其中browser_action就是這篇文章降到的東西,default_title是描述，default_icon是圖標(biāo)，popup是彈窗。這里的彈窗調(diào)用了popup.html文件，我們?cè)賱?chuàng)

19、建一個(gè)文件popup.html,popup.html是個(gè)普通的HTML文件，內(nèi)容如下:2)212223X252527國(guó)為30313233%3536373839bodyoverflow:hidden;margin:0px;padding:0px;background:white;div:first-childmargin-top:0px;divcursor:pointer;text-align:center;padding:1px3px;font-family:sans-serif;font-size:0.8em;width:100px;margin-top:1px;41電電期與與47%5051

20、525354555657的幻的61background:#cccccc;)div:hoverbackground:#aaaaaa;)#redborder:1pxsolidred;color:red;)#blueborder:1pxsolidblue;color:blue;)#greenborder:1pxsolidgreen;color:green;)#yellowborder:1pxsolidyellow;color:yellow;)6；:functionclick(color)6chrome.tabs.executeScript(null,(=code:document.body.styl

21、e.backgroundColor=+color.id+);毆、window.close();飛丁redblue.Igreen二yellow復(fù)制代碼這個(gè)文件的內(nèi)容有三種語(yǔ)言，HTML、CSS、JavaScript,這三種語(yǔ)言組成一個(gè)基本的網(wǎng)頁(yè)，如果你還不是很清楚的話可以以后慢慢學(xué)些。其中調(diào)用了Chrome接口函數(shù)chrome.tabs.executeScript,也是以后會(huì)看到的。整個(gè)文件的意思是：1、顯示四格不同顏色的矩形框，2、當(dāng)點(diǎn)擊這些矩形框的時(shí)候變換頁(yè)面背景色。我們還需要一個(gè)圖標(biāo)顯示在工具欄上，把這個(gè)圖片保存到文件夾中。好了，我們的擴(kuò)展制作完成了，載入他們測(cè)試一下吧！如果有一些Java

22、Script知識(shí)，可以修改這些擴(kuò)展，創(chuàng)建一些豐富多彩的效果。比如把popup.html中的5functionclick(color)-4chrome.tabs.executeScript(null,code:document.body.style.backgroundColor=+color.id+);window.close();飛red-bluegreenyellow復(fù)制代碼換成functionclick(color):rchrome.tabs.executeScript(null,工,code:document.getElementById(lg).getElementsByTagNam

23、e(img)0.src=+color.title+);式Iwindow.close();只S；Google.丁，blue9.1 green士yellow復(fù)制代碼在百度主頁(yè)上打開這個(gè)擴(kuò)展，點(diǎn)擊第一個(gè)按鈕Google,可以把百度的logo換成google的Chrome擴(kuò)展開發(fā)指南OptionsPages(選項(xiàng)頁(yè)面)你可以提供一個(gè)選項(xiàng)頁(yè)面(OptionsPages)讓用戶自定義你的擴(kuò)展。如果設(shè)置了選項(xiàng)頁(yè)面，那么擴(kuò)展管理頁(yè)chrome:/extensions將會(huì)有一個(gè)鏈接指向選項(xiàng)頁(yè)面。定義選項(xiàng)頁(yè)面包括兩步：1、在manifest中定義選項(xiàng)頁(yè)1:name:Myextension,options_page

24、:options.html,復(fù)制代碼上例中，options_page代表選項(xiàng)頁(yè)面，options.html是具體的文件地址2、編寫選項(xiàng)頁(yè)面選項(xiàng)頁(yè)面是一個(gè)典型的網(wǎng)頁(yè)，下面是一個(gè)選項(xiàng)頁(yè)面的例子：MyTestExtensionOptions10,1.1/SavesoptionstolocalStorage.12functionsave_options()1314151617IS192)21yy上工23X252527國(guó)為30313233單varselect=document.getElementById(color);varcolor=select.childrenselect.selectedInd

25、ex.value;localStoragefavorite_color=color;/Updatestatustoletuserknowoptionsweresaved.varstatus=document.getElementById(status);status.innerHTML=OptionsSaved.;setTimeout(function()status.innerHTML=;,750);/RestoresselectboxstatetosavedvaluefromlocalStorage.functionrestore_options()varfavorite=localSto

26、ragefavorite_color;if(!favorite)return;varselect=document.getElementById(color);for(vari=0;iselect.children.length;i+)varchild=select.childreni;if(child.value=favorite)child.selected=true;：6break;3)”)三)0LI也43期FavoriteColor:-aS用red看green49blueyellow-15254Save：!,R復(fù)制代碼注意事項(xiàng)早期版本的chrome可能不支持這個(gè)功能。我們正計(jì)劃提供一個(gè)

27、默認(rèn)的css來使得不同擴(kuò)展的選項(xiàng)頁(yè)面保持風(fēng)格一致，你可以從這里(）查看最新的進(jìn)展。知識(shí)補(bǔ)充上面的例子中使用LOCALSTORAGE保存數(shù)據(jù)，具體介紹可以查看使用LOCALSTORAGE保存數(shù)據(jù)Chrome擴(kuò)展開發(fā)指南（5）OverridePages（置頁(yè)面）重置是一種用自己提供的頁(yè)面替換GoogleChrome默認(rèn)頁(yè)面的方法。一個(gè)重置頁(yè)面常常是用HTML、JavaScript、CSS組成。當(dāng)前，能夠替換的頁(yè)面只有新標(biāo)新標(biāo)簽頁(yè)，新標(biāo)簽頁(yè)就是我們打開一個(gè)新標(biāo)簽時(shí)出現(xiàn)的頁(yè)面。我們可以把默認(rèn)的新標(biāo)簽頁(yè)：*C-AGof3Icchromo第通廿安0a4|i0”替換成這種樣式:重置頁(yè)面非常簡(jiǎn)單，只需在Man

28、ifest中定義自己的頁(yè)面地址。比如下面的例子中，我們使用了newtab.html來重定義新標(biāo)簽頁(yè)。I（二name:Myextension,S.4chrome_url_overrides:大newtab:newtab.html,. 復(fù)制代碼幾點(diǎn)注意事項(xiàng)為了讓你定義的新標(biāo)簽頁(yè)看起來不錯(cuò)，請(qǐng)遵循下面幾點(diǎn)建議： 保持頁(yè)面簡(jiǎn)潔，使得能夠快速加載由于新標(biāo)簽頁(yè)經(jīng)常出現(xiàn)，外觀就顯得特別重要。比如我們要避免從遠(yuǎn)程調(diào)用數(shù)據(jù)，或者讀取數(shù)據(jù)庫(kù)資源。 確保有標(biāo)簽如果沒有,大家講會(huì)看到頁(yè)面的URL,這會(huì)讓人很迷惑，我們應(yīng)該包含這樣一句NewTabsName 不要讓鍵盤焦點(diǎn)在頁(yè)面上我們應(yīng)該讓用戶新建標(biāo)簽頁(yè)的時(shí)候鍵盤焦點(diǎn)在

29、地址欄上。 不要模仿默認(rèn)的新標(biāo)簽頁(yè)面創(chuàng)建默認(rèn)標(biāo)簽頁(yè)的API（比如最近關(guān)閉的標(biāo)簽、最常訪問的網(wǎng)站等等）不存在！你必須做出一些完全不同的東西。例子這兒examples/api/override有一些重置新標(biāo)簽頁(yè)的例子。其中有個(gè)我們至學(xué)習(xí)以來碰到的最簡(jiǎn)單的例子，把新標(biāo)簽頁(yè)面換成空白頁(yè)面新建manifest.json文件：（10 name:空白的新標(biāo)簽頁(yè),|,|version:0.1,12 chrome_url_overrides:Inewtab:blank.html14 復(fù)制代碼新建文件blank.html作為默認(rèn)標(biāo)簽頁(yè)，我們可以只寫這樣一句話：16新標(biāo)簽頁(yè)復(fù)制代碼好的，看看效果吧，就這么簡(jiǎn)單，你現(xiàn)

30、在就可以動(dòng)手DIY了。原文由ChromeChina翻譯，轉(zhuǎn)載注明出處Chrome擴(kuò)展開發(fā)指南（6）PageActions也址欄圖標(biāo)）地址欄圖標(biāo)代表的是頁(yè)面內(nèi)功能，這種功能只能在特地的當(dāng)前頁(yè)面發(fā)生，而不是所有頁(yè)面都有這種功能，也就是并不是所有頁(yè)面上都能顯示這樣一個(gè)圖標(biāo)。比如以下功能只在特定頁(yè)面才有：RSS訂閱圖標(biāo)（僅在有rss訂閱功能的網(wǎng)頁(yè)中才顯示）幻燈片顯示照片（僅在特定的照片分享網(wǎng)頁(yè)中有這種功能）F面是個(gè)顯示RSS訂閱圖標(biāo)的圖:GoogleChromeBlogcfirome,如果你希望能夠一直顯示這個(gè)圖標(biāo)，可以使用擴(kuò)展圖標(biāo)。Manifest定義地址欄圖標(biāo)使用類似下面的manifest文件:】

31、（:name:Myextension,3 .4 page_action:5 default_icon:icons/foo.png,/required6 default_title:Doaction,/optional;shownintooltipdefault_popup:popup.html/optional只,.：。復(fù)制代碼其中page_action代表地址欄圖標(biāo)相關(guān)參數(shù)，也就是頁(yè)面功能的參數(shù)。圖標(biāo)部分類似于擴(kuò)展圖標(biāo)，地址欄圖標(biāo)需要一個(gè)圖片，同時(shí)也可以有提示和彈出窗口。但是他們不能帶有徽標(biāo)，但是地址欄圖標(biāo)能夠顯示/隱藏。有關(guān)提示和彈出窗口的更多謝謝可以查看擴(kuò)展圖標(biāo)。我們可以用show()和

32、hide()函數(shù)分別使地址欄圖標(biāo)顯示和隱藏。默認(rèn)情況下，地址欄圖標(biāo)是隱藏的。當(dāng)你要顯示這個(gè)圖標(biāo)的時(shí)候，你必須指定哪一個(gè)tab頁(yè)面可以顯示，這時(shí)候只有關(guān)閉了標(biāo)簽頁(yè)或者打開了一個(gè)不一樣的網(wǎng)頁(yè)地址地址欄圖標(biāo)才會(huì)不顯示幾點(diǎn)注意請(qǐng)遵守以下幾點(diǎn)約定： 在一部分頁(yè)面中起作用的功能才使用地址欄圖標(biāo) 大部分頁(yè)面起作用的功能請(qǐng)使用擴(kuò)展圖標(biāo)。 請(qǐng)使用比擴(kuò)展圖標(biāo)更小的圖標(biāo)，一般來說地址欄圖標(biāo)都小于19px,并且邊緣會(huì)有模糊效果 不要總是激活你的圖標(biāo)，那是很討厭的。實(shí)例你可以在examples/api/pageAction文件夾下找到一些例子。原文由ChromeChina翻譯，轉(zhuǎn)載注明出處Chrome擴(kuò)展開發(fā)指南（7）

33、Themes住題制作）在Chrome中，主題當(dāng)做一個(gè)特殊的插件處理。主題要像普通文件一樣打包，但是主題中不包含HTML或者JavaScript代碼。你可以在主題庫(kù)里找到一些主題下載。下面只是簡(jiǎn)單介紹下主題制作，詳細(xì)的內(nèi)容可以參考主題是在Manifest文件中定義的。下面是個(gè)定義主題的典型例子：:二version:2.6,5name:camotheme,4theme:images:67S91011121314151617IS192)217123X公%27theme_frame:images/theme_frame_camo.png,theme_frame_overlay:images/theme

34、_frame_stripe.png,theme_toolbar:images/theme_toolbar_camo.png,theme_ntp_background:images/theme_ntp_background_norepeat.png,theme_ntp_attribution:images/attribution.png,colors:frame:71,105,91,toolbar:207,221,192,ntp_text:20,40,0,ntp_link:36,70,0,ntp_section:207,221,192,button_background:255,255,255,

35、tints:buttons:0.33,0.5,0.47,properties:ntp_background_alignment:bottom復(fù)制代碼我們看到在theme類下有幾個(gè)元素，分為為images、colors、tints、properties。下面分別介紹他們。colors用來定義基本顏色。顏色需要用RGB格式表示，你可以在browser_theme_provider.cc查看到底可以定義哪些內(nèi)容。images圖片需要用相對(duì)地址引用，你設(shè)置browser_theme_provider.cc文件中kThemeableImages數(shù)組的所有元素。去掉IDR_并且轉(zhuǎn)化成小寫格式后就是你需要設(shè)

36、置的東西,比如IDR_THEME_NTP_BACKGROUND需要轉(zhuǎn)化為theme_ntp_perties這個(gè)地方用來定義諸如背景定位方式、背景重復(fù)等屬性。browser_theme_provider.cc里面可以看到有哪些屬性可以定義。tints你可以Z部分UI著色，比如按鈕、框架、背景tab標(biāo)簽。（這里翻譯可能有問題，chromechina由ChromeChina翻原文譯，轉(zhuǎn)載注明出處Chrome擴(kuò)展開發(fā)指南（8）Bookmarks（書簽操作）我們可以用chrome.bookmarks模塊來對(duì)書簽做創(chuàng)建、組織等操作。Manifest要對(duì)書簽進(jìn)行操作，必須要再M(fèi)anifest文件中設(shè)置允許調(diào)用書簽接口（bookmarksAPI）般像下面這樣寫