#3 First Chrome App

Hello everyone and in this post we will create a simple "Hello World" Chrome app.
First of all , I need you guys to update Google Chrome to the latest version ( mine is Version 44.0.2403.61 beta-m (64-bit) ). You can force this update at Menu -->; About Google Chrome.

Second, we need to check Enable Developer mode at "chrome://extensions/" ( Menu-->; More Tools -->; Extensions ).

When you are done with this, Create a new Folder on Desktop ( say, chromeapp ). Also create a folder named "assets" inside chromeapp. We will be needing this for storing icons, pictures and fonts.



Now open Chrome Dev Editor (CDE) and open the chromeapp folder. Right click chromeapp and create a New File named manifest.json. Write the following code :-

{
  "name": "PolyChrome",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "My First Polymer Chrome App",
  "icons": {
    "16": "assets/app16.png",
    "128": "assets/app128.png"
  },
  "app": {
    "background" : {
      "scripts" : ["background.js"]
    }
  }
}

Note : Chrome apps must use manifest_version: 2,
            app16.png (16x16) and app128.png (128x128) are icons for our app ( link ),
            background.js is necessary for creating offline chrome app window.

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    'innerBounds' : {
        'minWidth': 500,
        'minHeight': 600,
        'height' : 1000,
        'width' : 600
      }
  });
});

index.html

<!DOCTYPE html>
<html>  
<head>    
<style>
@font-face {
 font-family: Handlee;
 src: url(assets/Handlee-Regular.ttf); }
h1 {
   color : blue;
   font-family: Handlee;}
</style> 
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

You can get the Handlee font from the link I mentioned above.But if you want to use a google web font, I am afraid you will be frustrated like me. Google avoids inline javascript using "Content Security Policy". CSP is a JavaScript security model that aims to prevent XSS and other attacks. In so doing, it prohibits the use of inline scripts.

You should make a habit of inspecting element and watching the console for errors like


In situations like this, either find an alternative like I did...saving font to assests folder, or when you are using javascript in your HTML, create separate JS file. An easy way would be Right Click the chromeapp folder in CDE and choose "Refactor for CSP".

Finally we have our First Chrome App. Now just click Run button and Viola !!!


                                                                                                                                             Next Post-->

Popular posts from this blog

Extract songs from Saavn app

Double-side Nav Drawer

15 Quotes that prove why Dhoni is The Greatest Captain Indian Cricket has ever seen