实作一个二维条码生成的Chrome插件
转载请注明出处:http://blog.csdn.net/horkychen
360浏览器的团队确实做了一件好事，将Chorme开发文档翻译成了中文, 可以点击这里。
我简单依据这个例子，做了一个二维条码的插件，默认将当前网页地址转为二维条码。
(*使用UC浏览器可以很方便用二维条码录入。)
文件目录:
3个ICON文件: 16.png, 48.png, 128.png
1个mainfest.json -> 插件信息文件
1个pop网页文件: index.html
{
"name": "2D BarCode",
"version": "1.0",
"description": "BarCode Generator。",
"icons":{"16":"16.png","48":"48.png","128":"128.png"},
"browser_action": {
"default_icon": "16.png",
"default_title": "Bar Code Generator",
"popup": "index.html"
},
"permissions": ["tabs"] ,
"homepage_url":"http://blog.csdn.net/horkychen"
}
在开发模式下使用"载入正在开发的扩展程序"，可以很方便进行修改和调试：
网页重点:
1. 默认时通过chrome.tabs.getSelected获取当前网页地址，并生成初始条码。
2. 在Button指定onClick事件，然后依据文本框内容生成条码。
完整包在这里
为了方便懒得去下整包的朋友，下面把大图和HTML放在这里:
128.png
48.png
16.png
index.html内容:
<html>
<title>2D barcode generator</title>
<body>
<div>
<input type="text" id="url">
<input type="button" value="Generate >>>" onClick="changeBarCode()">
<br />
</div>
<table>
<tr>
<td>
<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"/>
</td>
</tr>
</table>
<script type="text/javascript">
var tablink;
chrome.tabs.getSelected(null,function(tab) {
tablink = tab.url;
document.getElementById("url").value = tablink;
document.getElementById("url").focus();
changeBarCode();
}
);
function changeBarCode()
{
var text = document.getElementById("url").value;
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>