JavaScript开发Chrome浏览器扩展程序UI的教程基本知识1、插件文件结构1.1、manifest・json每一个扩展、可安装的WebApp、皮肤，都有一个JSOX格式的manifest文件,里面存放重耍的插件相关信息。一个最基本的配置例子：〃〃〃[▲・1〃name:browseractiondemo,version:l.O,permissions:L气3bs〃，〃http：//*/*〃，"https：//*/*〃],^browseraction^:{"defaulttitle":〃开关灯〃，detault_icon:icon.png,z/dcfault_popup，z:"popup,html"},~，zbackground/z：{"page":^background.html，z},，zmanifcst_vcrsiorT:2}_l.2、popup插件的弹窗,上面配置中的browser_action中default_popup就是这个页面。1.3、backgroundpage绝大多数应用都包含一个背景页面(backgroundpage),用來执行应用的主要功能。1.4、Contentscripts通iicontentscript可以使应用和web页面交互,contentscript是指能够在浏览器已经加载的页面内部运彳亍的Javascript脚本。口J以将contentscript看做是网页的一部分，而不是它所在的应用的一部分。2、文件之间的交互popup弹窗中可以直接调用背景页面中的函数。Contentscript可以读取并修改当前web页而的dom树，但是它并不能修改它所在应用的背景页面(background)的doin树。Contentscript与应用之间的交互：可以互相发送消息3、为web页面注入JS(Contentscripts)文件：方法一,在manifest,json文件中配置：/zcontent_scripts，z:［{""matches":［〃http://www.google.〃css〃：［〃mystyles.css〃］,〃•〃「〃••〃〃..〃二js:Ljqucry.js,myscript.js」}］,方法二通过executeScript():向页面注入JavaScript脚本执行。chrome,tabs.executeScript(integertabid,objectdetails,functioncallback)chrome,tabs.executeScript(tabid,{file:〃func・js〃，allFrames:true});UI外观1>browseraction:在chrome主工具条的地址栏右侧增加一个图标。注意：Packagedapps不能使用browseractions1.1、manifest,json中配置注册browseraction：z，namez，:"Myextension〃，•••''browseraction'":{zzdefault_icon，z：/zimages/iconl9.png/z,//optional/zdefault_titlez/："GoogleMail",//optional;shownintooltip/zdefault_popup〃："popup.html〃//optional},"1.2.配置项说明(1)default_icon图标19*19px修改browscr_action的manifest中dcfault_icon字段，或者调用seticon()方法。chrome.browserAction.setlcon(objectdetails)设置browseraction的图标。图标可以是一个图片的路径或者是从一个canvas元索提取的像索信息・。无论是图标路径还是canvas的imageData,这个属性必须被指定。(2)defaulttitle修改browser_action的manifest中default_title字段，或者调用setTitle()方法。你可以为dcfault_titlc字段指定木地化的字符串；点击Internationalization查看详情。chrome.browserAction.setTitle(objectdetails)设置browseraction的标题，这个将显示在tooltip中。(3)BadgeBrowseractions可以选择性的显示一个badge—在图标上显示一些文本。Badges可以很简单的为browseraction更新一些小的扩展状态捉示信息。因为badge空间有限，所以只支持4个以下的字符。设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。chromc.browserAction.setBadgeText(objectdetails)设置browseraction的badge文字，badge显示在图标上而。setBadgeBackgrotindColorchromc.browserAction・sctBadgeBackgroundColor(objectdetails)设置badge的背景颜色。(4)defauIt_popupPopup气泡提示修改browseraction的manifest中default_popup字段來指定HTML文件，或者调用setPopupO方法。chrome・browserAction.setPopup(objectdetails)设置一个点击browseractions时显示在popup中的HTML。1.3、提示为了获得最佳的显示效果，请遵循以卜•原则：确认Browseractions只使用在大多数网诂都冇功能需求的场景下。确认Browseractions没有使用在少数网页才有功能的场景，此场景请使用pageactions。确认你的图标尺寸尽量占满19x19的像索空间。Browseraction的图标应该看起來比pageaction的图标更大更重。不要尝试模...