#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 !!!
Comments
Post a Comment