Tutorial to a create Google chrome app extension

Hey guys,in this post,I am going to share with you on how to create a simple Hello World app for Google Chrome App or extension. Why Hello world? Why not a tutorial to build other app?

Ok, lets make things simple. First of all,based on my understanding, in order to create a Google chrome app/extension. It is just like build a html website and package it with manifest.json files.
In Google chrome app/extension. It's just need a file with

• a manifest.json file
• a .html file
• a .css file
• a. javascript file (can also include jQuery inside javascript)

Take note here,please don't include javaScript code's in HTML file. Chrome hate it! Make sure save it in separate file. So,if you good with building websites, i dont think that will be a problem. Its same.

So,lets start. All you need is ideas,a Chrome web browser and a text editor.

1. Create a folder to save all your files inside. Can put anywhere,make sure you remember it. Prefer to put it in Desktop(for windows). Like me,i create in Home folder in Ubuntu/Linux. So,name anything for your folder. Like me,i create a folder called "chrome app".

2. Open a textEditor like notepad,adobe dreamweaver,sublime text,or etc. I'm using Sublime text 2.
So now,we will create a manifest.json file and save in chrome app folder that you created few minutes ago.

This is the code for manifest.json .

{
 "manifest_version": 2,

 "name": "hello world",
 "description": "this extension demonstrates a browser action",
 "version": "1.0",

 "browser_action":{
 "default_popup": "hello.html"
 }
}

In this file, you are telling the properties of your app/extension such as which file it should open when the user click the app/extension icon, manifest version, permission to access user details,network,API and etc.

3. Now,lets create a HTML file called hello.html

This is the HTML code

4. Now lets test it. So ,now go to your chrome browser,load extension. Just type on your URL bar  chrome://extensions/ . And then click developer mode and open "Load unpacked extension"

After you clicked , Load unpacked extension,choose the folder that we save manifest.json & hello.html which is "chrome app" folder and click "open".

and it will install the extension you have created. 

so now the click the icon that located next to the URL bar. it look like a piece of puzzle. And look for the magic by yourselves. :) Thats your first chrome app. Wohoo!

5. Hope you enjoyed it. This is just a simple hello world app. If you want to know more tutorial and understanding of how this things work. Here are the useful links that you may click to learn more.

• https://developer.chrome.com/extensions/getstarted.html
• http://tutorialzine.com/2010/06/making-first-chrome-extension/
• http://www.labnol.org/software/create-chrome-apps-extensions/27958/

If you dont know on how to code just goto www.codecademy.com to learn in easy way. I'm sure you can learn coding also. You can learn HTML,CSS,jQuery,and javaScript in a month. 

Feel the to comment / mock me. :)