资源描述：
《javascript开发chrome浏览器扩展程序ui的教程_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、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/dc
2、fault_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是指能够在浏
3、览器已经加载的页面内部运彳亍的Javascript脚本。口J以将contentscript看做是网页的一部分，而不是它所在的应用的一部分。2、文件之间的交互popup弹窗中可以直接调用背景页面中的函数。Contentscript可以读取并修改当前web页而的dom树，但是它并不能修改它所在应用的背景页面(background)的doin树。Contentscript与应用之间的交互：可以互相发送消息3、为web页面注入JS(Contentscripts)文件：方法一,在manifest,json文件中配置：/zcontent_scripts，z:［{""
4、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>brow
5、seraction:在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.htm
6、l〃//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中d
7、efault_title字段，或者调用setTitle()方法。你可以为dcfault_titlc字段指定木地化的字符串；点击Internationalization查看详情。chrome.browserAction.setTitle(objectdetails)设置browseraction的标题，这个将显示在tooltip中。(3)BadgeBrowseractions可以选择性的显示一个badge—在图标上显示一些文本。Badges可以很简单的为browseraction更新一些小的扩展状态捉示信息。因为badge空间有限，所以只支持4个以下的字符
8、。设置badge文字和颜色可以分别使用setBadgeText()andsetB
