The Chrome web browser is very extensible. It seems like there is a plugin for just about everything you could ever possibly want.

Have you ever wanted to create your own Chrome extension? Have you ever wondered how difficult the process would be? Well, it turns out it is a lot easier than you ever imagined.

What is a Chrome Extension?

A Chrome extension is just some HTML, CSS, and JavaScript that allows you to add some functionality into the Chrome browser through some APIs.

Let’s get started!

Create the Project

Photo by Max Duzij on Unsplash

The first thing we need to do is create the project and all the files we need for our extension. Let’s start by creating a new directory that we’ll call “Demo Extension”. Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files.

All Chrome extensions require a manifest file. This manifest file tells everything to the chrome it needs to know to properly load up in the chrome.

Create the Manifest

Let’s create the manifest.json file inside the project directory. This serves a similar purpose as package.json , providing every important information.

Here’s an example:

manifest.json

Let’s discuss each term.

Developers should specify which version of the manifest specification their package targets by setting a manifest_version key in their manifests.

Current Version:

{
  ...,
  "manifest_version": 2,
  ...
}

• Manifest version 1 was deprecated in Chrome 18 and onwards!
• **name** and **description** can be anything you’d like.
• **version** is your chrome extension version.
• **short_name** is a short version of the app’s name. It is an optional field.
• **name** and**short_name** are identifiers of the app.
• The **permissions** depend on what the extension needs to do.

A list of all **permissions**can be found in chrome’s extension docs. I would suggest giving it a read.

#web-development #javascript #software-development #chrome #programming