Developing & Publishing a Web Extension (Beginner's Guide)

#webextension #beginners #javascript #html

Web Extension - Is not this term fascinating? Ya, I know the term chrome extension has dominated and we all are more fascinated to that. We all know about chrome web store and chrome extensions. But there is one more Browser Mozilla Firefox which is also widely popular but some of us are not aware about ADD-ONS. We can do the same thing here in ADD-ONS what you are doing there in chrome extensions. Building a chrome extension and a mozilla add-on is quite similar. So here we are going to see what is a web extension and simultaneously we will build a simple extension and see the publishing procedure for both chrome web store and mozilla add-ons.

What’s Web Extension?

From a technical perspective, a Web Extension is just some CSS, HTML, and JavaScript that enables the user to add functionality into the Web Browser through some API. The extension components include content scripts, background scripts, an options page, Logic files, and various UI elements. An extension’s component relies on its functionality and may or may not require every option.
The difference between a Web Extension and an application is that they are often easier to build & deploy as they are centered around a singular function.

Creating Your First Extension

Here you are going to build and publish a extension which will generate a new quote each time.

Creating manifest.json

Every extension contains a JSON-formatted manifest file, named manifest.json. Browser uses this file to acquire certain pieces of information about the extension you are going to develop. It is very important.

{
    "name": "Your_Extension_name",
    "version": "0.0.1",
    "manifest_version": 3,
    "action": {
        "default_popup": "popup.html",
        "default_icon": "logo.png"
    },
    "icons": {
        "128": "logo.png"
    },
    "permissions": ["activeTab"]
}

Creating popup.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>your_package_name</title>
  </head>
  <body>
    <p id="quoteElement">Loading...</p>
    <script src="script.js"></script>
  </body>
</html>

Creating script.js

fetch("http://api.quotable.io/random")
  .then((data) => data.json())
  .then((quoteData) => {
    const quoteText = quoteData.content;
    const quoteElement = document.getElementById("quoteElement");

    quoteElement.innerHTML = quoteText;
  });

Here we are using an api for generating a new quote each time.

Creating styles.css

body {
    width: 300px;
    height: 300px;
    background-image: linear-gradient(to right, #434343 0%, black 100%);
    display:flex;
    justify-content: center;
}

p {
    display: inner-flex;
    margin: auto 10px;
    font-size: 22px;
    color: #ffffff;
    border-width: 3px;
        border-style: solid;
        border-image:
            linear-gradient(to bottom,
                red,
                rgba(0, 0, 0, 0)) 1 100%;

    padding: 10px;
}

Testing

Now, go to Manage Extensions in Chrome Browser.
Turn Developer Mode on.
Click on Load Unpacked (situated at top left).
Select your extension's manifest.json file.
Now, you can see your extension listed here.

Publishing on Chrome Web Store

For publishing the extension in Chrome Web Store, one needs to have a developer account. There is a one-time sign up fee of $5 to publish your extensions. With this account, you can publish as much as 20 extensions in Chrome Store. After successful sign up, the next step is to log in to your developer’s account and go to your developer’s dashboard.
There you will come across the “Add New Button” button which will redirect you to a page to upload a ZIP file. Don’t forget to create a Zip file beforehand of your folder directory comprising of JSON and JavaScript files.
Upload your Zip package, and give a relevant description of your extension. Please make sure that you clearly explain the singular function of your extension. Moreover, you can also give Screenshots and a YouTube tutorial video to guide your users, on how to interact with your plugin.
You can also edit the icons of your extension and configure your extension at any point of time. To see how everything you configured will look on Chrome Web store, preview the changes. If everything goes smoothly, hit “Publish.”

Publishing as Mozilla ADD-ON

First, zip your extension, keeping manifest.json as root.
Open your Firefox Browser and search mozilla add-ons or click on this link
Then sign up create a new account or log yourself in if you already have an account. Now, got to Developer Hub (link situated at the top right)
Click on Submit a New Add-on. On the next screen, click on this site and continue.
Noe click on select file and choose your zip file. After upload a series of automated validation tests will be run on your file.
On the next screen, click yes if you want to share source code otherwise click no then continue.
Then describe your Add-On.
After successful submission wait for some hours. Your Add-On will be listed after review (You will also get notified by mail for the same).

Congratulations, You have successfully developed and published your first extension.