Build and Publish Custom Google Chrome Extension

Chrome Extension is one of the important tools for simplified on the web. It is helpful for creators and online users to work faster and smoother. I used Grammarly chrome extension while writing an article. 

It checks my article grammar. But you are thinking about how this chrome extension is created. It is simple to create a chrome extension. 

But if you want to make a high-performance chrome extension, you need to have the best knowledge of a programming language.

In this tutorial, we are made a custom chrome extension and publish it on the web store. We are using simple HTML, CSS, and JSON for it. 

There are no requirements to have high knowledge about HTML, CSS and JSON language. Ok, we are going with step by step in this article.


Step of Making Custom Chrome Extension



1. Create Icon

Before we open the text editor, we have one icon for our extension. The icon size has 128x128 pexels. It is the perfect size for chrome extension. You can simply create this icon with photoshop or illustrator. There are also required provides icon names on JSON files.


2. Create JSON file on Text Editor(manifest.json)

The JSON file, there are contain all information about our extension. There are contain versions, icons, size, description, title, and so on. And also provides JSON links on HTML. 

{
    "manifest_version"2,
  
    "name""Sandesh Tandan",
    "description""Graphics Design, Programming, Video Editin, Blogging",
    "version""1.0.0",
    "icons": { "128""logo.png" },
    "browser_action": {
      "default_icon""logo.png",
      "default_popup""index.html"
    },
    "permissions": ["activeTab"]
  }


3. Create HTML File

There you need to do like web development. First create HTML file like index.html. This HTML file name also contain on JSON file so provides same name on both side. I will created social media profile with HTML and css.

<main>
    <div class="main-item">
      <div class="main-flex">
        <div class="heading">
          <h1>Sandesh Tandan</h1>
        </div>

        <div class="paragraph">
          <p>Graphics Design, Programming, Digital Marketing,and Video Editing</p>
        </div>

        <div class="social">
          <a href="https://www.facebook.com/sandeshtandanpage"><i class="fab fa-facebook-f"></i></a>
          <a href="https://www.twitter.com/sandeshtandan"><i class="fab fa-twitter"></i></a>
          <a href="https://www.pinterest.com/sandeshtandan"><i class="fab fa-pinterest-p"></i></a>
          <a href="https://www.linkedin.com/sandeshtandan"><i class="fab fa-linkedin-in"></i></a>
        </div>
      </div>
    </div>
  </main>


3. Create CSS File

Now link the CSS on HTML and start to design your extension. Your extension is also required responsive on many devices. I will simply design that with CSS.

*{
    padding0%;
    margin0%;
}

htmlbody{
    font-family'Poppins'sans-serif;
}

main{
    background-colorrgb(181185223);
    padding1rem;
}

.social{
    displayflex;
    flex-directionrow;
    gap1rem;
}

.social a{
    colorrgb(616161);
    font-size22px;
}


4. Upload Your Extension

  • Go to Google Chrome on desktop
  • Click on the three dots icon on chrome
  • Click on More Tools
  • Click on Extension
  • Enable developer mode
  • And click on Load Unpacked
  • Now Upload your extension