1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
<meta name="doc-family" content="apps">
<h1>Create Your First App</h1>
<p>
This tutorial walks you through creating your first packaged app.
Packaged apps are structured similarly to extensions
so current developers will recognize the manifest and packaging methods.
When you're done,
you'll just need to produce a zip file of your code and assets
in order to <a href="publish_app.html">publish</a> your app.
</p>
<p>
A packaged app contains these components:
</p>
<ul>
<li>The <strong>manifest</strong> tells Chrome about your app, what it is,
how to launch it and the extra permissions that it requires.</li>
<li>The <strong>background script</strong> is used to create the event page
responsible for managing the app life cycle.</li>
<li>All code must be included in the package. This includes HTML, JS, CSS
and Native Client modules.</li>
<li>All <strong>icons</strong> and other assets must be included
in the package as well.</li>
</ul>
<p class="note">
<b>API Samples: </b>
Want to play with the code?
Check out the
<a href="https://github.com/GoogleChrome/chrome-app-samples/tree/master/hello-world">hello-world</a>
sample.
</p>
<h2 id="one">Step 1: Create the manifest</h2>
<p>
First create your <code>manifest.json</code> file
(<a href="manifest.html">Formats: Manifest Files</a>
describes this manifest in detail):
</p>
<pre>
{
"name": "Hello World!",
"description": "My first packaged app.",
"version": "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
</pre>
<p class="note">
<b>Important:</b>
Packaged apps <b>must</b> use
<a href="manifestVersion.html">manifest version 2</a>.
</p>
<h2 id="two">Step 2: Create the background script</h2>
<p>
Next create a new file called <code>background.js</code>
with the following content:
</p>
<pre>
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'width': 400,
'height': 500
});
});
</pre>
<p>
In the above sample code,
the <a href="app_lifecycle.html#lifecycle">onLaunched event</a>
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.
</p>
<h2 id="three">Step 3: Create a window page</h2>
<p>
Create your <code>window.html</code> file:
</p>
<pre>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
</pre>
<h2 id="four">Step 4: Create the icons</h2>
<p>
Copy these icons to your app folder:
</p>
<ul>
<li><a href="{{static}}/images/calculator-16.png">calculator-16.png</a></li>
<li><a href="{{static}}/images/calculator-128.png">calculator-128.png</a></li>
</ul>
<h2 id="five">Step 5: Launch your app</h2>
<h3>Enable flags</h3>
<p>
Many of the packaged apps APIs are still experimental,
so you should enable experimental APIs
so that you can try them out:
</p>
<ul>
<li>Go to <b>chrome://flags</b>.</li>
<li>Find "Experimental Extension APIs",
and click its "Enable" link.</li>
<li>Restart Chrome.</li>
</ul>
<h3>Load your app</h3>
<p>
To load your app,
bring up the apps and extensions management page
by clicking the wrench icon
<img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt=""
style="margin-top:0" />
and choosing <b>Tools > Extensions</b>.
</p>
<p>
Make sure the <b>Developer mode</b>
checkbox has been selected.
</p>
<p>
Click the <b>Load unpacked extension</b> button,
navigate to your app's folder
and click <b>OK</b>.
</p>
<h3>Open new tab and launch</h3>
<p>
Once you've loaded your app,
open a New Tab page
and click on your new app icon.
</p>
<p class="backtotop"><a href="#top">Back to top</a></p>
|
