How to create a simple chrome extension

Guys,

Today we will see how to create your own simple “Hello world” extension.

It’s pretty simple to develop a simple extension..

Worried how? All you need is just basic knowledge on Javascript and HTML. Before going deep into development of extension let me brief on different types of extensions.

Types of extensions:

Basically there are 4 types of extensions..

1.Browser Actions: add an icon next to your address bar (i.e. to show a popup)

2.Page Actions: show a little icon in the address bar

3.Desktop notifications: show notifications on your desktop

4.Omnibox: add functionality to your address bar with predefined keywords

In this tutorial i will focus more on browser action..

Let’s Start..

To build your own chrome extension, first create a folder in your local drive with some name..

In my example I named it as “Hello World”

In this folder, we need to hold mainly

  1. Manifest.json
  2. Popup.html
  3. Youricon.png
  4. some.js

I hope you are aware of manifest.json file from our previous post. Still i will do explain..

Manifest file

The manifest file contains all the information Chrome needs to understand how your extension should work.

Copy the below code to manifest.json file..

{

 “name”: “test extension”,

 “description”: “testing popup with hello world message”,

 “version”: “1”,

 “manifest_version”: 2,

 “permissions”: [“tabs”, “http://*/*”, “background”],

 “content_scripts”: [{“matches”: [“http://*/*”%5D,”js”: [“some.js”]}],

 “browser_action”: {“default_icon”: “16×16.png”,”default_popup”: “popup.html”}

}

Now save this file as “manifest.json” in your extension folder(here Hello World).

Note: notice every rule is ended with a comma except the last one.

Now let me go through the fields in manifest.json file. You can have a look of full field summary here

#  permissions: You need to set permissions if you want to use some of the API functionality of Chrome extensions.

  • tabs: if you want to access tabs or detect when something changes in a tab.
  • url: determine which webpages you want your extension to work with (use http://*/* for all websites).
  • background: if you want to use a background page (clarified further down this page).

#  background_page: specify the file that will serve as your background page.(this had been removed in latest version chromes..so this wont support now). For your understanding I still mentioned here..

# content_scripts

  • matches: specify for which webpages the content script should be injected.
  • js: specify the file that will serve as your content script.

#  browser_action

  • default_icon: specify where the icon for your extension is located (must be 16px wide and 16px high) in your extension folder.
  • popup: specify the file that will serve as your popup page.

Popup.html

Most Chrome extensions use a popup window that shows up if you click on an extension icon. This popup browser action, as Google likes to call it, is particularly useful if you want to show information to your users without interrupting the browsing experience.

To show “Hello World!” to your users, create a new file called “popup.html” and add the following lines of code.

<html>  <head><title>Hello World!</title></head>

  <body>

    <p>Hello World!</p>

  </body>

</html>

But since we also specified other files in our manifest file we must add those files to the folder as well. So before you can fire up your extension, create the next dummy files, which we’ll be needed to run this extension for now.

some.js: create an empty Javascript file

Youricon.png: you need a 16 by 16px icon

How to install your chrome extensions?

In your browser’s address bar, just type in:

1 chrome://extensions

Make sure that you check Developer mode and click the Load unpacked extension… button. Then simply select the folder from your hard disk which contains the extension’s files.

extensionspanel

Your extension should now be loaded in your Chrome browser. To confirm if everything went well, check if a new icon appeared next to the address bar like the following image.

14-03-2014 18-03-57

You even can download my example here

I hope its clear now.. Stay tuned to Sathyalog 😀

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s