How to create your first Google Chrome App?

Today I will show you that how can we create google chrome app.

It can be created bu following bellow steps:

Step 1: Create the manifest file
manifest.json file tells chrome about your app
It contains information like what your is, How to launch the app,if required any extra permissions,etc.

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

Detail about manifest.json Can be seen here

Step 2: Create the background script
Now you have to create new file named background.js with the following content:

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

Above code is Semple code. In this code onLaunched event will be fired when user will start the app. After that immediately it will open window for app of specified width & height.
It may also contain additional launch data, windows, listeners and post messages. All these are used by event page to manage the app.

Step 3: Create a window page
Create your window.html file:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, This is my first chrome app!</div>
  </body>
</html>

This is sample html page which will be shown when opening app window.

Step 4: Create the icons
Now you need to create icons & copy them in your app folder.
my Sample Icons are
logo-128.png & logo-16.png

Step 5: Launch your app

First we have to load our app, so to do that go to apps and extensions management page by clicking the settings icon and choosing Tools > Extensions. Just Make sure that Developer mode checkbox is selected.
Now click on Load unpacked extension button, select your app’s folder & click Ok.

Once you click ok your app will appear just bellow it like this.
chrome app load

Now open new tab and go to chrome://apps/ (type chrome://apps/ in your browser & hit enter), there you will see that your app is listed.

chrome app launch

Launch it & enjoy.
Click Here to get Zip file of my sample app.

More information about Chrome app can be found on Chrome Developer Center

admin