Create and Publish your Chrome Extension in 15 min

Published in

GDG Jalandhar

3 min readApr 14, 2019

Google Chrome has some great tools that help you to develop a simple chrome app & extension. In this article, I’ll show you how to create a simple chrome extension using HTML and JavaScript.

Let’s start with the basics:

What are extensions? They are small software programs that can modify and enhance the functionality of the Chrome browser. Chrome extensions extend Chrome’s capabilities. You write them using HTML, CSS, and JavaScript.

What can extensions do? Extensions can do quite a lot. They use either page actions or browser actions. They can’t use both.

Ready to dive in? Let’s do this!

STEP 1

Create a manifest.json file.

This is just a metadata file in JSON format that contains properties like your extension’s name, description, version number and so on. Every extension needs to have a JSON-formatted manifest file

{  
     "manifest_version": 2,   
     "name": "My Chrome Extension",  
     "description": "Description of Chrome Extension",  
     "version": "1.0.0",  
     "icons": { "128": "icon_128.png" },  
     "browser_action": {   
             "default_icon": "icon.png",  
             "default_popup": "popup.html"  
      },  
     "permissions": ["activeTab"]
}

icon.png file dimensions: 19*19 pixel
icon_128.png file dimensions: 128*128 pixel

STEP 2

Create a popup.html file

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">  
   <title>Document</title>   <style>
      body{
        padding: 5px;
        min-height: 200px;
        width:300px
      }
   </style>
</head><body>
   <div>
      <h1>My Chrome Extension</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione accusamus repudiandae voluptatum beatae et culpa animi? Veniam vel saepe repudiandae corporis tempore natus soluta, a perspiciatis blanditiis laboriosam commodi.</p>
      </div></body></html>

STEP 3

Test if it works

To test if it works, visit chrome://extensions in your browser and ensure that the Developer mode checkbox in the top right-hand corner is checked.

Click Load unpacked extension and select the directory in which your extension files live. If the extension is valid, it will be active straight away so you can open a new tab to see your ‘Hello world’.

STEP 4

Publish your extension

When your first Chrome extension looks nice and works as it should, it’s time to publish it to the Chrome Store. Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you’re not). Then click the Add new item button, accept the terms and you will go to the page where you can upload your extension.

Now compress the folder that contains your project and uploads that ZIP file.

After successfully uploading your file, you will see a form in which you should add some information about your extension. You can add an icon, a detailed description, upload some screenshots, and so on.

Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changes and that’s it, your done!

Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there).

Repo: https://github.com/Vrijraj/chrome-extension-codelab

Congratulations on making your first chrome extension! Happy coding!

Got questions or feedback? Let me know in the comments! Thanks for reading! Hope the information was helpful.

Create and Publish your Chrome Extension in 15 min

Written by Vrijraj Singh