DEV Community

Grant McNamara
Grant McNamara

Posted on • Updated on

How To Make A Extension For Edge or Chrome

Image description
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"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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+"&deg;F";
    document.getElementById("humidity").innerHTML = obj.main.humidity+"%";
    document.getElementById("description").innerHTML = weather[i].description;
    iconshow(icon,mt)
    document.getElementById("mintemp").innerHTML = mt+"&deg;F";
    document.getElementById("maxtemp").innerHTML = obj.main.temp_max+"&deg;F";
    document.getElementById("wspdg").innerHTML = obj.wind.speed+"MPH | "+obj.wind.deg+"&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.";
            }
};
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!";
  }
});

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
thebox193 profile image
Sir.Nathan (Jonathan Stassen)

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.

Collapse
 
grantrocks profile image
Grant McNamara

Yeah i thought that was cool myself

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Firefox extensions are essentially identical too

Collapse
 
sadrobottext profile image
Danny Nunn

Interesting, I've always wanted to know how to make one. Could you make it with a JS framework?

Collapse
 
grantrocks profile image
Grant McNamara

yes as long as it works with a html page or js file

Collapse
 
thebox193 profile image
Sir.Nathan (Jonathan Stassen)

Yep! I believe so. I made one using React once :)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Interesting reading about manifest v3

Collapse
 
grantrocks profile image
Grant McNamara

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.