Building QR Code Chrome Extension

This entry was posted on Sunday, October 9th, 2011 and is filed under apps, Extension, jQuery, JSON.

Google chrome is a very popular web browser developed by Google. Developers can build extensions and application for chrome.

Files Required:-manifest.json other files are optional

manifest.json

{
  "name": "APPLICATION NAME",
  "version": "APP VERSION",
  "description": "APP DESCRIPTION ",
  "browser_action": {
    "default_icon": "icon.png",
	"popup":"popup.html"
  },
  "icons": {
      "128": "128.png",
      "48": "48.png",
      "16": "16.png"
   },
  "permissions": [
	 "",
	"tabs"
  ]
 }

In the above JSON Replace Application Name, App Version, App Description with your App Name, Version and Desc. popup.html is a file which pops up whenever user clicks on your extension. You need to specify icons of 128 px, 48px and 16px.

Now we need to create a QR Code Chrome Extension, So permissions which we need are access to chrome tabs to get url of current page.

chrome.tabs.getSelected(null, function(tab) {
alert(tab.url);
alert(tab.title);
});

We make use of above script in our extension to get tab url and title.
popup.html

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">// <![CDATA[

// ]]></script><script type="text/javascript">// <![CDATA[
var switchTo5x=false;
// ]]></script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script><script type="text/javascript">// <![CDATA[
stLight.options({publisher:'8e221a05-2d73-415e-8606-eab04c80bfba'});
// ]]></script><script type="text/javascript" language="javascript">// <![CDATA[
var url;var title;var share='';
function regen()
{
url=document.getElementById('urls').value;
var encodin=$('input:radio[name=encode]:checked').val();
QRC='<img src="http://chart.googleapis.com/chart?cht=qr&#038;chs=150x150&#038;chl='+url+'&#038;choe='+encodin+'"/>';
document.getElementById('QR').innerHTML=QRC;
document.getElementById('urls').value=url;
}

    $(document).ready(function() {
      chrome.tabs.getSelected(null, function(tab) {
		share=tab.url;
		var sh="<span  class='st_twitter_hcount' displayText='Tweet' st_url='"+share+"'></span><span  class='st_facebook_hcount' displayText='Facebook' st_url='"+share+"'></span><span  class='st_fblike_hcount' st_url='"+share+"'></span></span>";
		 url=escape(tab.url);
		 title=tab.title;
        var QRC='<img src="http://chart.googleapis.com/chart?cht=qr&#038;chs=150x150&#038;chl='+url+'"/>';
		document.getElementById('QR').innerHTML=QRC;
		document.getElementById('sharing').innerHTML=sh;
		document.getElementById('urls').value=tab.url;
		document.getElementById('tit').innerHTML=title;
      });
    });

// ]]></script>
Customize

URL
UTF-8 Shift JIS ISO-8859-1
Regenerate

Created by Raghavendra Nayak M

I have used Google Info graphics for generating QR Code in this extension.
Building Chrome Extension
Step 1:- Go to chrome://extensions
Step 2:- If Developer Mode has +, click +
Step 3:-Click on load Unpacked Extension and select folder where you chrome extension files
Once you finish your application click on Pack Extension and upload it chrome web store

You Might Also Like

Filed Under: apps, Extension, jQuery, JSON