Extension : Create , Publish and Earn

Today we'll learn How to create Extension/add-ons , How to Publish it and Earn from it.So Let's begin......

Extensions are small software which allows you to customize browser. There are many types of extensions like ad-block , cookie manager, for Emoji , password manager etc.

Extensions are made of different, but common, components. Components can include background scripts, content scripts, other pages, and various logic files.

So let's Create one,

Creation:

Step 1: First we'll create manifest.json

{
  "name": "Apna Coding Adda",
  "version": "0.0.1",
  "description": "Coding Blogspot",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_popup": "popup.html",
    "scripts": ["background.js"],
    "persistent": false,
    "default_icon": {
      "16": "img/icon16.png",
      "32": "img/icon32.png",
      "48": "img/icon48.png"
    }
  },
  "manifest_version": 2
}

Here i am creating simple extension which will show user to Apna Coding Adda , for your extension you can add feature as per your convenience.

and also create folder name img and add icon for your extension in it.

Fill manifest.json according to your Extension

Step 2: Design and add logic to your extension.

Don't worry we're gonna use HTML, CSS and JavaScript.

Create popup.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">
    <title>Apna coding Adda</title>
</head>
<body>
    <h3>Apna Coding Adda</h3>
    <button id="blog">Click</button>
<script src="./app.js"></script>
</body>
</html>

and Now style.css

*{
    background-color: black;
}
h3{
    color: rgb(0, 183, 255);
}
#blog{
    display: block;
    margin: auto;
    background-color: rgb(248, 117, 117);
    color: white;
    cursor: pointer;
    border: rgb(0, 183, 255);
    border-radius: 5px;
}

app.js

let blog = document.getElementById('blog')
blog.addEventListener("click", async () => {
    window.location = 'https://apnacodingadda.blogspot.com/';
  });

Step 3: add to browser

For chrome: go to chrome://extensions , Enable Developer mode and click on Load unpacked and select manifest.json

For Firefox: go to about:addons , click on settings and click Debug add-ons then click on Load Temporary add-ons and select manifest.json

Now you know what time it is? it is disco time 💃💃💃 😂😂😂........

because you created your first extension, so your Extension is ready to use and you can add more feature in it.

`Publishing Extension:`

Step 1: Create Zip of your Extension Folder

Step 2: Create Developer account (cost USD 5$)

Step 3: Upload

Step 4: Add assets for your listing

Step 5: Submit for Publishing

`Earning:`

Now it is the main part.. Earning form exension.

Sell Advertising
paid Exension
Subscription
Ask for donations
Etc

Thank You 😊😊

GitHub

Other Important Post

Apna Coding Adda

Search This Blog