Basic HTML Chome Extention

chrome extention

I wanted to make a very basic chrome extension since I am not an expert yet I decided to do a little research and found that I could make a basic one in HTML. To start with you will need a manifest file which must be a .json file and its very easy to set up with basic information.

{
“manifest_version”: 2,

“name”: “Lipanitech Laucher”,
“description”: “Lipanitech Laucher”,
“version”: “1.0.0”,
“icons”: { “128”: “icon_128.png” },
“browser_action”: {
“default_icon”: “icon.png”,
“default_popup”: “popup.html”
},
“permissions”: [“activeTab”]
}

Just make sure the manifest version is right as Chrome updates it will need to be updated.

My main window is just popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Lipanitech 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: 384px;
      }
      h1 {
        font-family: “Menlo”, monospace;
        font-size: 22px;
        font-weight: 400;
        margin: 0;
        color: #2f5876;
      }
      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;
        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: #2f5876;
      }
    </style>
    <script src=”popup.js”></script>
  </head>
  <body>
    <div class=”modal-header”>
      <h1 class=”logo”>
        <img class=”logo-icon” src=”icon_128.png” />
        Lipanitech Launcher
        <span class=”version”></span>
      </h1>
    </div>
    <div class=”modal-content”>
      <p>Easily Access Media content</p>
    </div>
    <div class=”modal-icons”>
      <div class=”flex-container”>
        <div class=”flex”>
          <a href=”https://lipanitech.com/” target=”_blank”>
            <i class=”fa fa-globe” style=”color:darksalmon “></i>
          </a>
        </div>
        <div class=”flex”>
          <a href=”https://www.youtube.com/allamericancomp” target=”_blank”>
            <i class=”fa fa-youtube” style=”color:darksalmon “></i>
          </a>
        </div>
        <div class=”flex”>
          <a href=”https://www.twitter.com/kb3yua” target=”_blank”>
            <i class=”fa fa-twitter” style=”color:darksalmon “></i>
          </a>
        </div>
        <div class=”flex”>
          <a href=”https://www.facebook.com/allamericancomp” target=”_blank”>
            <i class=”fa fa-facebook” style=”color:darksalmon “></i>
          </a>
        </div>
        <div class=”flex”>
          <a href=”https://www.github.com/” target=”_blank”>
            <i class=”fa fa-github” style=”color:darksalmon “></i>
          </a>
        </div>
      </div>
    </div>
  </body>
</html>
I picked a font from Google API and icons from bootstrapcdn you can just get regular pictures and use the standard font. Remeber its HTML you can do whatever you want to make it look like a webpage. All this extension does is pop up lists of icons and sents you to other pages.
Make sure both files are in one folder. If you want to test the chrome extension make sure Chrome is in developer mode then go to extensions and click Load unpacked.
It is really that simple. If you wanted to and you have your own Gsuite account you can upload to your company store or you can upload it publicly at Google Play Store.
My code is available at my repository.