資源描述：
《javascript開(kāi)發(fā)chrome瀏覽器擴(kuò)展程序ui的教程_javascript技巧》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。
1、JavaScript開(kāi)發(fā)Chrome瀏覽器擴(kuò)展程序UI的教程基本知識(shí)1、插件文件結(jié)構(gòu)1.1、manifest?json每一個(gè)擴(kuò)展、可安裝的WebApp、皮膚，都有一個(gè)JSOX格式的manifest文件,里面存放重耍的插件相關(guān)信息。一個(gè)最基本的配置例子：〃〃〃[▲?1〃name:browseractiondemo,version:l.O,permissions:L氣3bs〃，〃http：//*/*〃，"https：//*/*〃],^browseraction^:{"defaulttitle":〃開(kāi)關(guān)燈〃，detault_icon:icon.png,z/dc
2、fault_popup，z:"popup,html"},~，zbackground/z：{"page":^background.html，z},，zmanifcst_vcrsiorT:2}_l.2、popup插件的彈窗,上面配置中的browser_action中default_popup就是這個(gè)頁(yè)面。1.3、backgroundpage絕大多數(shù)應(yīng)用都包含一個(gè)背景頁(yè)面(backgroundpage),用來(lái)執(zhí)行應(yīng)用的主要功能。1.4、Contentscripts通iicontentscript可以使應(yīng)用和web頁(yè)面交互,contentscript是指能夠在瀏
3、覽器已經(jīng)加載的頁(yè)面內(nèi)部運(yùn)彳亍的Javascript腳本?？贘以將contentscript看做是網(wǎng)頁(yè)的一部分，而不是它所在的應(yīng)用的一部分。2、文件之間的交互popup彈窗中可以直接調(diào)用背景頁(yè)面中的函數(shù)。Contentscript可以讀取并修改當(dāng)前web頁(yè)而的dom樹(shù)，但是它并不能修改它所在應(yīng)用的背景頁(yè)面(background)的doin樹(shù)。Contentscript與應(yīng)用之間的交互：可以互相發(fā)送消息3、為web頁(yè)面注入JS(Contentscripts)文件：方法一,在manifest,json文件中配置：/zcontent_scripts，z:［{""
4、matches":［〃http://www.google.〃css〃：［〃mystyles.css〃］,〃?〃「〃??〃〃..〃二js:Ljqucry.js,myscript.js」}］,方法二通過(guò)executeScript():向頁(yè)面注入JavaScript腳本執(zhí)行。chrome,tabs.executeScript(integertabid,objectdetails,functioncallback)chrome,tabs.executeScript(tabid,{file:〃func?js〃，allFrames:true});UI外觀1>brow
5、seraction:在chrome主工具條的地址欄右側(cè)增加一個(gè)圖標(biāo)。注意：Packagedapps不能使用browseractions1.1、manifest,json中配置注冊(cè)browseraction：z，namez，:"Myextension〃，???''browseraction'":{zzdefault_icon，z：/zimages/iconl9.png/z,//optional/zdefault_titlez/："GoogleMail",//optional;shownintooltip/zdefault_popup〃："popup.htm
6、l〃//optional},"1.2.配置項(xiàng)說(shuō)明(1)default_icon圖標(biāo)19*19px修改browscr_action的manifest中dcfault_icon字段，或者調(diào)用seticon()方法。chrome.browserAction.setlcon(objectdetails)設(shè)置browseraction的圖標(biāo)。圖標(biāo)可以是一個(gè)圖片的路徑或者是從一個(gè)canvas元索提取的像索信息?。無(wú)論是圖標(biāo)路徑還是canvas的imageData,這個(gè)屬性必須被指定。(2)defaulttitle修改browser_action的manifest中d
7、efault_title字段，或者調(diào)用setTitle()方法。你可以為dcfault_titlc字段指定木地化的字符串；點(diǎn)擊Internationalization查看詳情。chrome.browserAction.setTitle(objectdetails)設(shè)置browseraction的標(biāo)題，這個(gè)將顯示在tooltip中。(3)BadgeBrowseractions可以選擇性的顯示一個(gè)badge—在圖標(biāo)上顯示一些文本。Badges可以很簡(jiǎn)單的為browseraction更新一些小的擴(kuò)展?fàn)顟B(tài)捉示信息。因?yàn)閎adge空間有限，所以只支持4個(gè)以下的字符
8、。設(shè)置badge文字和顏色可以分別使用setBadgeText()andsetB
