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

最新推荐文章于 2021-12-20 19:59:08 发布

Horky

最新推荐文章于 2021-12-20 19:59:08 发布

阅读量3.2k

点赞数

分类专栏： JavaScript 文章标签： chrome插件 generator permissions button function url

本文链接：https://blog.csdn.net/HorkyChen/article/details/7747714

版权

JavaScript 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

转载请注明出处: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"
}

二维条码使用TEC-IT条码生成器生成。默认使用Chrome的Content Scripts获取当前网页地址生成条码，也可以在编辑框中输入。效果如下:

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

网页重点:

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>

Horky

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实作一个二维条码生成的Chrome插件

转载请注明出处:http://blog.csdn.net/horkychen360浏览器的团队确实做了一件好事，将Chorme开发文档翻译成了中文, 可以点击这里。我简单依据这个例子，做了一个二维条码的插件，默认将当前网页地址转为二维条码。 (*使用UC浏览器可以很方便用二维条码录入。)文件目录: 3个ICON文件: 16.png, 48.png, 128.png
复制链接

扫一扫

专栏目录