第三章目录
3.1 CSS简述
3.2 Browser Actions
3.3 右键菜单
3.4 桌面提醒
3.5 omnibox
3.6 Page Actions
3.1 CSS简述
这部分对于前端的人来说是基础。就不说了
3.2 Browser Action
图标设置
chrome一般会选择19像素的图片显示在工具栏，但若用户使用视网膜屏幕的计算机，chrome则会选择38像
素的图片。两种图片并非都要指定，指定一个，浏览器页会自动拉伸图片适应显示需要，但是可能会很难看。
"browser_action": {
"default_icon": {
"19": "images/icon19_0.png", //键值名19与38并不指代像素，只是作者自己为了标示
"38": "images/icon38_0.png" //chrome会自动识别像素，并予以选用
}
}
动态更改图标的方法chrome.browserAction.setIcon(details,callback)
details的类型为对象，可以包含以下三种属性，分别是imagesData，path和tabId。
imagesData说明
imagesData的值既可以是imagesData也可以是对象。
{size:imagesData}
imagesData是指图片的像素数据，可以通过HTML的canvas标签获取。
path说明
path的值既可以是字符串也可以是对象，如果是对象，结构为{size：imagePath}tabId说明
tabId的值限定了图标将在浏览哪个标签页时被更改。callback回调函数没有可接收的结果
popup页面
当用户点击扩展图标时，弹出的页面被成为popup页面。
popup页面更多的用来展示结构，而并非处理数据。因为关闭popup页面等于关闭了相应的标签页。页面不会
继续运行，等再次打开popup页面时，所有的Dom与js空间遍历都会重新创建。
如果需要实时处理数据，则需要创建一个在后端一直运行的页面或者脚本(同时记得在manifest.json的
background域来声明)
几个注意项：
给出页面尺寸
不要模仿Chrome的原生UI
使用带有滚动条的DIV容器
设计一个更好的滚动条样式
屏蔽右键菜单
使用外部引用脚本
不要在popup页面的js空间变量中保存数据
标题和badge
将鼠标移至扩展图片上，等待片刻就会显示扩展的title。
设置方式如下
"browser_action": {
"default_title": "Turtle"
},
动态设置方法
chrome.browserAction.setTitle({title: 'This is a new title'});
badge常用来显示我们未阅读的数量等等，比如邮件，微博等。
设置方式
chrome.browserAction.setBadgeBackgroundColor({color: '#0000ff'});
chrome.browserAction.setBadgeText({text: 'dog'});
注：背景颜色也可以用使用rgba。
2.3 右键菜单
首先，在manifest.json中的permissions域中声明contextMenus权限。
"permissions": [
"contextMenus"
]第二步，设置右键菜单项上显示的扩展图标
"icon": {
"16": "icon16.png"
}三种操作方法：
chrome.contextMenus.create()
chrome.contextMenus.update()
-
chrome.contextMenus.remove()
举例如下:chrome.contextMenus.create({ type: 'normal', //类型有normal,radio,checkbox,separator title: 'menu A', id: 'a', //标识每个选项 parentId: 'e', //标示父级选项 contexts: ['link'] //完整的取值还有all,page,frame,selection,link,editable, //image,video,audio,launcher。表示右键菜单显示的时机 });
update可以动态更改菜单属性，只需要指定需要更改的菜单id和所需要修改的属性即可，remove方法可以删
除指定的菜单栏选项。
3.4 桌面提醒
manifest部分
"permissions": [
"notifications"
];//manifest.json中声明
"web_accessible_resources": [
"icon48.png"
] //对于桌面窗口中显示的图片，需要先行声明
js部分
var notification = webkitNotiofications.createNotiofication(
'icon48.png',
'Notiofication Demo',
'Merry Christmas'
); //建立一个提醒
notification.show();//创建之后不会立即显示，需要调用show4种事件
ondisplay
onerror
onclose
onclick
除此之外，还可以通过notification.cancel()主动关闭提醒窗口
omnibox
什么是omnibox呢，就是chrome 的地址栏，其实这是一个多功能输入框，google称之为omnibox。Google
已经将omnibox的权限开放了。
"omnibox": { "keyword": "hamster"} //首先在manifest.json声明并指定keyword
omnibox有4种事件
chrome.omnibox.onInputStarted
chrome.omnibox.onInputChanged
chrome.omnibox.onInputEntered
chrome.omnibox.onInputCancelled
Page Actions
Page Actions 与BrowserAction非常相似，除了没有badge意外，后者拥有的方法前者都有。另一个区别
在于，前者图标并非一直显示。所有前者可以自由控制显示或者隐藏，如下。
chrome.pageAction.show(tabId);
chrome.pageAction.hide(tabId);
制作实时查询美元价格的扩展
js代码部分
function httpRequest(url, callback){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
callback(xhr.responseText);
}
}
xhr.send();
}
function updateAmount(amount, exchange){
amount = Number(amount);
if(isNaN(amount) || !amount){
exchange([{
'content': '$1 = ¥'+price,
'description': '$1 = ¥'+price
},{
'content': '¥1 = $'+(1/price).toFixed(6),
'description': '¥1 = $'+(1/price).toFixed(6)
}]);
}
else{
exchange([{
'content': '$'+amount+' = ¥'+(amount*price).toFixed(2),
'description': '$'+amount+' = ¥'+(amount*price).toFixed(2)
},{
'content': '¥'+amount+' = $'+(amount/price).toFixed(6),
'description': '¥'+amount+' = $'+(amount/price).toFixed(6)
}]);
}
}
function gotoYahoo(text, disposition){
window.open('http://finance.yahoo.com/q?s=USDCNY=X');
}
var url = 'http://query.yahooapis.com/v1/public/yql?q=select%20Rate%20from%20yahoo.finance.xchange%20where%20pair%20in%20(%22USDCNY%22)&env=store://datatables.org/alltableswithkeys&format=json';
var price;
httpRequest(url, function(r){
price = JSON.parse(r);
price = price.query.results.rate.Rate;
price = Number(price);
});
chrome.omnibox.setDefaultSuggestion({'description':'Find current USD price.'});
chrome.omnibox.onInputChanged.addListener(updateAmount);
chrome.omnibox.onInputEntered.addListener(gotoYahoo);
manifest部分
{
"manifest_version": 2,
"name": "USD Price",
"version": "1.0",
"description": "查询美元当日价格",
"background": {
"scripts": [
"js/background.js"
]
},
"icons": {
"16": "images/icon16.png"
},
"omnibox": {
"keyword": "usd"
},
"permissions": [
"*://query.yahooapis.com/*"
]
}
图片请自行选用。
扩展使用方法：载入扩展之后，在浏览器地址栏输入"usd"，然后按空格键或者Tab键就可以使用了。
