实做一个二维条码生成的Chrome插件

2012-08-17

实作一个二维条码生成的Chrome插件转载请注明出处:http://blog.csdn.net/horkychen360浏览器的团队确实做

实作一个二维条码生成的Chrome插件

转载请注明出处:http://blog.csdn.net/horkychen

360浏览器的团队确实做了一件好事，将Chorme开发文档翻译成了中文, 可以点击这里。

我简单依据这个例子，做了一个二维条码的插件，默认将当前网页地址转为二维条码。

(*使用UC浏览器可以很方便用二维条码录入。)

文件目录:

3个ICON文件: 16.png, 48.png, 128.png

1个mainfest.json -> 插件信息文件

1个pop网页文件: index.html



在开发模式下使用"载入正在开发的扩展程序"，可以很方便进行修改和调试：


网页重点:
  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>

热点排行

Web前端

实做一个二维条码生成的Chrome插件