Before starting to build a chrome extension, we have to know what is chrome extension and what it does and how chrome extension works.

Chrome extensions allow you to add functionality to Chrome. We can create chrome extension using some HTML, CSS and JavaScript that allows you to add some functionality to Chrome through some of the JavaScript APIs Chrome exposes.

An extension is basically just a web page that is hosted within Chrome and can access some additional APIs.

In this tutorial, I’m going to show you how to create a basic Chrome extension called a Browser Action extension. The extension puts a button in the Chrome toolbar that will show an HTML page when clicked.

If you have ever built a web page then you can write the chrome extension code easily.

Chrome extensions can also be created to work on certain pages by using Page Actions, they can run code in the background using Background Pages, and they can modify an existing page loaded in the browser using Content Scripts.

Start Creating the extension
First of all we have to create a folder name myextension. create the following files within it.
1) manifest.json
2) Index.html
3) extension.js
4) icon.png

The manifest.json file contains the important information about your extension, like its name and which permissions it needs.

The main file is manifest.json file. The entry point of your extension is the manifest.json file. The manifest.json file tells Chrome important information about your extension, like its name .It should contain a valid JSON object.
The following file is the sample manifest.json for our example

  "manifest_version": 2,

  "name": "Jquerytraining Plugin",
  "description": "This extension will give you new post of jquery training",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "index.html"
  "permissions": [

Now the web page or index.html for our extension is as below

<title>Jquery training Extension</title>
<script src="extension.js"></script>
<h1>Jquery training chrome extension demo</h1>


The extension.js is require if need to do any action in our plugin.
The icon.png is the icon which will show in the chrome toolbar as icon of the extension

now go to address bar and type


Now check the developer mode check box and then load the unpacked extension button

Note: after check developer mode check box load the unpacked extension will appear

Leave comment

Your email address will not be published. Required fields are marked with *.