Creating a Google Chrome Extension and publishing it in chrome web store

Creating a Google Chrome Extension and publishing it in chrome web store

7 min. read

Create a folder named "chrome_extension" on your system to store all the necessary files for creating the Google Chrome extension.

All the files that we are going to create will be stored in this folder.

We will be creating a very basic chrome extension which will contain

  1. Webslake logo
  2. a header line and version number
  3. some lines about chrome extension
  4. and Webslake website & social media links

See the image below

Google Chrome Extension

Coding the extension

manifest.json file

Every chrome extension needs a manifest.json file. In this file we specify basic metadata about the extension such as name, short name, version number, description etc. and it's functionalities such as browser actions, background scripts, content scripts, permissions etc.

Our manifest.json file

{
  "manifest_version": 2,
  "name": "Webslake Official Launcher",
  "version": "1.0.0",
  "short_name":"Webslake Launcher",
  "description": "Access to Webslake website and it's social media links",
  "icons":{"128":"icon_128.png"},
  "browser_action":{
    "default_icon":"icon_19.png",
    "default_popup":"popup.html"
  },
  "permissions":["activeTab"]
}

Save the above json code as manifest.json file in "chrome_extension" folder.

Explanation of above manifest.json file

  • manifest_version : Here we need to specify the current Manifest version which you can find here.
  • name : Name of the google chrome extension
  • version : The version string of the chrome extension, as it is the first version it is set to 1.0.0
  • short_name : Short name for the chrome extension
  • description : A plain text description of the chrome extension
  • icons : It's the 128px * 128px icon that is used during installation and by the Chrome Web Store. Click here to know more about icons.
  • browser_action :
    1. default_icon : It is the icon that will be displayed in the right side of address bar.
    2. default_popup : Here we specify the name of html file which is the content of the extension, this html file is the body of the Chrome extension, we will be creating it in a while.
  • permissions : An array of permissions that the extension needs. Click here to know more about permissions.
  • There is much more that can be added to the manifest.json file according to the extension requirement, find the full list of manifest fields here.

Icons needed for the extension

  1. 128px * 128px icon, name it icon_128.png
  2. 19px * 19px icon, name it icon_19.png
  3. 30px * 30px icon which we will displayed on the extension itself, name it logo.png

Place them in the "chrome_extension" folder.

HTML for the extension

<!DOCTYPE html>
<html>
  <head>
    <title>Webslake Launcher</title>
    <meta name="viewport" content="width=device-width, initial_scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Encode+Sans+Expanded:400,700" type="text/css">
    <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" type="text/css">
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
      <div id="logo-cover">
        <div class="tb">
          <div class="tr">
            <div class="td" id="logo-td">
              <div id="logo"><img src="logo.png"></div>
            </div>
            <div class="td" id="label">
              <span id="banner-label">Webslake Launcher</span>
              <span id="version">(1.0.0)</span>
            </div>
          </div>
        </div>
      </div>
      <div id="main-line">Easily find Webslake</div>
      <div id="links">
        <div class="tb">
          <div class="tr">

            <div class="td">
              <div class="link">
                <a href="https://www.webslake.com" target="_blank">
                  <i class="ion-earth"></i>
                </a>
              </div>
            </div>

            <div class="td">
              <div class="link">
                <a href="https://www.twitter.com/webslake" target="_blank">
                  <i class="ion-social-twitter"></i>
                </a>
              </div>
            </div>

            <div class="td">
              <div class="link">
                <a href="https://www.facebook.com/webslake" target="_blank">
                  <i class="ion-social-facebook"></i>
                </a>
              </div>
            </div>

            <div class="td">
              <div class="link">
                <a href="https://in.pinterest.com/webslake/" target="_blank">
                  <i class="ion-social-pinterest"></i>
                </a>
              </div>
            </div>

          </div>
        </div>
      </div>
  </body>
</html>

Save the above html as popup.html in "chrome_extension" folder.

Why popup.html? see value for default_popup key in the manifest.json file.

CSS rules

Applying CSS to make the chrome extension better looking.

body
{
  outline: none;
  font-size: 14px;
  font-family: encode sans expanded,Helvetica,Arial,"sans-serif";
  width: 372px;
  margin: 0px;
  padding: 15px;
}

a
{
  color: #117692;
  text-decoration: none;
}

.tb
{
  display: table;
  width: 100%;
}

.tr
{
  display: table-row;
}

.td
{
  display: table-cell;
  vertical-align: middle;
}

#logo-cover
{
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #f1f1f1;
}

#logo-td
{
  width: 30px;
  padding-right: 15px;
}

#logo img
{
  display: block;
  width: 30px;
  height: 30px;
}

#label
{
  padding-bottom: 4px;
}

#banner-label
{
  color: #00ad7a;
  font-size: 24px;
  font-weight: 700;
  margin-right: 10px;
}

#version
{
  font-size: 13px;
  color: #5d5d5d;
  position: relative;
  top: -3px;
  letter-spacing: 2px;
}

#main-line
{
  color: #5d5d5d;
  font-size: 15px;
  margin: 20px 0px 15px 0px;
}

#links
{
  margin-left: -4px;
}

#links .td
{
  width:25%;
}

.link i
{
  font-size: 50px;
  width: 50px;
  text-align: center;
  display: block;
  line-height: 0px;
}

.ion-earth
{
  color: #00ad7a;
}

.ion-social-twitter
{
  color: #1da1f2;
}

.ion-social-facebook
{
  color: #4267b2;
}

.ion-social-pinterest
{
  color: #bd081c;
}

Create a sub-folder named css inside "chrome_extension" folder and save the above CSS rules as styles.css in it.

The extension will look like the image below

Google Chrome Extension

Coding part finished.

Deployment

Open Google Chrome

Type "chrome://extensions/" in the address bar and hit enter

Click on the Developer mode checkbox.

Turn on developer mode

Now click Load unpacked extension... button on the top-left side and select the "chrome_extension" folder.

Google Chrome Extension loaded

Your chrome extension is loaded, now click on it to run.

Publishing in chrome web store

Select all the files in "chrome_extension" folder and pack them as .zip file.

Navigate to Developer Dashboard at https://chrome.google.com/webstore/developer/dashboard

Click on Add new item button.

Choose the .zip file that you just created earlier and upload it.

After upload you will be asked to fill a form asking details like "Detailed description" of the extension, "icon", "screenshots", "category" etc.

You need to pay one-time developer registration fee of US $5.00 to verify your developer account and publish items.

Click the publish button to publish the extension, this publishing process may take a long time.

Find out more about Publishing the Google Chrome Extension at https://developer.chrome.com/webstore/publish

Write comments