Ever install a extension on your web browser. A ad blocker, a game, a tool? Its almost guaranteed that you have installed a extension for your web browser sometime in your life. Extensions are a great way to add useful features to your browser or personalize it. Sometimes you can't find what you need and you would like to make one yourself but you don't know how. That's what we are going to be going over.
Why Should You Make One?
Making a extension is a great idea as it can grow to be a great source of income. Extensions also can act as previous work proof that you can use to get into a good college or job that you would like. While making a extension you may learn a new programming language and it may be something to do on the side if you dont have something already. And to be honest, it's pretty easy to do.
Getting Started
Before you make a extension you need to have a IDE or some file editor. That will be used to edit the files for your extension. You will also need a idea of what to do with your extension such as making it a game or weather app. Once you are ready to start making it read the following.
Manifest.json
Before you start to make your extension you need a file to specify details about your extension. In the manifest file you need to declare the name of your app, the description, the version, needed permissions(if used), needed external sources(if used), etc. Making the manifest file is the easiest step of making your extension. The format for your manifest.json file is below.
{
"name": "Current Weather",
"description": "Get the current weather from this small extension. This extension needs your location to get the weather for your area.",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "index.html",
"default_icon": "cwlogo.png"
},
"options_ui": {
"page": "settings.html"
},
"permissions": [
"geolocation",
"notifications"
],
"host_permissions": [
"https://api.openweathermap.org/",
"https://translate.google.com/"
],
"commands": {
"_execute_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens index.html"
}
}
}
This is the manifest.json file for one of my extensions Current Weather which you can download on Edge here. As you can see, it uses the external source api.openweathermap.org and it uses services such as geolocation. It also has a settings page, which is not needed. You can view all of the permissions here.
Looking at the manifest.json you can see that it has a icon and a action page. The icon is the small little picture that you see when you have a extension installed. The action page is the little page that pops up when you click on the extension. Those are the pages that are the actual extension itself.
Making The UI
This step is pretty easy. The popup page uses HTML and HTML can use other sources. My extension uses HTML and the HTML uses javascript. If you are unfamiliar with HTML than view my other article about HTML. You first need to make the layout for a HTML page and then you need to make sure that the name of the HTML file is in the manifest.json file so that way it works when you click on it. The layout for my HTML page is below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Current Weather</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body">
<table>
<thead>
<th>Tempature</th>
<th>Humidity</th>
<th>Description</th>
<th>Icon</th>
</thead>
<tbody>
<tr>
<td id="temp"></td>
<td id="humidity"></td>
<td id="description"></td>
<td id="icon" style="background-color: gray;"></td>
</tr>
</tbody>
</table>
<table>
<thead>
<th>Min Temp</th>
<th>Max Temp</th>
<th>Windspeed | Degree</th>
<th>Pressure</th>
</thead>
<tbody>
<tr>
<td id="mintemp"></td>
<td id="maxtemp"></td>
<td id="wspdg"></td>
<td id="pressure"></td>
</tr>
</tbody>
</table>
<center><div id="result" style="font-size: 20px;"></div>
<div id="google_translate_element"></div>
</center>
</div>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script src="script.js"></script>
</body>
</html>
As you can see I use a javascript file to get the weather from api.openweathermap.org. The HTML page that I have set up has a table for the weather data. The javascript file uses the resources from the HTML page. Which brings us to the next section.
The Backend
Now that you got a nice and fancy UI you now need to make a less appealing file for the fancy UI. Make a file named script.js and make sure that it is in the same directory with the rest of the files. Now make your js file the way you want your app to work and then you should link it to your HTML file and you should be good to go with the html. The backend for my extension is below.
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
navigator.geolocation.getCurrentPosition(function(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const altitude = position.coords.altitude;
const accuracy = position.coords.accuracy;
const altitudeAccuracy = position.coords.altitudeAccuracy;
const heading = position.coords.height;
const speed = position.coords.speed;
const timestamp = position.timestamp;
// work with this information however you'd like!
});
function locationSuccess(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const altitude = position.coords.altitude;
const accuracy = position.coords.accuracy;
const altitudeAccuracy = position.coords.altitudeAccuracy;
const heading = position.coords.height;
const speed = position.coords.speed;
const timestamp = position.timestamp;
getweather(latitude, longitude);
// work with this information however you'd like!
}
function locationError(error) {
const code = error.code;
const message = error.message;
// read the code and message and decide how you want to handle this!
document.getElementById('result').innerHTML = message;
}
navigator.geolocation.getCurrentPosition(locationSuccess, locationError);
function getweather(latitude, longitude){
const key = "6ea81243e055f1218d43cb862f1da44c";
const link = "https://api.openweathermap.org/data/2.5/weather?lat="+latitude+"&lon="+longitude+"&units=imperial&apikey="+key+"&lang="+localStorage.lang;
let request = new XMLHttpRequest();
request.open('GET', link);
request.responseType = 'json';
request.send();
request.onload = function() {
const data = request.response;
showweather(data)
}};
function showweather(obj) {
var date = new Date(obj.dt * 1000);
// Hours part from the timestamp
var hours = date.getHours();
// Minutes part from the timestamp
var minutes = "0" + date.getMinutes();
// Seconds part from the timestamp
var seconds = "0" + date.getSeconds();
var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
const weather = obj['weather'];
var mt = obj.main.temp_min;
for (let i = 0; i < weather.length; i++) {
var icon = weather[i].icon;
document.getElementById("temp").innerHTML = obj.main.temp+"°F";
document.getElementById("humidity").innerHTML = obj.main.humidity+"%";
document.getElementById("description").innerHTML = weather[i].description;
iconshow(icon,mt)
document.getElementById("mintemp").innerHTML = mt+"°F";
document.getElementById("maxtemp").innerHTML = obj.main.temp_max+"°F";
document.getElementById("wspdg").innerHTML = obj.wind.speed+"MPH | "+obj.wind.deg+"°";
document.getElementById("pressure").innerHTML = obj.main.pressure;
}
};
function iconshow(icon, mt) {
var img = new Image();
img.src =
'https://openweathermap.org/img/wn/'+icon+'@2x.png';
img.style.width = "20px";
img.style.height = "20px";
document.getElementById('icon').appendChild(img);
if (mt>=85){
document.getElementById("result").innerHTML="Its gonna be hot today. Bring some water wherever you go outside.";
chrome.notifications.create('hotoutside', {
type: 'basic',
iconUrl: 'images/1.png',
title: 'Test Message',
message: 'You are awesome!',
priority: 2
});
}else if(mt<=50){
document.getElementById("result").innerHTML="Its going to be chilly today. Wear some warm clothes.";
}
};
It uses the service geolocation which is a permission, to get the users location to get the weather in their area. Then using the html file it displays it in the table for the user to read. If you would like to make a settings page for your extension too than keep reading.
Making A Settings Page
Want your user to have some options? Make another HTML page and js file and declare it in your manifest. You can give the user the option to change colors, language, etc. You can see mine below.
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Current Weather</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body">
<center>
<h1>Settings</h1>
<p>View and set the settings for the current weather app.</p>
<h2>Language</h2>
<p>Set the extensions language to your preferance.</p>
<select name="language" id="language">
<option value="en" selected>English</option>
<option value="de">German</option>
<option value="sp">Spanish</option>
<option value="ja">Japanese</option>
<option value="fr">French</option>
</select>
<div id="currentlang"></div>
<button id="submitlang">Set Language</button>
<h2>Privacy</h2>
<p>I will never share/sell you location or information to anybody because it is your information and only you shall decide what you would like to do with your privacy. If you decide that you do not want the extension to see your location anymore go to the three dots in the upper right corner, click more tools, click on details for the extension, disable location access. Please note that the extension does not work without location access.</p>
<h3>Help/Support</h3>
<p>If you are having problems with the extension then please go to the following site as it contains a forum with help and support. <a href="https://github.com/Grantrocks/Current-Weather/discussions" target="_blank">https://github.com/Grantrocks/Current-Weather/discussions</a>. That is the github discussion page contatining the files for the project and help and support for anyone that needs it.</p>
</center>
<div id="google_translate_element"></div>
</div>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script src="settings.js"></script>
</body>
</html>
JS:
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
document.getElementById("submitlang").addEventListener("click", function(){
var sellang = document.getElementById("language").value;
var curl = document.getElementById("currentlang");
if (sellang=="en"){
curl.innerHTML = "English";
localStorage.lang = "en";
}else if(sellang=="de"){
curl.innerHTML = "German";
localStorage.lang = "de";
}else if(sellang=="sp"){
curl.innerHTML = "Spanish";
}else if(sellang=="ja"){
curl.innerHTML="Japanese";
}else if(sellang=="fr"){
curl.innerHTML="French";
}else{
curl.innerHTML="None Selected!";
}
});
Your Done
Now that your extension is made you can publish it where you would like to publish it. Google's chrome web store needs a $5 fee, Microsoft edge is free to publish and so is firefox but if you publish here you will need to change the manifest.json a little bit as it uses version 2.
Donations are nice.
Also I use a link shortener that is paid and if you would like to use it too sign up here.
Top comments (8)
I hadn't thought about it, but now that Edge is Chromium based, extension can be made for both at the basically the same time. That's so cool.
Yeah i thought that was cool myself
Firefox extensions are essentially identical too
Interesting, I've always wanted to know how to make one. Could you make it with a JS framework?
yes as long as it works with a html page or js file
Yep! I believe so. I made one using React once :)
Interesting reading about manifest v3
Yes but the only files that will be dangerous are the ones that you dont make. In this article i told people how to make their OWN manifest files. Therefore they know that the file is safe to use.