a. Three Additional Files to Create Your App
You will need three files. You will also need to rename your dice.html to local_dice.html
These Files go into the same folder as all of your images and your html files.
You are about to use an object called "webview" that permits you to employ a web page inside your app. So, you can create almost any type of web page using HTML, CSS, and Javascript and then have it evolve into a "hybrid" app. in this case a Chrome App that can run on any PC, Chromebook, or Mac that with Chrome installed.
File 1:
manifest.json
You update the red text with key info for your app.
Create icons as indicated. Name your icons intuitively.
{
"app": {
"background": {
"scripts": ["background.js"]
}
},
"manifest_version": 2,
"name": "Mister iCan's Roll the Dice",
"version": "1.0",
"description": "Roll 2 Dice and Get the Total",
"icons": { "16": "five16.png","32": "five32.png","48": "five.png","64": "five.png","96":
"five96.png","128": "five128.png" },
"offline_enabled": true,
"permissions": [
"webview"
],
"webview": {
"partitions": [
{
"name": "static",
"accessible_resources": ["header.html", "footer.html", "static.png"]
},
{
"name": "trusted*",
"accessible_resources": ["local_*.html", "*.png", "*.js"]
}
]
}
}
File 2:
background.js
chrome.app.runtime.onLaunched.addListener(function( )
{
chrome.app.window.create('window.html', {
'bounds': {
'width': 820,
'height': 620
}
});
});
File 3:
window.html
Set up your own CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:blue}
h2 {color:black}
h1 {color:red}
</style>
</head>
<body>
<center><table width = "100%">
<tr>
<center><webview id="trusted-foo" src="local_dice.html" frameborder="2" allowfullscreen
style="width:800px; height:600px" partition="trusted"></webview></center>
</tr>
</table></center>
</body>
</html>