OLD | NEW |
| (Empty) |
1 {{+content:partials.site}} | |
2 <div class="pillar-content"> | |
3 | |
4 <h1>Chrome Platform</h1> | |
5 | |
6 <section class="article-list g-section"> | |
7 <article class="new"> | |
8 <h4 class="label">Apps</h4> | |
9 <h2>Learn Basics</h2> | |
10 <p>Develop your first Chrome App and discover | |
11 how they look, how they behave, and how they are modeled. | |
12 Launch your Apps from your native platform | |
13 using the | |
14 <a href="http://chrome.blogspot.com/2013/12/a-new-breed-of-chrome-apps-now.h
tml">Chrome App Launcher</a>: | |
15 </p> | |
16 <p><a href="/apps/first_app.html">Learn more</a></p> | |
17 <img src="{{static}}/images/platform-pillar/chrome_apps.png" alt="500px Chro
me App launched from Chrome App Launcher"> | |
18 </article> | |
19 | |
20 <article> | |
21 <h4 class="label">Apps</h4> | |
22 <h2>Learn with Codelab</h2> | |
23 <p>The goal of this codelab is to get you building Chrome Apps fast. | |
24 Once you've completed this codelab, you will have a simple Todo app.</p> | |
25 <p><a href="/apps/app_codelab1_setup.html">Learn more</a></p> | |
26 <img src="{{static}}/images/platform-pillar/todo_codelab.png" | |
27 width="110%" | |
28 alt="Create this simple Todo Chrome App."> | |
29 </article> | |
30 | |
31 <article> | |
32 <h4 class="label">Apps</h4> | |
33 <h2>Samples</h2> | |
34 <p>Browse official Chrome Apps samples in the | |
35 <a href="https://github.com/GoogleChrome/chrome-app-samples">chrome-apps-sam
ples GitHub repository</a>. | |
36 The <a href="https://github.com/GoogleChrome/chrome-app-samples/blob/master/
README.md">README.md</a> | |
37 lists each sample's APIs and provides a link to download in the Chrome Web S
tore.</p> | |
38 <img src="{{static}}/images/platform-pillar/chrome_app_samples.png" alt="Chr
ome apps samples maintained in GitHub repository"> | |
39 </article> | |
40 | |
41 <article> | |
42 <h4 class="label">Apps</h4> | |
43 <h2>Reference</h2> | |
44 <p>Chrome Apps have access to Chrome APIs not available to traditional web s
ites. | |
45 With these APIs, | |
46 you can build powerful apps that interact | |
47 with network and hardware devices, media tools, and much more. | |
48 <ul> | |
49 <li><a href="/apps/api_index.html">Chrome Platform APIs</a>: lists APIs
available in each Chrome channel</li> | |
50 <li><a href="/apps/manifest.html">Manifest File Format</a>: lists suppor
ted manifest fields</li> | |
51 <li><a href="/apps/app_deprecated.html">Disabled Web Features</a>: lists
disabled open web platform features</li> | |
52 </ul></p> | |
53 <p><a href="/apps/api_index.html">Learn more</a></p> | |
54 </article> | |
55 | |
56 <article> | |
57 <h4 class="label">Apps</h4> | |
58 <h2>Develop in Cloud</h2> | |
59 <p>Chrome Apps leverage the Google Cloud Platform to store and access data. | |
60 They work offline by default | |
61 and can sync back to the cloud once connectivity is restored. | |
62 Use the | |
63 <a href="/apps/syncFileSystem.html">syncFileSystem API</a> | |
64 to save and synchronize caching data in Google Drive.</p> | |
65 <p><a href="/apps/offline_apps.html">Learn more</a></p> | |
66 <img src="{{static}}/images/platform-pillar/sync_file_system.png" alt="Use G
oogle Drive to store Chrome Apps data in the cloud."> | |
67 </article> | |
68 | |
69 <article> | |
70 <h4 class="label">Apps</h4> | |
71 <h2>Network and Hardware APIs</h2> | |
72 <p> Chrome Apps can interact with low-level system services. | |
73 Using the network and hardware APIs, they can: | |
74 <ul> | |
75 <li>Act as <a href="/apps/socket.html">network clients</a> | |
76 for TCP and UDP connections.</li> | |
77 <li>Communicate with <a href="/apps/usb.html">usb devices</a>.</li> | |
78 <li>Read and write to devices connected to <a href="/apps/serial.html">ser
ial ports</a>.</li> | |
79 <li>Connect to <a href="/apps/bluetooth.html">bluetooth devices</a>.</li> | |
80 </ul></p> | |
81 <p><a href="/apps/app_usb.html">Learn more</a></p> | |
82 </article> | |
83 | |
84 <article> | |
85 <h4 class="label">Extensions</h4> | |
86 <h2>Learn Basics</h2> | |
87 <p>Extensions are small software programs that can modify and | |
88 enhance the functionality of the Chrome browser. | |
89 Write extensions using web technologies: HTML, JavaScript, and CSS.</p> | |
90 <p><a href="/extensions/overview.html">Learn more</a></p> | |
91 <img src="{{static}}/images/platform-pillar/extensions.png" alt="Browser act
ion and page actions are common extension types."> | |
92 </article> | |
93 | |
94 <article> | |
95 <h4 class="label">Extensions</h4> | |
96 <h2>Getting Started Tutorial</h2> | |
97 <p>This tutorial walks you through the construction | |
98 of a simple browser action extension. | |
99 Clicking the browser action UI element opens a pop-up window.</p> | |
100 <p><a href="/extensions/getstarted.html">Learn more</a></p> | |
101 <img src="{{static}}/images/platform-pillar/one_click_kittens.png" alt="One-
click kittens tutorial"> | |
102 </article> | |
103 | |
104 <article> | |
105 <h4 class="label">Extensions</h4> | |
106 <h2>Samples</h2> | |
107 <p>Browse official Chrome Extensions samples; | |
108 each sample lists API methods and links to source files. | |
109 Filter by keyword or API:</p> | |
110 <p><a href="/extensions/samples.html">Learn more</a></p> | |
111 <img src="{{static}}/images/platform-pillar/extension_samples.png" alt="Exte
nsion samples page"> | |
112 </article> | |
113 | |
114 <article> | |
115 <h4 class="label">Extensions</h4> | |
116 <h2>Reference</h2> | |
117 <p>Extensions are essentially web pages; | |
118 they can use all APIs that the browser provides to web pages. | |
119 Using Extensions APIs, they can also interact programmatically with browser
features | |
120 such as bookmarks and tabs. | |
121 Read the reference docs to find out more: | |
122 <ul> | |
123 <li><a href="/extensions/whats_new.html">What's New</a>: lists what's ne
w in stable Chrome versions</li> | |
124 <li><a href="/extensions/api_index.html">Chrome Platform APIs</a>: lists
APIs available in each Chrome channel</li> | |
125 <li><a href="/extensions/manifest.html">Manifest File Format</a>: descri
bes supported manifest fields</li> | |
126 <li><a href="/extensions/permission_warnings.html">Permissions</a>: desc
ribes permission warnings</li> | |
127 </ul> | |
128 </p> | |
129 <p><a href="/extensions/api_index.html">Learn more</a></p> | |
130 </article> | |
131 | |
132 <article class="new"> | |
133 <h4 class="label">Extensions</h4> | |
134 <h2>Distribute Extensions</h2> | |
135 <p><a href="/extensions/packaging.html">Upload your extension</a> | |
136 to test it in developer channels, | |
137 then <a href="/extensions/hosting.html">publish your extension</a> | |
138 in the Chrome Web Store. | |
139 New feature! You can now | |
140 <a href="/webstore/payments-otp">monetize your extensions</a>!</p> | |
141 <p><a href="/extensions/hosting.html">Learn more</a></p> | |
142 <img src="{{static}}/images/platform-pillar/upload_extensions.png" alt="Uplo
ad extensions on chrome://extensions page."> | |
143 </article> | |
144 <article> | |
145 <h4 class="label">Extensions</h4> | |
146 <h2>Themes</h2> | |
147 <p>A theme is a special kind of extension that changes the way the browser l
ooks. | |
148 Themes are <a href="/extensions/packaging.html">packaged</a> like regular ex
tensions, | |
149 but they don't contain JavaScript or HTML code. | |
150 Distribute your themes in the | |
151 <a href="https://chrome.google.com/webstore/category/themes">Chrome Web Stor
e</a>. | |
152 </p> | |
153 <p><a href="/extensions/themes.html">Learn more</a></p> | |
154 <img src="{{static}}/images/platform-pillar/theme.png" alt="Grass theme"> | |
155 </article> | |
156 | |
157 <article class="new"> | |
158 <h4 class="label">Native Client</h4> | |
159 <h2>Learn Basics</h2> | |
160 <p>Native Client is a sandbox for running compiled C and C++ code in the bro
wser. | |
161 Portable Native Client extends that technology with architecture independenc
e, | |
162 letting developers compile their code once to run in any website and on any
architecture.</p> | |
163 <p><a href="/native-client/index.html">Learn more</a></p> | |
164 <img src="{{static}}/images/platform-pillar/pnacl_intro.png" alt="Watch a li
ve recorded conversation on Native Client."> | |
165 </article> | |
166 | |
167 <article> | |
168 <h4 class="label">Native Client</h4> | |
169 <h2>Tutorial</h2> | |
170 | |
171 <p>This multi-part tutorial explains how to get started developing applicati
ons with Native Client.</p> | |
172 | |
173 <p><a href="/native-client/devguide/tutorial/tutorial-part1">Part one</a> | |
174 shows how to build and run a simple web application | |
175 using Portable Native Client (PNaCl).</p> | |
176 | |
177 <p><a href="/native-client/devguide/tutorial/tutorial-part2">Part two</a> | |
178 shows how to convert the finished PNaCl web application | |
179 to use the Native Client SDK build system and common JavaScript files. | |
180 </p> | |
181 <p><a href="/native-client/devguide/tutorial/tutorial-part1">Learn more</a><
/p> | |
182 </article> | |
183 | |
184 <article> | |
185 <h4 class="label">Native Client</h4> | |
186 <h2>SDK</h2> | |
187 <p>Follow these steps to download | |
188 and install the Native Client SDK: | |
189 <ol> | |
190 <li>Download the SDK update utility and unzip.</li> | |
191 <li>See which versions are available.</li> | |
192 <li>Run <code>naclsdk</code> with the “update” command | |
193 to download particular bundles that are available.</li> | |
194 </ol> | |
195 </p> | |
196 <p><a href="/native-client/sdk/download">Learn more</a></p> | |
197 </article> | |
198 | |
199 <article> | |
200 <h4 class="label">Native Client</h4> | |
201 <h2>Development Cycle</h2> | |
202 <p>End-to-end native client development workflow: | |
203 <ul> | |
204 <li><a href="/native-client/devguide/devcycle/building.html">Build</a> | |
205 Native Client modules.</li> | |
206 <li><a href="/native-client/devguide/devcycle/running.html">Run</a> | |
207 Native Client applications during development.</li> | |
208 <li><a href="/native-client/devguide/devcycle/debugging.html">Debug, monitor
, and measure</a> | |
209 Native Client application performance.</li> | |
210 </ul></p> | |
211 <p><a href="/native-client/devguide/devcycle/building.html">Learn more</a></
p> | |
212 </article> | |
213 | |
214 <article> | |
215 <h4 class="label">Native Client</h4> | |
216 <h2>Coding Your Application</h2> | |
217 <p>Dive deeper into Native Client development. | |
218 Learn: | |
219 <ul> | |
220 <li>How Native Client applications are | |
221 <a href="/native-client/devguide/coding/application-structure.html">structur
ed</a></li> | |
222 <li>Which classes and functions to implement in your | |
223 <a href="/native-client/devguide/coding/native-client-modules.html">Native Clien
t module</a> for Chrome to load, initialize, and run it</li> | |
224 <li>How to use the | |
225 <a href="/native-client/devguide/coding/message-system.html">messaging syste
m</a> | |
226 to communicate between the JavaScript code and | |
227 the Native Client module's C or C++code</li> | |
228 </ul> | |
229 And much more!</p> | |
230 <p><a href="/native-client/devguide/coding/application-structure.html">Learn
more</a></p> | |
231 </article> | |
232 | |
233 <article> | |
234 <h4 class="label">Native Client</h4> | |
235 <h2>Pepper API</h2> | |
236 <p>The Pepper API lets Native Client modules communicate | |
237 with the hosting browser and access system-level functions in a safe and por
table way. | |
238 Pepper has both a | |
239 <a href="/native-client/pepperc/index.html">C API</a> and a | |
240 <a href="/native-client/peppercpp/index.html">C++ API</a>.</p> | |
241 | |
242 <p>These APIs are generally divided into two parts: | |
243 <ul><li>Functions implemented in the browser | |
244 that you call from your Native Client module</li> | |
245 <li>Functions the browser invokes so you must implement them | |
246 in your Native Client module | |
247 </li> | |
248 </ul> | |
249 </p> | |
250 <p><a href="/native-client/overview.html#pepper-plugin-api">Learn more</a></
p> | |
251 </article> | |
252 | |
253 <article> | |
254 <h4 class="label">Store</h4> | |
255 <h2>What Is the Chrome Web Store?</h2> | |
256 <p>The Chrome Web Store lets you | |
257 <a href="/webstore/publish.html">publish</a> | |
258 your Chrome Apps, Extensions, and Themes | |
259 where Chrome users can easily find them.</p> | |
260 <p><a href="/webstore/index.html">Learn more</a></p> | |
261 <img src="{{static}}/images/platform-pillar/chrome_web_store.png" alt="Publi
sh apps, extensions, and themes in Chrome Web Store."> | |
262 </article> | |
263 | |
264 <article> | |
265 <h4 class="label">Store</h4> | |
266 <h2>Tutorial: Getting Started</h2> | |
267 <p>Follow these simple steps | |
268 to publish your app, extension, | |
269 or theme to the Chrome Web Store: | |
270 <ol> | |
271 <li>Create manifest file.</li> | |
272 <li>Get image assets.</li> | |
273 <li>Test app.</li> | |
274 <li>Zip app.</li> | |
275 <li>Upload your app to store.</li> | |
276 </ol> | |
277 </p> | |
278 <p><a href="/webstore/get_started_simple.html">Learn more</a></p> | |
279 </article> | |
280 | |
281 <article> | |
282 <h4 class="label">Store</h4> | |
283 <h2>Branding</h2> | |
284 <p>Follow the Chrome Web Store branding guidelines | |
285 for supplying images and promotional assets.</p> | |
286 <p><a href="/webstore/branding.html">Learn more</a></p> | |
287 <img src="{{static}}/images/platform-pillar/ChromeWebStore_BadgeWBorder_v2_2
06x58.png" alt="Using the Chrome Web Store badge"> | |
288 </article> | |
289 | |
290 <article class="new"> | |
291 <h4 class="label">Store</h4> | |
292 <h2>Monetizing</h2> | |
293 <p>Two options for charging your users: | |
294 Chrome Web Store Payments for | |
295 <a href="/webstore/payments-otp">one-time payments</a> or | |
296 <a href="/apps/google_wallet.html">Google Wallet for Digital Goods</a> | |
297 to sell digital or virtual goods in your Chrome Apps or Extensions.</p> | |
298 <p><a href="/webstore/money.html">Learn more</a></p> | |
299 <img src="{{static}}/images/platform-pillar/wallet-review.png" | |
300 width="250px" | |
301 alt="Using Google Wallet in apps and extensions"> | |
302 </article> | |
303 | |
304 <article> | |
305 <h4 class="label">Store</h4> | |
306 <h2>Publishing</h2> | |
307 <p>When your app, extension, or theme is finished (if not before), | |
308 upload it with the | |
309 <a href="https://chrome.google.com/webstore/developer/dashboard">Developer D
ashboard</a>. | |
310 Uploading generates an app ID, | |
311 which you may need to complete your application code.</p> | |
312 <p><a href="/webstore/publish.html">Learn more</a></p> | |
313 <img src="{{static}}/images/platform-pillar/store_developer_dashboard.png" a
lt="Chrome Web Store Developer Dashboard"> | |
314 </article> | |
315 | |
316 <article> | |
317 <h4 class="label">Store</h4> | |
318 <h2>Best Practices</h2> | |
319 <p>When publishing in the store, | |
320 follow these <a href="/webstore/best_practices.html">best practices</a>: | |
321 <ul> | |
322 <li>Support Google Accounts.</li> | |
323 <li>Keep ex-user data for 30 days.</li> | |
324 <li>Cache license data.</li> | |
325 <li>Create a compelling store listing.</li> | |
326 </ul> | |
327 </p> | |
328 <p><a href="/webstore/best_practices.html">Learn more</a></p> | |
329 </article> | |
330 | |
331 </section> | |
332 | |
333 <section class="g-section g-tpl-33-67" id="further-resources"> | |
334 <h2>Further Resources</h2> | |
335 <div class="g-unit g-first"> | |
336 <article class="g-content"> | |
337 <h2 class="school">Office Hours</h2> | |
338 <p>Watch demos of the Platform and get help in Chrome Office Hours on | |
339 <a href="https://developers.google.com/live/chrome/">Google Developers
Live</a>.</p> | |
340 </article> | |
341 </div> | |
342 <div class="g-unit"> | |
343 <div class="g-section g-tpl-50-50"> | |
344 <div class="g-unit g-first"> | |
345 <article class="g-content"> | |
346 <h2 class="chat">Ask Questions</h2> | |
347 <p>Ask questions and get answers on these Stack Overflow channels: | |
348 <ul> | |
349 <li><a href="http://stackoverflow.com/questions/tagged/google-chrome">
google-chrome</a> | |
350 </li> | |
351 <li><a href="http://stackoverflow.com/questions/tagged/google-chrome-e
xtension">google-chrome-extension</a></li> | |
352 <li><a href="http://stackoverflow.com/questions/tagged/google-chrome-a
pp">google-chrome-app</a></li> | |
353 </ul> | |
354 </p> | |
355 </article> | |
356 </div> | |
357 <div class="g-unit g-last"> | |
358 <article class="g-content"> | |
359 <h2 class="puzzle">Join a Group</h2> | |
360 <p>Help us make the Chrome Platform better! | |
361 Join a Chrome Platform group: | |
362 <ul> | |
363 <li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/ch
romium-apps">Chrome Apps</a></li> | |
364 <li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/ch
romium-extensions">Chrome Extensions</a></li> | |
365 <li><a href="https://groups.google.com/forum/#!forum/native-client-dis
cuss">Native Client</a></li> | |
366 </ul> | |
367 </p> | |
368 </article> | |
369 </div> | |
370 </div> | |
371 </div> | |
372 </section> | |
373 | |
374 </div> | |
375 {{/partials.site}} | |
OLD | NEW |