Chrome Extention Development

In this post i will build a simple Google Chrome extension. This is beginner friendly as it is only HTML, CSS and a bit of JSON. Use it to create your own.

 

 

The first thing you have to do is to create the following files into a folder called Launcer

Into Images folder we put our app logo and outside the same logo  icon_128.png[128px * 128px]  and icon.png[19px * 19px]

 

Next step is to create the popup.html file with bootstrap and fontawesome embed.

</pre>

<html>

<head>
  <title>Quick Launcher</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
    crossorigin="anonymous">
  <style>
    /* Modal Structure */

    html,
    body {
      font-family: 'Open Sans', sans-serif;
      font-size: 14px;
      margin: 0;
      min-height: 180px;
      padding: 0;
      width: 540px;
    }

    h1 {
      font-family: 'Menlo', monospace;
      font-size: 22px;
      font-weight: 400;
      margin: 0;
      color: #E10D60;
    }

    a:link,
    a:visited {
      color: #000000;
      outline: 0;
      text-decoration: none;
    }

    img {
      width: 30px;
    }

    .modal-header {
      align-items: center;
      border-bottom: 0.5px solid #dadada;
    }

    .modal-content {
      padding: 0 22px;
    }


    .modal-icons {
      border-top: 0.5px solid #dadada;
      border-bottom: 0.5px solid #dadada;
      padding-bottom: 10px;
      height: 50px;
      width: 100%;
    }


    .logo {
      padding: 16px;
    }

    .logo-icon {
      vertical-align: text-bottom;
      margin-right: 12px;
    }

    .version {
      color: #444;
      font-size: 18px;
    }

    .flex-container {
      display: flex;
      justify-content: space-between;
      padding: 10px 22px;
    }

    .flex {
      opacity: 1;
      transition: opacity 0.2s ease-in-out;
      width: 120px;
    }

    .flex:hover {
      opacity: 0.4;
    }

    .flex .fa {
      font-size: 40px;
      color: #E10D60;
    }

</style>

  <script src="popup.js"></script>
</head>

<body>
  <div class="modal-header">
    <h1 class="logo">
      <img class="logo-icon" src="images/logo-black.png">Launcher
      <span class="version">(1.0.0)</span>
    </h1>
  </div>
  <div class="modal-content">
    <p>Our Social</p>
  </div>
  <div class="modal-icons">
    <div class="flex-container">
      <div class="flex">
        <a href="https://your.site.com" target="_blank">
          <i class="fa fa-globe"></i>
        </a>
      </div>
      <div class="flex">
        <a href="https://www.instagram.com/your.account/" target="_blank">
          <i class="fa fa-instagram"></i>
        </a>
      </div>
      <div class="flex">
        <a href="https://www.twitter.com/your.account" target="_blank">
          <i class="fa fa-twitter"></i>
        </a>
      </div>
      <div class="flex">
        <a href="https://www.facebook.com/your.account/" target="_blank">
          <i class="fa fa-facebook"></i>
        </a>
      </div>
    </div>
  </div>

</body>
</html>

After this, we have to create our litle manifest.json file with the following code inside:

{
  "manifest_version": 2,

  "name": "Addo Launcher",
  "description": "Quick launch Addo Media",
  "version": "1.0.0",
  "icons": { "128": "icon_128.png" },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

 

The popup.js is empty for this project but you can add your custom javascript in it.

 

Finally, we have to upload our extention in our Chrome Browser

Just open Google Chrome and chose Menu -> More Tools -> Extentions

Then enable the Developer mode button

Press Load unpacked button in the top left corner

Chose your app and upload it. That’s it!

Congratulations!!!

Your new extention is up and running!

 

*If you want to publish your extention at google chrome store visit:

https://chrome.google.com/webstore/developer/dashboard

A one-time developer registration fee of US$5.00 is required to verify your account and publish items in Google’s Chrome Store!