來(lái)源How to Create a Chrome Theme from Your Favorite Wallpaper 網(wǎng)上有很多精美的Chrome主題,可以用來(lái)打扮你的Chrome瀏覽器,看了這么多,是不是有點(diǎn)沖動(dòng),想搞一個(gè)屬于自己的主題呢;把自己家人的照片、把自己喜歡的顏色設(shè)置進(jìn)去,肯定很有成就感,好吧,開(kāi)始動(dòng)手吧; 制作Chrome主題無(wú)需任何編程知識(shí),不需要html語(yǔ)法,不需要javascript程序等等,它僅僅是一個(gè)擴(kuò)展,很符合Google的風(fēng)格;Chrome主題包括兩部分內(nèi)容:幾張圖片和一個(gè)manifest文件; 然后把這些東東打包成crx格式的文件(crx格式其實(shí)和zip格式一樣也是一個(gè)壓縮文件包而已,只是這個(gè)格式是Google Chrome使用的);讓我們看看以前貼耳網(wǎng)發(fā)布的Chrome奧迪A6主題中的圖片: 未處理前: 處理后: 你會(huì)發(fā)現(xiàn)背景圖有做一些修改;做修改的目的是為了讓圖標(biāo)能夠更清楚的顯示; 好了,現(xiàn)在你得準(zhǔn)備一下東東:
準(zhǔn)備好這些,就開(kāi)始動(dòng)工了; 第一步:創(chuàng)建一個(gè)主題的目錄創(chuàng)建一個(gè)主題的單獨(dú)的目錄,比如叫:我的主題;以后在這個(gè)目錄下創(chuàng)建一個(gè)圖形文件夾,比如叫:images; 第二步:創(chuàng)建圖形一個(gè)Chrome主題要4個(gè)圖形元素和1個(gè)可選的圖形來(lái)完成,這些圖形必須為PNG格式的,如果不是這個(gè)格式,你需要進(jìn)行格式轉(zhuǎn)換(比如你可以在這個(gè)在線(xiàn)轉(zhuǎn)換網(wǎng)站進(jìn)行格式轉(zhuǎn)換,或者使用圖形處理工具進(jìn)行格式轉(zhuǎn)換);
當(dāng)你準(zhǔn)備好這些圖,并且拷貝到你的圖形目錄下之后,就可以按照底下的步驟一步一步做吧; 圖像制作的一些提示信息:
第三步:創(chuàng)建manifest文件每一個(gè)Chrome主題、可安裝的WEB應(yīng)用以及Chrome擴(kuò)展,都需要一個(gè)JSON的manifest文件,文件名叫manifest.json,這個(gè)文件包含了給瀏覽器的所有信息(JSON僅僅是一種數(shù)據(jù)格式);它包含4個(gè)元素:圖形(images)、顏色(colors)、色彩(tints)和屬性(properties);這里大頭提供一個(gè)實(shí)例,可以很好的應(yīng)用的實(shí)例,也可以從Google下載實(shí)例,下載地址在這里; { "version": "1.0", "name": "My Theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.png", "theme_tab_background" : "images/tab.png", "theme_ntp_attribution" : "images/theme_ntp_attribution.png" }, "colors" : { "ntp_link": [255,255,255], "ntp_text": [255,255,255], "ntp_section_link": [255,255,255], "ntp_section_text": [10 , 17 , 27], "ntp_background": [10 , 17 , 27], "frame": [10 , 17 , 27], "toolbar": [10 , 17 , 27], "tab_text": [255,255,255], "tab_background_text": [10 , 17 , 27], "bookmark_text": [255,255,255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } } 好了,文件內(nèi)容就如上述,現(xiàn)在解釋一下:
現(xiàn)在你的manifest文件也準(zhǔn)備好了,保存到你的主題目錄下;如下圖所示,你還可以從Google下載一個(gè)藍(lán)色的主題包,以后在這個(gè)主題包上進(jìn)行修改,這樣就簡(jiǎn)單多了; 第四步:打包并預(yù)覽你的主題經(jīng)過(guò)上面三步,文件和圖形都準(zhǔn)備好了,現(xiàn)在可以進(jìn)行打包和預(yù)覽了;打開(kāi)Google Chrome,進(jìn)入擴(kuò)展程序;或者你直接在地址欄里面輸入“chrome://extensions/”,也可以打開(kāi)擴(kuò)展程序; 點(diǎn)擊右邊的開(kāi)發(fā)人員模式,以后點(diǎn)擊上面出現(xiàn)的按鈕“載入正在開(kāi)發(fā)的擴(kuò)展程序...”;以后將你剛才制作的主題目錄加載進(jìn)來(lái); 如果一切順利的話(huà),你制作的主題就會(huì)在Chrome上加載啦;看看效果吧,是不是所有都很完美; 故障:如果出現(xiàn)提示說(shuō)加載失敗,你得檢查一下你的manifest文件格式是否正確,并且文件名是否叫manifest.json;你可以使用JSON驗(yàn)證器來(lái)驗(yàn)證格式;錯(cuò)誤的提示也會(huì)明確提示是哪一行出錯(cuò),你會(huì)很容易發(fā)現(xiàn)并修改錯(cuò)誤的; 好了,如果你感覺(jué)主題很滿(mǎn)意,你就可以點(diǎn)擊“打包擴(kuò)展程序...”按鈕,打包你的主題啦,打包好的文件會(huì)放到你的主題目錄下; 如果你制作了幾個(gè)Chrome主題之后,就會(huì)發(fā)現(xiàn)制作這個(gè)其實(shí)非常簡(jiǎn)單;Chrome可以允許你做很多的自定義的設(shè)置,上述manifest文件的內(nèi)容只介紹了很小一部分的內(nèi)容,如果你想知道更多有關(guān)manifest的內(nèi)容,你可以參閱Chromium theme creation guide。 上面的步驟看起來(lái)很復(fù)雜,其實(shí)很簡(jiǎn)單的,你只要按照步驟,使用那些模板,直接一步一步操作,就可以制作一個(gè)屬于自己的Chrome主題了。 |
|
來(lái)自: 海右觀(guān)瀾 > 《W-我愛(ài)GOOGLE》