JavaScript开发Chrome浏览器扩展程序UI的教程
基本知识
1、插件文件结构
1.1、manifest.json
每一个扩展、可安装的WebApp、皮肤，都有一个JSON格式的manifest文件，里面存放重要的插件相关信息。
一个最基本的配置例子：
{
"name":"browseractiondemo",
"version":"1.0",
"permissions":[
"tabs","http://*/*","https://*/*"
],
"browser_action":{
"default_title":"开关灯",
"default_icon":"icon.png",
"default_popup":"popup.html"
},
"background":{
"page":"background.html"
},
"manifest_version":2
}
1.2、popup
插件的弹窗，上面配置中的browser_action中default_popup就是这个页面。
1.3、backgroundpage
绝大多数应用都包含一个背景页面（backgroundpage），用来执行应用的主要功能。
1.4、Contentscripts
通过contentscript可以使应用和web页面交互，contentscript是指能够在浏览器已经加载的页面内部运行的Javascript脚本。可以将contentscript看做是网页的一部分，而不是它所在的应用的一部分。
2、文件之间的交互
popup弹窗中可以直接调用背景页面中的函数。
Contentscript可以读取并修改当前web页面的dom树，但是它并不能修改它所在应用的背景页面（background）的dom树。
Contentscript与应用之间的交互：可以互相发送消息
3、为web页面注入JS（Contentscripts）文件：
方法一，在manifest.json文件中配置：
"content_scripts":[
{
"matches":["http://www.google.com/*"],
"css":["mystyles.css"],
"js":["jquery.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不能使用browseractions
1.1、manifest.json中配置
注册browseraction：
{
"name":"Myextension",
...
"browser_action":{
"default_icon":"images/icon19.png",//optional
"default_title":"GoogleMail",//optional;shownintooltip
"default_popup":"popup.html"//optional
},
...
}
1.2、配置项说明
（1）default_icon
图标19*19px
修改browser_action的manifest中default_icon字段，或者调用setIcon()方法。
chrome.browserAction.setIcon(objectdetails)
设置browseraction的图标。图标可以是一个图片的路径或者是从一个canvas元素提取的像素信息.。无论是图标路径还是canvas的imageData，这个属性必须被指定。
（2）default_title
修改browser_action的manifest中default_title字段，或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串；点击Internationalization查看详情。
chrome.browserAction.setTitle(objectdetails)
设置browseraction的标题，这个将显示在tooltip中。
（3）Badge
Browseractions可以选择性的显示一个badge—在图标上显示一些文本。Badges可以很简单的为browseraction更新一些小的扩展状态提示信息。
因为badge空间有限，所以只支持4个以下的字符。
设置badge文字和颜色可以分别使用setBadgeText()andsetBadgeBackgroundColor()。
chrome.browserAction.setBadgeText(objectdetails)
设置browseraction的badge文字，badge显示在图标上面。
setBadgeBackgroundColor chrome.browserAction.setBadgeBackgroundColor(objectdetails)
设置badge的背景颜色。
（4）default_popup
Popup气泡提示
修改browser_action的manifest中default_popup字段来指定HTML文件，或者调用setPopup()方法。
chrome.browserAction.setPopup(objectdetails)
设置一个点击browseractions时显示在popup中的HTML。
1.3、提示
为了获得最佳的显示效果,请遵循以下原则：
确认Browseractions只使用在大多数网站都有功能需求的场景下。
确认Browseractions没有使用在少数网页才有功能的场景，此场景请使用pageactions。
确认你的图标尺寸尽量占满19x19的像素空间。Browseraction的图标应该看起来比pageaction的图标更大更重。
不要尝试模仿GoogleChrome的扳手图标，在不同的themes下它们的表现可能出现问题,，并且扩展应该醒目些。
尽量使用alpha通道并且柔滑你的图标边缘，因为很多用户使用themes，你的图标应该在在各种背景下都表现不错。
不要不停的闪动你的图标，这很惹人反感。
2、右键菜单
您可以选择针对不同类型的对象（如图片，链接，页面）增加右键菜单项。
您可以根据需要添加多个右键菜单项。一个扩展里添加的多个右键菜单项会被Chrome自动组合放到对应扩展名称的二级菜单里。
右键菜单可以出现在任意文档（或文档中的框架）中，甚至是本地文件（如file://或者Chrome://）中。若想控制右键菜单在不同文档中的显示，可以在调用create()和update()时指定documentUrlPatterns。
2.1、manifest.json中配置
在清单中声明“contentMenus”权限。同时，您应该指定一个16x16的图标用作右键菜单的标识。例如：
{
"name":"Myextension",
...
"permissions":[
"contextMenus"
],
"icons":{
"16":"icon-bitty.png",
"48":"icon-small.png",
"128":"icon-large.png"
},
...
}
3、桌面通知
通知用户发生了一些重要的事情。桌面通知会显示在浏览器窗口之外。下面的图片是通知显示时的效果，在不同的平台下，通知的显示效果会有些细微区别。
直-接使用一小段JavaScript代码创建通知，当然也可以通过扩展包内的一个单独HTML页面。
3.1、manifest.json中配置
{
"name":"Myextension",
...
"permissions":[
"notifications"
],
...
}
3.2、与扩展页交互：
使用getBackgroundPage()和getViews()在通知与扩展页面中建立交互
//在通知中调用扩展页面方法...
chrome.extension.getBackgroundPage().doThing();
//从扩展页面调用通知的方法...
chrome.extension.getViews({type:"notification"}).forEach(function(win){
win.doOtherThing();
});
4、Omnibox
omnibox应用程序界面允许向GoogleChrome的地址栏注册一个关键字，地址栏也叫omnibox
必须在manifest中包含omnibox关键字段。需要指定像素为16x16的图标，以便当用户输入关键字时，在地址栏中显示。
4.1、manifest.json中配置
{
"name":"Aaron'somniboxextension",
"version":"1.0",
"omnibox":{"keyword":"aaron"},
"icons":{
"16":"16-full-color.png"
},
"background_page":"background.html"
}
Chrome自动创建灰度模式16x16像素的图标。你应该提供全色版本图标以便可以在其他场景下使用。
5、选项页
为了让用户设定你的扩展功能，你可能需要提供一个选项页。如果你提供了选项页，在扩展管理页面chrome://extensions上会提供一个链接。点击选项链接就可以打开你的选项页。
5.1、manifest.json中配置
{
"name":"Myextension",
...
"options_page":"options.html",
...
}
6、覆写特定页
使用替代页，可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。
6.1、manifest.json中配置
{
"name":"Myextension",
...
"chrome_url_overrides":{
"pageToOverride":"myPage.html"
},
...
}
7、PageActions
使用pageactions把图标放置到地址栏里。
想让扩展图标总是可见，则使用browseraction。
打包的应用程序不能使用pageactions。
7.1、manifest.json中配置
{
"name":"Myextension",
...
"page_action":{
"default_icon":"icons/foo.png",//optional
"default_title":"Doaction",//optional;shownintooltip
"default_popup":"popup.html"//optional
},
...
}
7.2、配置项说明
同browseractions一样，pageactions可以有图标、提示信息、弹出窗口。但没有badge
使用方法show()和hide()可以显示和隐藏pageaction。缺省情况下pageaction是隐藏的。当要显示时，需要指定图标所在的标签页，图标显示后会一直可见，直到该标签页关闭或开始显示不同的URL（如：用户点击了一个连接）
7.3、提示
要只对少数页面使用pageaction；
不要对大多数页面使用它，如果功能需要，使用browseractions代替。
没事别总让图标出现动画，那会让人很烦。
8、主题
主题是一种特殊的扩展,可以用来改变整个浏览器的外观。主题和标准扩展的打包方式类似,但是主题中不能包含JavaScript或者HTML代码。
8.1、manifest.json中配置
{
"version":"2.6",
"name":"camotheme",
"theme":{
"images":{
"theme_frame":"images/theme_frame_camo.png",
"theme_frame_overlay":"images/theme_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]
},
"tints":{
"buttons":[0.33,0.5,0.47]
},
"properties":{
"ntp_background_alignment":"bottom"
}
}
}