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 😀

What are chrome extensions

Guys,

Lets dive into the chrome ocean today..lets see how to build a chrome extension easily.

Developing extensions for your favorite browser helps not only you, but also other programmers, who sooner or later will be in the same situation. If something is missing, you can build it yourself and with Chrome this is really easy.

Architecture:

architecture

Manifest

The entry point of your extension is the manifest.json file. It should contain a valid JSON object. For example:

1
2
3
4
5
6
7
8
9
{
    "name": "BrowserActionExtension",
    "version": "0.0.1",
    "manifest_version": 2,
    "browser_action": {
        "default_title": "That's the tool tip",
        "default_popup": "popup.html"
    }
}

The required properties are name, version, and manifest_version. The version can be anywhere from one to four, dot-separated integers. It’s something which is used by Google’s autoupdate system. That’s how it knows when to update your extension. The value of the manifest_version should be the integer 2.

The manifest could contain other properties depending on what kind of extension you need, but I’ll describe only those which I find to be more interesting.

Background Pages

Every extension has an invisible background page which is run by the browser. There are two types – persistent background pages and event pages. The first one is active, all of the time. The second is active only when it is needed

Here is how you should describe it in the manifest:

1
2
3
4
"background": {
    "scripts": ["background.js"],
    "persistent": false/true
}

As you may have guessed, if the persistent property is false then you are using event pages. Otherwise, you are working with a persistent background page.

Content Script

If you need access to the current page’s DOM, then you have to use a content script. The code is run within the context of the current web page, which means that it will be executed with every refresh. To add such a script, use the following syntax.

1
2
3
4
5
6
"content_scripts": [
    {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]
    }
]

Keep in mind that the value of matches determines for which pages your script will be used. Read more about matches patterns here.

User Interface

There are several ways to build the UI of your extension. Here are the four most popular.

Browser Action

Most developers use the browser_action property to build their plugins. Once you set it, an icon representing your extension will be placed on the right side of the address bar. Users can then click the icon and open a pop-up which is actually HTML content controlled by you.

The manifest files should contain the following data:

1
2
3
4
5
6
7
8
"browser_action": {
    "default_icon": {
        "19": "icons/19x19.png",
        "38": "icons/38x38.png"
    },
    "default_title": "That's the tool tip",
    "default_popup": "popup.html"
}

The default_title is a little tool tip which is shown when the user mouses over your icon. default_popup is actually the HTML file which is loaded inside the pop-up. There is also a badge which you can place over your icon. You can do that inside of your background script. For example:

1
chrome.browserAction.setBadgeText({text: "yeah"});

Page Action

The page_action property is similar to the browser action, but the icon is shown inside the address bar.

For example, the RSS icon will be shown only if the current page contains a link to the RSS feed. If you need to see your icon all the time, it is good to use browser_action directly.

To add the page action, type the following code inside your manifest:

1
2
3
4
5
6
7
8
"page_action": {
    "default_icon": {
        "19": "images/icon19.png",
        "38": "images/icon38.png"
    },
    "default_title": "Google Mail",
    "default_popup": "popup.html"
}

Unlike the browser action’s icon, the page action’s icon doesn’t have badges.

DeveloperTools

I use DeveloperTools a lot and it’s nice that Chrome offers a method for adding new tabs to these tools. The first thing you should do is add an HTML page which will be loaded when the panel is opened:

1
"devtools_page": "devtools.html"

There’s no need to put any HTML inside the page, except for linking in a JavaScript file, which will create the tab:

1
<script src="devtools.js"></script>;

And then include the following code inside the devtools.js file:

1
2
3
4
5
6
7
8
chrome.devtools.panels.create(
    "TheNameOfYourExtension",
    "img/icon16.png",
    "index.html",
    function() {
    }
);

Now the above code will add a new tab with a name of TheNameOfYourExtension and once you click on it the browser will load index.html inside the DeveloperTools.

How to install your chrome extensions?

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

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

For more in detail..pls click here

Sources:

https://developer.chrome.com/extensions/getstarted

http://www.lullabot.com/blog/article/creating-simple-chrome-extension

http://www.sitepoint.com/build-your-own-chrome-extension-a-google-documents-word-count-tool/

http://www.9lessons.info/2011/03/how-to-create-chrome-extension.html

http://css-tricks.com/colorpeek-part-2-building-first-chrome-extension/

http://markashleybell.com/building-a-simple-google-chrome-extension.html

http://code.tutsplus.com/tutorials/developing-google-chrome-extensions–net-33076

http://lifehacker.com/5857721/how-to-build-a-chrome-extension

http://tutorialzine.com/2010/06/making-first-chrome-extension/