CREATE SIMPLE APPS FOR CHROME

chrome desktop wallpaperchrome desktop wallpaper

Today I learned how to create simple CHROME APP and extension to do for my website. Here is the tutorial to create first “hello world” application of chrome by your own. Here is the simple and easy methods to create your basic application for chrome. The three things must be noted  before creating an  chrome application.

SEE ALSO: TOOLBAR FOR FIREFOX IN 2 MINUTES

Firstly we need main three things 1. Manifest , 2.Background scripts , 3. Icons. 

#Manifest : Manifest file tells about your application to  chrome browser about permissions, call of scripts, how to launch and extra functions. It is stored as “manifest.json” json is a format for manifest files as like index.html in your websites.

#Backround scripts : Background scripts used to create functions to be done in your application (life cycle). It can be HTML file and associated with those files.

#Icons : Icons are pictures or logo to displayed in your app. The size of the picture must be 128*128  and 16*16.

STEPS TO CREATE CHROME APPS:

Step 1: Create the manifest file.
Step 2: Create the background script and files.
Step 3: Create a window page for your chrome application.
Step 4: Create the icons with size of 128*128 and 16*16.
Step 5: Launch your app to your browser
Step 6: Enable flags in your browser to run apps from your desktop.

chrome applicition for your desktop

 STEP 1: CREATE THE MANIFEST FILE:

Copy this CODE  in Notepad and this as “manifest .json” don’t forget to remove .txt on notepad file while you save.

{
 "name": "Hello World!",
 "description": "My first Chrome App.",
 "version": "0.1",
 "app": {
 "background": {
 "scripts": ["background.js"]
 }
 },
 "icons": { "16": "icon-16.png", "128": "icon-128.png" }
}

create manifest file for the version 2 (manifest is been updated  from the version 1) place 2 not as 2.0.

STEP 2: CREATE BACKGROUND SCRIPTS:

Create “n” number of file you want such as javascript , css and HTML files to run on background. Here I add javascript file to run background and saved them as background as “background.js” . Copy paste the code in notepad and save them as background.js, this code is for defining size of an window and HTML call. This is the code runs first while you click on app (like index file in your website). 

chrome.app.runtime.onLaunched.addListener(function() {
 chrome.app.window.create('techmaza.html', {
 'bounds': {
 'width': 400,
 'height': 500
 }
 });
});

STEP3: CREATING HTML FILE (WINDOW PAGE):

This code is for creating HTML file in your App while it is referred by background.js and this is the second running code on your app when it is been activated. HTML file can be of anything in HTML format here I place message as “hello world” in HTML named “techmaza.html”. As I used this name in javascript you can even change this as different name and add your name instead of “techmaza.html” in javascript.

<html>
 <head>
 </head>
 <body>
 <div>Hello world by techmaza.org</div>
 </body>
</html>

STEP4: CREATE A ICON IN TWO SIZES (128*128  and 16*16):

Create two icons for your chrome apps in size 128*128 and 16*16. Download the sample icon  for 128*128 and 16*16 from here.  And save them as named icon-16.png and icon-128.png as mentioned on manifest code. Now the source is ready club all these [manifest .json,background.js,techmaza.html and icons(128*128 and 16*16)] in one folder can be of any name here is save as techmaza download it for sample.

STEP5: LAUNCH YOUR APPLICATION:

Go to this link “chrome://flags” in your browser to see list of options in it search for an option “Experimental Extension APIs” by using find key (ctrl+f). Because it is tedious to find on those list of  options(flags) listed. Make “Experimental Extension APIs” an enable to check your application in your browser.

STEP6: RUN YOUR APPLICATION ON BROWSER:

Open settings portion on right top corner below your close button or try this method, type this on chrome browser “chrome://extensions” the list of extensions installed in your chrome is listed out. Open the check box “developer mode” and click load unpacked extension button to load your chrome apps your local hard disk to your browser. Before it upload it checks for an error in your script and indicates through message box.

chrome settings

Enable the app – you will will finding in your chrome apps – “chrome://apps“. These are the basic ses to create your “hello world” chrome application. To make our  app live on  chrome app store. Go to Chrome developer dashboard and upload it as zip file and pay 5$ as  registration fee. For more App Documents.

basic application creation for chrome browser

Launch Chrome App from desktop version. Download desktop version of apps  from chrome store.

BROWSE CHROME APP FROM - LAUNCHING CHROM APP FORM DESKTOP VERSION

Download the sample Chrome App here. ” Techmaza sample chrome app ” ,

Download Chrome Browser for Windows 8.