How to create a new browser extension?

Our extension consists of listing plenty of cool websites for us developers in a list, one after another.

To create an extension, we will need to create an HTML page and a CSS file, as we are used to doing. We will just modify certain things.

Prerequisites

• Knowledge of HTML
• Knowledge of CSS
• Basics of JSON

If you need a refresher or want to learn HTML and CSS, follow this course and then come back to this article.

Setting Up the Project

We will need to create a folder in which we will have index.html, style.css, and manifest.json.

In index.html, we will write the basic code of an HTML page:

<!DOCTYPE html>
<html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <link rel="stylesheet" href="./style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
      <h1>My First Extension</h1>
  </body>
</html>

Let's add our first websites: a palette generator, a JSON comparator, and a CSS wave generator:

  <body>
      <h1>My First Extension</h1>

      <a href="https://coolors.co/e6eed6-dde2c6-bbc5aa-a72608-090c02">Palette Generator</a>
      <a href="https://getwaves.io/">Wave Generator</a>
      <a href="https://jsoneditoronline.org/#left=local.wixiyo&right=local.jozayo">JSON Comparator</a>
  </body>

Let's Tackle the CSS

As for the CSS, we just need to specify the size of our window by modifying the size of body:

body {
  width: 400px;
  height: 500px;
  font-family: Arial;
}

Let's add a style to our links:

a {
  width: 90%;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  padding: 7px;
  gap: 5px;
  text-decoration: none;
  color: #fff;
  transition: 0.2s;
  background: #333333;
  align-items: center;
  margin-bottom: 10px;
}
a:hover {
  transform: scale(1.02);
  opacity: 0.8;
}

The manifest.json

In manifest.json, we will specify a bunch of things:

{
    "name": "My First Extension",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "The best extension that exists!",
    "icons": {
        "48": "icon.png"
    },
    "action": {
        "default_popup": "index.html"
    }
}

In this case, we have:

• name: the name of our extension
• manifest_version: the version of manifest.json (make sure it is version 3)
• description: the description of our extension
• icons: the path to our icon(s) in different resolutions
• action => default_popup: the path to our HTML page

Using Our Extension in Our Browser

To use our extension in our browser, in most browsers, we will need to enable developer mode. Go to the extensions page and click on the "Developer mode" button to activate developer mode.

• Manage Chrome extensions: chrome://extensions
• Manage Edge extensions: edge://extensions

Then, click on "Load extension" and select our project.

Publish My Extension

To publish our extension, it's not necessarily the same process. It all depends on the browser for which you want to make your project available.

• Google Chrome Documentation
• Microsoft Edge Documentation
• Mozilla Firefox Documentation