How To Create A Chrome Extension [Part 1]

44 Flares 44 Flares ×

Google Chrome is currently the best browser used world wide. There are thousands and thousands of chrome extensions. People would love to know on how to develop their own Chrome extension. Creating a chrome extension is lot more simpler than that of creating a Firefox extension. It would be easier to anyone who knows any of the web developing languages. Even HTML would do the job. But you need to know CSS and Java Script if you want to make your extension more beautiful. In this tutorial I would show you on how to create a Chrome extension which says Hello world. So lets get started.

Requirements :

Not a lot. Just a good knowledge on any of the web developing.

Getting in to work :

Your chrome extension will be contained in a folder. The folder must contain the following files and about creation of these files will be dealt in the later part of this article.

manifest.json
popup.html
icon.png
support files (CSS or JS Files)

Creating the manifest.json file :

This file contains all the details related to the Title, Version, Icon and the permission URL of your extension. The permission URL must be verified with Google Webmaster Tools. And so here is a sample of how the manifest.json should look.

{
"name": "Name of the extension",
"version": "Version of your application",
"description": "Your Description",
"browser_action":
{
"default_icon": "icon.png",
"popup":"popup.html"
},
"permissions": [ "the permission URL" ]
}

{

"name": "Name of the extension",

"version": "Version of your application",

"description": "Your Description",

"browser_action":

{

"default_icon": "icon.png",

"popup":"popup.html"

"permissions": [ "the permission URL" ]

}

The popup.html File :

This file should contain the contents of your extensions. That is what your extension should display. In this case we are creating a hello world program. It is not necessary for this file to be a HTML file. It can be a file which is created using any web developing language. But make sure that it is a single file. The coding of the file in our case should appear as follows.

&lt;h3&gt;Hello World. This is Srivathsan&lt;/h3&gt;

1	<h3>Hello World. This is Srivathsan</h3>

The icon.png File :

This file should contain the icon which will appear in the top right corner of the browser when this extension gets installed. Take a look at the picture below for a better illustration.

Icon

The Support Files :

I have already mentioned that this should a file which designs your extension. I am naming this file as extension.css. I am coding the file as follows.

body{
background-color:#60AFFE;
}
h1{
color:yellow;
text-align:center;
}

body{

background-color:#60AFFE;

}

h1{

color:yellow;

text-align:center;

}

The support files may be ‘n’ number of files depending on your design. It is not enough if you only create the support file. You should also add it to the popup.html file for you to get the design. So now lets add it to popup.html file.

<link rel=”stylesheet” type=”text/css” href=”extension.css” media=”screen” />
<h3>Hello World. This is Srivathsan</h3>

And now save all the files. Now lets see test this extension on your own chrome browser.

Open up the browser
Click on the wrench icon and navigate to Tools > Extensions. Check the developer mode and click on the Load Package button.

Extensions

Browse for your Folder and hit ENTER.
Now that you have loaded your Chrome extension. In the top right bar you will see the presence of your Chrome Extension. Click on that and see what it does.

Our Extension

Well that’s it about creating your Chrome Extension. In the second part I will show you guys on how to make your application go live on the chrome web store and it will be written soon. Any doubts ? Post them as comments. :)