I'm new to Google Chrome extension development. I have very basic knowledge of html and javaScript.
I have created folder name "Extension". in which there are 4 files as below.
1.manifest.json
{
"manifest_version": 2,
"name": "lenght Unit converter",
"description": "This extension will convert the lenght from one unit to other ",
"version": "1.0",
"browser_action": {
"default_icon": "Refresh.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
2.popup.html
<!doctype html>
<html>
<head>
<title>Length Unit Converter</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Lenght Unit Converter</h1>
<input type="text" name="inputText" id="inputValue" required onfocus="clearTextBox()">
<select id="list1" onchange="getSelectValue1()">
<option value="km">Kilometre</option>
<option value="m">Metre</option>
<option value="cm">Centimetre</option>
<option value="mm">Millimetre</option>
<option value="mc">Micrometre</option>
<option value="nm">Nanometre</option>
<option value="ml">Mile</option>
<option value="yd">Yard</option>
<option value="ft">Foot</option>
<option value="ic">Inch</option>
<option value="ntm">Nautical mile</option>
</select>
<br>
<input id="display" type="text" name="display" readonly>
<select id="list2" onchange="getSelectValue2()">
<option value="km">Kilometre</option>
<option value="m">Metre</option>
<option value="cm">Centimetre</option>
<option value="mm">Millimetre</option>
<option value="mc">Micrometre</option>
<option value="nm">Nanometre</option>
<option value="ml">Mile</option>
<option value="yd">Yard</option>
<option value="ft">Foot</option>
<option value="ic">Inch</option>
<option value="ntm">Nautical mile</option>
</select>
</br>
<br><input type="button" value="convert" onclick="setValueToTextBox()"></br>
</body>
</html>
3.popup.js
In popup.js file i have written my logic for functions which are present inside the html file.
- Refresh.png
Refresh.png is 28x28 size of png format image.
Whenever i open my popup.html file with firefox it works fine. Screenshot is given below. enter image description here
**Rather You Can Run my code from below here
var input1;
var input2;
var inputValue;
function clearTextBox() {
document.getElementById("display").value="";
}
function getInputValue(){
inputValue=document.getElementById("inputValue").value.toString();
}
function getSelectValue1() {
input1=document.getElementById("list1").value.toString();
}
function getSelectValue2() {
input2= document.getElementById("list2").value.toString();
document.getElementById("display").value="";
}
function setValueToTextBox()
{
document.getElementById("display").value=answer().toString();
}
function answer() {
getSelectValue1();
getSelectValue2();
getInputValue();
if (input1 == "km") {
switch (input2) {
case "km":
return parseInt(inputValue) * 1;
break;
case "m":
return parseInt(inputValue) * 1000;
break;
case "cm":
return parseInt(inputValue) * 100000;
break;
case "mm":
return parseInt(inputValue) * 1000000;
break;
case "mc":
return parseInt(inputValue) * 1000000000;
break;
case "nm":
return parseInt(inputValue) * 1000000000000;
break;
case "ml":
return parseInt(inputValue) * 0.621371;
break;
case "yd":
return parseInt(inputValue) * 1093.61;
break;
case "ft":
return parseInt(inputValue) * 3280.84;
break;
case "ic":
return parseInt(inputValue) * 39370.1;
break;
case "ntm":
return parseInt(inputValue) * 0.539957;
break;
}
}
if (input1 == "m") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.001;
break;
case "m":
return parseInt(inputValue) * 1;
break;
case "cm":
return parseInt(inputValue) * 100;
break;
case "mm":
return parseInt(inputValue) * 1000;
break;
case "mc":
return parseInt(inputValue) * 1000000;
break;
case "nm":
return parseInt(inputValue) * 1000000000;
break;
case "ml":
return parseInt(inputValue) * 0.000621371;
break;
case "yd":
return parseInt(inputValue) * 1.09361;
break;
case "ft":
return parseInt(inputValue) * 3.28084;
break;
case "ic":
return parseInt(inputValue) * 39.3701;
break;
case "ntm":
return parseInt(inputValue) * 0.000539957;
break;
}
}
if (input1 == "cm") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.00001;
break;
case "m":
return parseInt(inputValue) * 0.01;
break;
case "cm":
return parseInt(inputValue) * 1;
break;
case "mm":
return parseInt(inputValue) * 10;
break;
case "mc":
return parseInt(inputValue) * 10000;
break;
case "nm":
return parseInt(inputValue) * 10000000;
break;
case "ml":
return parseInt(inputValue) * 0.0000062137;
break;
case "yd":
return parseInt(inputValue) * 0.0109361;
break;
case "ft":
return parseInt(inputValue) * 0.0328084;
break;
case "ic":
return parseInt(inputValue) * 0.393701;
break;
case "ntm":
return parseInt(inputValue) * 0.0000053996;
break;
}
}
if (input1 == "mm") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.000001;
break;
case "m":
return parseInt(inputValue) * 0.001;
break;
case "cm":
return parseInt(inputValue) * 0.1;
break;
case "mm":
return parseInt(inputValue) * 1;
break;
case "mc":
return parseInt(inputValue) * 1000;
break;
case "nm":
return parseInt(inputValue) * 1000000;
break;
case "ml":
return parseInt(inputValue) * 0.00000062137;
break;
case "yd":
return parseInt(inputValue) * 0.00109361;
break;
case "ft":
return parseInt(inputValue) * 0.00328084;
break;
case "ic":
return parseInt(inputValue) * 0.0393701;
break;
case "ntm":
return parseInt(inputValue) * 0.00000053996;
break;
}
}
if (input1 == "mc") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.000000001;
break;
case "m":
return parseInt(inputValue) * 0.000001;
break;
case "cm":
return parseInt(inputValue) * 0.0001;
break;
case "mm":
return parseInt(inputValue) * 0.001;
break;
case "mc":
return parseInt(inputValue) * 1;
break;
case "nm":
return parseInt(inputValue) * 1000;
break;
case "ml":
return parseInt(inputValue) * 0.00000000062137;
break;
case "yd":
return parseInt(inputValue) * 0.0000010936;
break;
case "ft":
return parseInt(inputValue) * 0.0000032808;
break;
case "ic":
return parseInt(inputValue) * 0.00003937;
break;
case "ntm":
return parseInt(inputValue) * 0.00000000053996;
break;
}
}
if (input1 == "nm") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.000000000001;
break;
case "m":
return parseInt(inputValue) * 0.000000001;
break;
case "cm":
return parseInt(inputValue) * 0.0000001;
break;
case "mm":
return parseInt(inputValue) * 0.000001;
break;
case "mc":
return parseInt(inputValue) * 0.001;
break;
case "nm":
return parseInt(inputValue) * 1;
break;
case "ml":
return parseInt(inputValue) * 0.00000000000062137;
break;
case "yd":
return parseInt(inputValue) * 0.0000000010936;
break;
case "ft":
return parseInt(inputValue) * 0.0000000032808;
break;
case "ic":
return parseInt(inputValue) * 0.00000003937;
break;
case "ntm":
return parseInt(inputValue) * 0.00000000000053996;
break;
}
}
if (input1 == "ml") {
switch (input2) {
case "km":
return parseInt(inputValue) * 1.60934;
break;
case "m":
return parseInt(inputValue) * 1609.34;
break;
case "cm":
return parseInt(inputValue) * 160934;
break;
case "mm":
return parseInt(inputValue) * 1609000;
break;
case "mc":
return parseInt(inputValue) * 1609000000;
break;
case "nm":
return parseInt(inputValue) * 1609000000000;
break;
case "ml":
return parseInt(inputValue) * 1;
break;
case "yd":
return parseInt(inputValue) * 1760;
break;
case "ft":
return parseInt(inputValue) * 5280;
break;
case "ic":
return parseInt(inputValue) * 63360;
break;
case "ntm":
return parseInt(inputValue) * 0.868976;
break;
}
}
if (input1 == "yd") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.0009144;
break;
case "m":
return parseInt(inputValue) * 0.9144;
break;
case "cm":
return parseInt(inputValue) * 91.44;
break;
case "mm":
return parseInt(inputValue) * 914.4;
break;
case "mc":
return parseInt(inputValue) * 914400;
break;
case "nm":
return parseInt(inputValue) * 914400000;
break;
case "ml":
return parseInt(inputValue) * 0.000568182;
break;
case "yd":
return parseInt(inputValue) * 1;
break;
case "ft":
return parseInt(inputValue) * 3;
break;
case "ic":
return parseInt(inputValue) * 36;
break;
case "ntm":
return parseInt(inputValue) * 0.000493737;
break;
}
}
if (input1 == "ft") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.0003048;
break;
case "m":
return parseInt(inputValue) * 0.3048;
break;
case "cm":
return parseInt(inputValue) * 30.48;
break;
case "mm":
return parseInt(inputValue) * 304.8;
break;
case "mc":
return parseInt(inputValue) * 304800;
break;
case "nm":
return parseInt(inputValue) * 304800000;
break;
case "ml":
return parseInt(inputValue) * 0.000189394;
break;
case "yd":
return parseInt(inputValue) * 0.333333;
break;
case "ft":
return parseInt(inputValue) * 1;
break;
case "ic":
return parseInt(inputValue) * 12;
break;
case "ntm":
return parseInt(inputValue) * 0.000164579;
break;
}
}
if (input1 == "ic") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.0000254;
break;
case "m":
return parseInt(inputValue) * 0.0254;
break;
case "cm":
return parseInt(inputValue) * 2.54;
break;
case "mm":
return parseInt(inputValue) * 25.4;
break;
case "mc":
return parseInt(inputValue) * 25400;
break;
case "nm":
return parseInt(inputValue) * 25400000;
break;
case "ml":
return parseInt(inputValue) * 0.000015783;
break;
case "yd":
return parseInt(inputValue) * 0.0277778;
break;
case "ft":
return parseInt(inputValue) * 0.0833333;
break;
case "ic":
return parseInt(inputValue) * 1;
break;
case "ntm":
return parseInt(inputValue) * 0.000013715;
break;
}
}
if (input1 == "ic") {
switch (input2) {
case "km":
return parseInt(inputValue) * 0.0000254;
break;
case "m":
return parseInt(inputValue) * 0.0254;
break;
case "cm":
return parseInt(inputValue) * 2.54;
break;
case "mm":
return parseInt(inputValue) * 25.4;
break;
case "mc":
return parseInt(inputValue) * 25400;
break;
case "nm":
return parseInt(inputValue) * 25400000;
break;
case "ml":
return parseInt(inputValue) * 0.000015783;
break;
case "yd":
return parseInt(inputValue) * 0.0277778;
break;
case "ft":
return parseInt(inputValue) * 0.0833333;
break;
case "ic":
return parseInt(inputValue) * 1;
break;
case "ntm":
return parseInt(inputValue) * 0.000013715;
break;
}
}
if (input1 == "ntm") {
switch (input2) {
case "km":
return parseInt(inputValue) * 1.852;
break;
case "m":
return parseInt(inputValue) * 1852;
break;
case "cm":
return parseInt(inputValue) * 185200;
break;
case "mm":
return parseInt(inputValue) * 1852000;
break;
case "mc":
return parseInt(inputValue) * 1852000000;
break;
case "nm":
return parseInt(inputValue) * 1852000000000;
break;
case "ml":
return parseInt(inputValue) * 1.15078;
break;
case "yd":
return parseInt(inputValue) * 2025.37;
break;
case "ft":
return parseInt(inputValue) * 6076.12;
break;
case "ic":
return parseInt(inputValue) * 72913.4;
break;
case "ntm":
return parseInt(inputValue) * 1;
break;
}
}
}<!doctype html>
<html>
<head>
<title>Length Unit Converter</title>
<script src="popup.js"></script>
</head>
<body>
<h1>Lenght Unit Converter</h1>
<input type="text" name="inputText" id="inputValue" required onfocus="clearTextBox()">
<select id="list1" onchange="getSelectValue1()">
<option value="km">Kilometre</option>
<option value="m">Metre</option>
<option value="cm">Centimetre</option>
<option value="mm">Millimetre</option>
<option value="mc">Micrometre</option>
<option value="nm">Nanometre</option>
<option value="ml">Mile</option>
<option value="yd">Yard</option>
<option value="ft">Foot</option>
<option value="ic">Inch</option>
<option value="ntm">Nautical mile</option>
</select>
<br>
<input id="display" type="text" name="display" readonly>
<select id="list2" onchange="getSelectValue2()">
<option value="km">Kilometre</option>
<option value="m">Metre</option>
<option value="cm">Centimetre</option>
<option value="mm">Millimetre</option>
<option value="mc">Micrometre</option>
<option value="nm">Nanometre</option>
<option value="ml">Mile</option>
<option value="yd">Yard</option>
<option value="ft">Foot</option>
<option value="ic">Inch</option>
<option value="ntm">Nautical mile</option>
</select>
</br>
<br><input type="button" value="convert" onclick="setValueToTextBox()"></br>
</body>
</html>** But when i load it on google chrome browser ...it looks normal as i expected. Screenshot is given below! enter image description here
my extension looks as i expected but it's functions not work like normal html and javascript program. Please Help me to solve this!!! thanks in advance!
