Step 1: Create the manifest

Every extension, installable web app, and theme has a JSON-formatted manifest file, named manifest.json, that provides important information. First create your manifest.json file using the format shown here.

{
  "name": "Code Formatter",
  "description": "A chrome plugin to format your HTML, CSS, JS, SQL or JSON code.",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "icons/logo.png", "128": "icons/logo-128.png"}
}

Step 2: Create the background script

Next create a new file called background.js with the following content:

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

In the above sample code, the onLaunched event will be fired when the user starts the app. It then immediately opens a window for the app of the specified width and height. Your background script may contain additional listeners, windows, post messages, and launch data, all of which are used by the 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, world!</div>
  </body>
</html>

Step 4: Create the icons

Copy these icons to your app folder: – logo-128.png and logo-16.png

Step 5: Launch your app

To load your app, bring up the apps and extensions management page by clicking the settings icon and choosing Tools > Extensions. Make sure the Developer mode checkbox has been selected. Click the Load unpacked extension button, navigate to your app’s folder and click OK.

CodeFormatter-Upload CodeFormatter-ChromeApp CodeFormatter-AppLaunch

ReferencesGoogle Chrome – Create Your First App