Chrome Extension!! What it is? …How can we build it??

Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.

The main aim of an extension is to serve a single purpose around which the whole program is built, although it can have multiple components but they should help in accomplishing the main purpose of the program.

How do extensions work?

Extensions are built on web technologies such as HTML, JavaScript, and CSS. They run in a separate, sandboxed execution environment and interact with the Chrome browser.

Extensions let you “extend” the browser by using APIs to modify browser behavior and access web content. Extensions operate by means of an end-user UI and a developer API:

The extensions user interface Provides a consistent way for users to manage their extensions. Extensions APIs Allow the extension’s code to access features of the browser itself: activating tabs, modifying net requests, and so on.

To create an extension, you assemble some resources — a manifest, JavaScript and HTML files, images, and others — that constitute the extension. For development and testing, you can load these “unpacked” into Chrome using extension developer mode. Once you are happy with your extension, you can package it and distribute it to users.

Here are some popular and must-have Chrome extensions:

Google Calendar

Scribe

eesel

Grammarly

Loom

HubSpot Sales

LastPass

Awesome Screenshot

Checker Plus for Gmail

StayFocused

RescueTime

Buffer

Oberlo AliExpress Product Importer

Password manager

Ads blocker

Adding to-do lists or notes to Chrome

Making it easier to copy text from a site

Building a Basic Chrome Extension

This is where you can get started with building Chrome Extensions which ultimately increase your productivity and fasten our tasking. Be it live match score, music, or a whole page screenshot, you can build your own Chrome extension for every task.

So there’s some basic stuff which is required, it’s just like making a website, with a manifest!

• HTML
• CSS
• JavaScript

JSON: JavaScript Object Notation, is an open standard format that uses human-readable text to transmit data objects consisting of attribute-value pairs. It is the primary data format used for asynchronous browser/server communication (AJAJ), largely replacing XML (used by AJAX).

A few Preliminaries: Chrome Extensions follow a specific directory structure. That means, the filename is already fixed, they should be organized in a certain way as instructed.

Main Components of Chrome App:

• The manifest tells Chrome about your app, what it is, how to launch it, and the extra permissions that it requires.
• The background script is used to create the event page responsible for managing the app life cycle.
• All code must be included in the Chrome App package. This includes HTML, JS, CSS, and Native Client modules.
• All icons and other assets must be included in the package as well.

Directory Structure:

• json
• <content>.js [ Javascript Files]
• <markup>.html [ HTML files ]
• png

Let’s create a simple extension just to demonstrate the working procedure:

• Every extension require a manifest file
  First, create a manifest.json file

{
    "name": "Hello Extensions",
    "description" : "Base Level Extension",
    "version": "1.0",
    "manifest_version": 2
  }

• Then, for demonstration we will add an icon to the extension which will on being clicked open a web page created by us.
  Add this inside the file

"browser_action": {
      "default_popup": "hello.html",
      "default_icon": "icon.png"
    }

• Then add this to include a shortcut to display the HTML page

"commands": {
      "_execute_browser_action": {
        "suggested_key": {
          "default": "Ctrl+Shift+F"
        },
        "description": "Opens hello.html"
      }
    }