How to Build a Chrome Extension from Scratch | Chapter 1- An Introduction

Published in

Heptagon

6 min readFeb 27, 2019

In “How to Build a Chrome Extension Series”, we will learn how to build a Chrome Extension from scratch and also learn how to add some basic customization to these extensions. NOTE: Feel free to skip to any chapter of your liking by clicking on the links provided at the end of this post.

For now, here are the contents of Chapter 1: An Introduction to Chrome Extensions.

What are Chrome Extensions

Google defines Chrome Extensions as

Chrome Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

In other words, a Chrome extension is just a small software that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes.

Why do you need an extension in chrome?

A Chrome Extension acts as a catalyst that facilitates the completion of a business project by offering additional features and functionality. When you incorporate or develop new extensions for Chrome, it improves the functionality of the browser, making it more personalized while introducing new features to it.

This may also include modification of existing program behavior in order to keep it convenient for users. Businesses using Chrome as one of their default browsers bring much more personalized and results-oriented experience for users, thanks to chrome extensions.

You can visit the Chrome store to find some really useful extensions that are available free for use.

Well-known examples of trusted extensions

Below are a few extensions that are trusted by millions and are very useful indeed

Google Translate

View translations easily as you browse the web. By the Google Translate team. Highlight or right-click on a section of text and click on the Translate icon next to it to translate it to your language. Or, to translate the entire page you’re visiting, click the translate icon on the browser toolbar.

Grammarly

Grammarly Chrome Extension will make sure your messages, documents, and social media posts are clear, mistake-free, and impactful. Adding Grammarly to Chrome means that your spelling and grammar will be vetted on Gmail, Facebook, Twitter, Linkedin, Tumblr, and nearly everywhere else you write on the web.

Google Keep

Found a web page, image, or quote that you want to save for later? With the Google Keep Chrome Extension, easily save the things you care about to Keep and have them synced across all of the platforms that you use — including web, Android, iOS, and Wear. Take notes for additional detail and add labels to quickly categorize your note for later retrieval.

Ever note Web Clipper

Use the Ever note extension to save things you see on the web into your Ever note account. Clip the web pages you want to keep. Save them in Ever note. Easily find them on any device. This extension enables you to clip any article or web page, clip to a specific notebook and assign tags
and use Ever note to find clips on any device. Ever note Web Clipper can also be used for highlighting key text from any website or article, using text and visual callouts to draw attention, share and email clips or create a URL link.

Setting Up The Environment

Prerequisites

Here are a few things that should help you start writing codes for your Chrome Extension right away. Here is a list.

Prior Basic understanding of HTML and Javascript.
Source Code editing software installed in your computer (I prefer using Visual Studio Code)
A folder in any location to store the Chrome Extension files like manifest.json, background.js, popup.html, and so on.

Architecture

An extension’s architecture will depend on its functionality, but many robust extensions will include multiple components:

Manifest

Every extension contains a JSON-formatted manifest file, named manifest.json, that provides important information about the Chrome Extension.

Background Script

The background script is the extension’s event handler. It contains listeners for browser events that are important to the extension. It lies dormant until an event is fired then performs the instructed logic. An effective background script is only loaded when it is needed and unloaded when it goes idle.

Content Script

Extensions that read or write to web pages utilize a content script. The content script contains JavaScript that executes in the contexts of a page that has been loaded into the browser. Content scripts read and modify the DOM of web pages the browser visits.

Content scripts can communicate with their parent extensions by exchanging messages and storing values using storage API

Options page

Just as extensions allow users to customize the Chrome browser, the options page enables customization of the extension. Options can be used to enable features and allow users to choose what functionality is relevant to their needs.

UI Elements

An extension’s user interface should be purposeful and minimal. The UI should customize or enhance the browsing experience without distracting from it. Most extensions have a browser action or page action but can contain other forms of UI, such as context menus, use of the Omnibox, or creation of a keyboard shortcut.

Extension UI pages, such as a popup, can contain ordinary HTML pages with JavaScript logic. Extensions can also call tabs.create or window.open() to display additional HTML files present in the extension.

An extension using a page action and a popup can use the declarative content API to set rules in the background script for when the popup is available to users. When the conditions are met, the background script communicates with the popup to make its icon clickable to users.

That’s all. Now your environment is established and you are ready to code.
In the next chapter, we’ll be learning how to display an alert message using a bookmarklet. Feel free to reach out for any queries.

Summary

Extensions are bundles of codes that can be used to customize Google Chrome browsing experience.

I hope, the introduction to chrome extensions was informative and was able to pique your interest and in coming up with your own extensions. We’ll look at some ways you can do so in the upcoming chapters.