将Chrome Extension加到快捷菜单中
转载请注明出处:http://blog.csdn.net/horkychen
接着上一篇Chrome插件的实作。
Step 1. 修改manifest.json,
a. 增加权限"contextMenus"和"notifications"
contextMenus -> 表示插件要操作快捷菜单
notifications -> 表示插件将弹出消息通知 （处理菜单的click事件）
"permissions": ["contextMenus","tabs", "notifications"],
b. 增加backgroup page, 用于在加载时就创建快捷菜单。
"background_page":"background.html",
Step 2. 新建background.html,添加如下内容:
<html>
<head>
<title></title>
</head>
<body>
<script>
function showNotification()
{
webkitNotifications.createHTMLNotification("notification.html").show();
}
chrome.contextMenus.create( {
"type" :"normal",
"title": "2D BarCode Generator",
"contexts":["all"],
"onclick":function(){showNotification();}
} );
</script>
</body>
</html>
整个页只做一件事，添加菜单项。其中的onclick所指定的函数，会将新的条码又HTML Notification窗口显示出来。notification.html就是显示的网页。
Step 3.新建notification.html，内容如下：
<html>
<head>
<title>2D Bar Code</title>
</head>
<body>
<img id="barcode_img"src ="http://barcode.tec-it.com/barcode.ashx?code=QRCode&modulewidth=4&unit=px&data=http%3A%2F%2Fblog.csdn.net/horkychen&dpi=120&imagetype=png&rotation=0&color=&bgcolor=&fontcolor=&quiet=0&qunit=mm&eclevel="alt="by TEC-IT"/>
<script type="text/javascript>
chrome. tabs.getSelected(null,function(tab) {
changeBarCode( tab.url);
}
) ;
function changeBarCode (url)
{
var text = url;
if ( 0 == text.length )
{
text = "http://blog.csdn.net/horkychen";
}
var newPicUrl = "http://barcode.tec-it.com/barcode.ashx?code=QRCode&modulewidth=6&unit=px&data="+text+"&dpi=120&imagetype=png&rotation=0&color=&bgcolor=&fontcolor=&quiet=0&qunit=mm&eclevel=";
document.getElementById("barcode_img").src=newPicUrl;
}
</script>
</body>
</html>
这个和index.html相似，差别仅在于changeBarCode直接接受URL,而没有提供文本框。
效果如下：
下面是弹出的消息框：
Step 4.重构，变更条码的代码有重复，我们需要提取公共函数来减少这种重复。所以新一个common.js文件:
指定changeBarCode接受两个参数，第一个表示新的URL地址，第二个是更新到哪个元件上。
function changeBarCode(url,strID)
{
var text = url;
if ( 0 == text.length )
{
text = "http://blog.csdn.net/horkychen";
}
var newPicUrl = "http://barcode.tec-it.com/barcode.ashx?code=QRCode&modulewidth=4&unit=px&data="+text+"&dpi=95&imagetype=png&rotation=0&color=&bgcolor=&fontcolor=&quiet=0&qunit=mm&eclevel=";
document.getElementById(strID).src=newPicUrl;
}
对应修改notification.html的呼叫位置:
<script type="text/javascript">
chrome.tabs.getSelected(null,function(tab) {
refreshBarCode(tab.url);
}
);
function refreshBarCode(url)
{
changeBarCode(url,"barcode_img");
}
</script>
还有index.html中对应呼叫的位置:
<script type="text/javascript">
var tablink;
chrome.tabs.getSelected(null,function(tab) {
tablink = tab.url;
document.getElementById("url").value = tablink;
document.getElementById("url").focus();
refreshBarCode();
}
);
function refreshBarCode()
{
var text = document.getElementById("url").value;
changeBarCode(text,"barcode_img");
}
</script>
新的代码包可以在这里下载。