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

╰+攻爆jí腚メ 2022-06-08 22:54 197阅读 0赞

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

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

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

(\*使用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获取当前网页地址生成条码，也可以在编辑框中输入。效果如下:

![1342277572_3757.PNG][]

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

![1342277664_5249.PNG][]

网页重点:

1. 默认时通过chrome.tabs.getSelected获取当前网页地址，并生成初始条码。

2. 在Button指定onClick事件，然后依据文本框内容生成条码。

完整包在[这里][Link 3]

为了方便懒得去下整包的朋友，下面把大图和HTML放在这里:

![1342278042_5747.png][] 128.png

![1342278054_6670.png][] 48.png

![1342278067_4766.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>

[Link 1]: http://open.chrome.360.cn/html/dev_doc.html
[Link 2]: http://open.chrome.360.cn/html/dev_ex.html
[1342277572_3757.PNG]: https://img-my.csdn.net/uploads/201207/14/1342277572_3757.PNG
[1342277664_5249.PNG]: https://img-my.csdn.net/uploads/201207/14/1342277664_5249.PNG
[Link 3]: http://download.csdn.net/detail/horkychen/4429286
[1342278042_5747.png]: https://img-my.csdn.net/uploads/201207/14/1342278042_5747.png
[1342278054_6670.png]: https://img-my.csdn.net/uploads/201207/14/1342278054_6670.png
[1342278067_4766.png]: https://img-my.csdn.net/uploads/201207/14/1342278067_4766.png