Hello Friends,
I hope you are good. Today we will learn about Google chrome extension.
Google Chrome Extension is one of the good functionality provided by google chrome. Chrome Extension makes users work easy. also it is easy to use. chrome also provide to create our own extension. you can create extension as per your requirement. this makes users work easy and save time.
So, Today We will learn how to create your own google chrome extension and make work easy.
- First, create a folder “My chrome extension”.
- Create “menifest.json” file in your folder.
{
"manifest_version": 2,
"name": "Time Converter",
"description": "This extension will convert time.",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "converter.html"
},
"permissions": [
"activeTab"
]
}3. Create converter.html file
<!DOCTYPE HTML>
<html lang="en">
<style>
input[type=text], input[type=number], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical
}
input[type=button] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=button]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width: 250px;
}
#convert_data_result{
border: none;
background-color: lightblue
}
</style>
<body>
<meta charset=utf-8>
<title>Converter</title>
<div class="converter-wrapper container">
<h1 class="converter-header">Time Converter</h1>
<div class="converter-content">
<div class="converter-front">
<form name="time_converter" class="time_converter">
<input type="number" id="convert_data" name="convert_data" placeholder="Add value here...">
<label for="fname">From</label>
<select id="convert_from" name="convert_from">
<option value="" class="convert_option_from">Select time format</option>
<option value="1" class="convert_option_from">Hour</option>
<option value="2" class="convert_option_from">Minute</option>
<option value="3" class="convert_option_from">Second</option>
</select>
<label for="lname">To</label>
<select id="convert_to" name="convert_to">
<option value="" class="convert_option_to">Select time format</option>
<option value="1" class="convert_option_to">Hour</option>
<option value="2" class="convert_option_to">Minute</option>
<option value="3" class="convert_option_to">Second</option>
</select>
<input type="button" value="Submit" id="submit_convert_val">
</form>
<br>
<div id="result" hidden>
<h2 for="fname">Result</h2>
<input type="text" id="convert_data_result" name="convert_data_result">
</div>
</div>
</div>
</div>
</body>
</html>
/converter.js
4. Create converter.js file and put below code there
document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('submit_convert_val');
checkPageButton.addEventListener('click', function() {
if(document.getElementById('convert_from').value != document.getElementById('convert_to').value){
var result = document.getElementById("result");
if(document.getElementById('convert_from').value == 1 && document.getElementById('convert_to').value == 2){
document.getElementById("convert_data_result").value = document.getElementById('convert_data').value * 60;
result.style.display = "block";
return 0;
}else if(document.getElementById('convert_from').value == 1 && document.getElementById('convert_to').value == 3){
document.getElementById("convert_data_result").value = document.getElementById('convert_data').value * 3600;
result.style.display = "block";
return false;
}else if(document.getElementById('convert_from').value == 2 && document.getElementById('convert_to').value == 1){
document.getElementById("convert_data_result").value = document.getElementById('convert_data').value / 60;
result.style.display = "block";
return false;
}else if(document.getElementById('convert_from').value == 2 && document.getElementById('convert_to').value == 3){
document.getElementById("convert_data_result").value = document.getElementById('convert_data').value * 60;
result.style.display = "block";
return false;
}else if(document.getElementById('convert_from').value == 3 && document.getElementById('convert_to').value == 1){
document.getElementById("convert_data_result").value = document.getElementById('convert_data').value / 3600;
result.style.display = "block";
return false;
}else if(document.getElementById('convert_from').value == 3 && document.getElementById('convert_to').value == 2){
document.getElementById("convert_data_result").value = document.getElementById('convert_data').value / 60;
result.style.display = "block";
return false;
}
}
})
})5. choose 1 icon for your extension and put in your folder
6. Now, its time to load your folder to google chrome. just go to your chrome browser and type “chrome://extensions”. and you can see below screen there.
7. Now, click on top left button “Load Unpacked”. you can choose your folder there. and it will show in extension like below.
8. Now, You can see your extension beside address bar in chrome. Just click on that extension and you can use your extension easily.
So, as you see, its really easy to create our own google chrome extension.
I hope you like this blog.
Happy Coding.:)
Developer's Desk 