How to create a Google chrome extension

3 min readDec 27, 2018

Getting Started: Hello World chrome extension

Before we start building the extension, let’s learn some basic thing.

What are extensions?

Extensions are small software programs that enables users to add custom functionality and behavior to individual needs and preferences.

How extensions are made?

Extensions are built on web technologies such as HTML, JavaScript and CSS.

How chrome extensions are distributed?

Chrome extensions are distributed through the Chrome Developer Dashboard.

Where chrome extensions are published?

Chrome extensions are published to the Chrome Web Store.

Let’s built the Hello World extension…

Main idea

The main idea of this extension is, when we will click on the “Hello World” extension icon a Hello World text will popup. To do this, we have to create a new directory. We named this “HelloWorldExtension”. In this directory we need three files.

manifest.json
helloWorld.html file and a
icon.png file.

The directory will look like this.

I am using Sublime Text 3 for writing all this code.

1. manifest.json file

Extensions, themes, and applications are simply bundles of resources, wrapped up with a “manifest.json” file that describes the package’s contents.

Here’s the manifest.json file code for our Hello World extension.

{
 "name":"Hello world",
 "description": "Getting started with Hello World chrome extension",
 "version":"1.0.0",
 "manifest_version":2,
 "browser_action":{
  "default_popup":"helloWorld.html",
  "default_icon": "icon.png"
 }
}

Developers should currently specify “manifest_version”:2

If you provide 1, it won’t work, because “manifest_version”: 1 is now deprecated. If you provide greater than 2, it won’t work as well.

For more information about “manifest_version”:1 you can read this documentation.

In “browser_action” we set new “default_popup” to “helloWorld.html” and “default_icon” to “icon.png”. So when we will click on the extension icon “helloWorld.html” file will popup.

2. helloWorld.html

This is a simple html file with a text “Hello World!” in <h1> tag. This “Hello World!” message is shown when the extension icon is clicked. We put a simple style. The color of the text will be red and the width of the popup will be 150px.

<!DOCTYPE html>
<html>
<head></head>
<body>
 <h1 style="width: 150px; color: red;">Hello World!</h1>
</body>
</html>

3. icon.png

You can download the icon.png file from here.

You can download full code from here.

Congratulation!! You made your first chrome extension.

Now you can upload your extension in chrome web store for the world or you can upload it in your chrome browser locally.

How to upload your chrome extension in chrome browser?

For uploading your chrome extension hit this(chrome://extensions/) url into your browser or go to More tools and then Extensions.

After that click on this toggle button to ON Developer mode.

After that some options will appear. Click on the Load unpacked and search your “HelloWorldExtension” directory.

Now you can see your extension. Click on the icon and you will see Hello World Text.

If you update your extension, just click on the refresh button. Happy Learning.