Sam Ruston

Web Browser extensions are the best way to increase a browser’s functionality. Millions of people use browser extensions, so building them is a great way to become popular. Here we are going to build a simple, Hello World Google Chrome extension. The extension will display a pop-up dialog when clicked which will show the text “Hello World”.
Chrome extensions are easy to build and can be quickly added to Google’s database thanks to their automatic uploader. Lets get started with the basics.
All Google Chrome extensions require at least two components. Most importantly is a manifest file which stores the extension’s information and tells the browser what to do when a particular action is called. Secondly, we will need an image for the extension’s icon. In this extension, we will also need an HTML file that displays the user interface.

Introduction
Before we can make the extension work, we must create a directory that will house our files. Within this directory you are going to need to create some files. These are:
. manifest.json
. popup.html
. icon.png
Make sure you create all of these files before you move on.

Manifest
Open the manifest.json file in your favourite text editor and copy the code below into it:

Before you can carry on, it is recommended that you alter the settings above.
Note: Only change the value and not the property name.

Icon
Your icon should have a transparent background and be a .png image file. The dimensions can be changed but it is recommended to stay between 20 x 20 and 36 x 36 pixels.

Popup.html
Assuming you have a basic grasp on CSS, HTML and maybe Javascript. You can change the contents of this file to whatever you like. It is basically like a mini web browser within the small pop-up window. Copy the code below into the file and then save it.

<style type=”text/css”>

body {

width:350px;

height:70px;

font-size:60px;

color:#000;

font-family:Arial;

text-align:center;

}

</style>

Hello World

Make sure you have the text “Hello World” as well.

Testing it Out!
Evidently you will need Google Chrome installed to test it out. To test it out, follow the instructions below:

1. Click the wrench icon in the top right of the Google Chrome window.

2. Now click the Extensions option in the menu.

3. When the page has appeared, click the Developer Mode link towards the top right, a new menu should now appear.

4. Click the first button with text Load unpacked extension.

5. Now choose the directory in which all of your new files are located in.

6. Simply click the icon in your Google Chrome navigation bar and see if it works. If it does, the text “Hello World” will appear in large black characters. If it doesn’t work, re-read this article and check your code.

If you have any problems, comment below and I will try my best. Hope this helps you get started!