Hi guyss its time to do some more action. Lets build a calculator extension with HTML JQuery and CSS.Creating chrome extension is no different thing from creating the app but there will be a slight change in manifest file and there is no need to include background.js file.
Step1: Create manifest file
Step1: Create manifest file
{
"manifest_version": 2,
"name": "Calculator",
"description": "This is a Basic Calculator Extension",
"version": "1.0",
"browser_action": {
"default_icon": "calculator.png",
"default_popup": "callayout.html"
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}
browser_action tells chrome to perform some task when the user clicks it.default_icon is your apps icon.default_popup says about the popup screen to be launched when the user clicks th extension.
The last json object says about the security policy of our app.Early Chrome app doesnt allow eval() in the code due to some security reasons.But later on some changes have been made to relax the eval() and some other functions.In order to relax the eval() we have to mention the policy as above.[We use eval() in our app]
Step2: Create Html file
<html>
<head>
<script src="jq.js"></script>
<script src="cal.js"></script>
<style>
table{border-style:solid;border-color:black;border-radius:4pt;border-width:2pt}
td{text-align:center;border:none}
button{background-color:#09F;border-style:none;color:white;height:25pt;width:25pt;font-size:14pt;cursor:pointer;border-radius:3pt}
#bres,#bclr{background-color:#09F;border-style:none;color:white;height:25pt;width:60pt;font-size:14pt;cursor:pointer}
input{height:20pt;width:130pt;font-size:14pt;border-style:solid;border-width:1pt;text-align:right}
div{font-size:14pt}
</style>
</head>
<body>
<table align="center" border="1" cellspacing="5">
<tr><td align="center" colspan="4"><div>
Basic Calculator</div>
</td></tr>
<tr><td align="center" colspan="4"><input id="res" readonly="readonly" type="text" /></td></tr>
<tr><td align="center" colspan="4"><div>
</div>
</td></tr>
<tr>
<td><button id="b1">1</button></td>
<td><button id="b2">2</button></td>
<td><button id="b3">3</button></td>
<td><button id="bs">+</button></td>
</tr>
<tr>
<td><button id="b4">4</button></td>
<td><button id="b5">5</button></td>
<td><button id="b6">6</button></td>
<td><button id="bd">-</button></td>
</tr>
<tr>
<td><button id="b7">7</button></td>
<td><button id="b8">8</button></td>
<td><button id="b9">9</button></td>
<td><button id="bm">*</button></td>
</tr>
<tr>
<td><button id="bl">(</button></td>
<td><button id="b0">0</button></td>
<td><button id="br">)</button></td>
<td><button id="bdiv">/</button></td>
</tr>
<tr>
<td colspan="2"><button id="bres">Result</button></td>
<td colspan="2"><button id="bclr">Clear</button></td>
</tr>
</table>
</body>
</html>
In the above code we have included the external js files(one is jquery library) and used internal style sheet.
Step3: Create a javascript file.
$(document).ready(function(){
$("#b1").click(function(){
$("#res").val($("#res").val()+"1");
});
$("#b2").click(function(){
$("#res").val($("#res").val()+"2");
});
$("#b3").click(function(){
$("#res").val($("#res").val()+"3");
});
$("#b4").click(function(){
$("#res").val($("#res").val()+"4");
});
$("#b5").click(function(){
$("#res").val($("#res").val()+"5");
});
$("#b6").click(function(){
$("#res").val($("#res").val()+"6");
});
$("#b7").click(function(){
$("#res").val($("#res").val()+"7");
});
$("#b8").click(function(){
$("#res").val($("#res").val()+"8");
});
$("#b9").click(function(){
$("#res").val($("#res").val()+"9");
});
$("#b0").click(function(){
$("#res").val($("#res").val()+"0");
});
$("#bl").click(function(){
$("#res").val($("#res").val()+"(");
});
$("#br").click(function(){
$("#res").val($("#res").val()+")");
});
$("#bs").click(function(){
$("#res").val($("#res").val()+"+");
});
$("#bd").click(function(){
$("#res").val($("#res").val()+"-");
});
$("#bm").click(function(){
$("#res").val($("#res").val()+"*");
});
$("#bdiv").click(function(){
$("#res").val($("#res").val()+"/");
});
$("#bclr").click(function(){
$("#res").val("");
});
$("#bres").click(function(){
$("#res").val((eval($("#res").val())));
});
});
We have used some jquery functions in our script go through jquery tutorials in w3schools it will be handy.
Finally now load our extension into the browser in the same way as you have done to load the app previously. This time our extension will appear on the top right corner of the browser. Click on it to launch the extension.
