| Index: chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html
|
| diff --git a/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html b/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html
|
| index 4ead662ef6e80cdde5704c3d08612eb0c43cc7fe..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
|
| --- a/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html
|
| +++ b/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html
|
| @@ -1,137 +0,0 @@
|
| -<h1 id="lab_2_work_with_code">Create Basic App</h1>
|
| -
|
| -<p>There are three core pieces to any Chrome App:</p>
|
| -
|
| -<ul>
|
| -<li>The manifest that describes meta-information about your application:
|
| -name, description, version number and how to launch your application</li>
|
| -<li>The background script,
|
| -which sets up how your application responds to system events
|
| -such as the user installing and launching the app and the system suspending it</li>
|
| -<li>The view
|
| -(which is optional, but you normally need to show the user something)</li>
|
| -</ul>
|
| -
|
| -<p>Let's look at each of these components at their simplest level.</p>
|
| -
|
| -<p class="note"><b>Tip:</b>
|
| -If you use the Sublime Text editor with
|
| -<a href="http://www.youtube.com/watch?v=x_FTILqlbsg&hd=1">our plugin</a>,
|
| -you can create these three files with a click (Chrome -> New App -> Hello World).
|
| -</p>
|
| -
|
| -<h2 id="manifest">Create manifest</h2>
|
| -
|
| -<p>In an empty directory (let's call it <code><myappdir></code>),
|
| -create the manifest file: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/manifest.json">manifest.json</a>
|
| -</p>
|
| -
|
| -<pre data-filename="manifest.json">
|
| -{
|
| - "manifest_version": 2,
|
| - "name": "My first app",
|
| - "version": "1",
|
| - "app": {
|
| - "background": {
|
| - "scripts": ["main.js"]
|
| - }
|
| - }
|
| -}
|
| -</pre>
|
| -
|
| -<h2 id="background">Create background script</h2>
|
| -
|
| -<p>In the same directory,
|
| -create the background script: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a>
|
| -
|
| -<pre data-filename="main.js">
|
| -chrome.app.runtime.onLaunched.addListener(function() {
|
| - chrome.app.window.create('index.html', {
|
| - bounds: {
|
| - width: 500,
|
| - height: 309
|
| - }
|
| - });
|
| -});
|
| -</pre>
|
| -
|
| -<h2 id="view">Create view</h2>
|
| -
|
| -<p>Create the user interface: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/index.html">index.html</a>
|
| -
|
| -<pre data-filename="index.html">
|
| -<html>
|
| - <head>
|
| - <meta charset="utf-8">
|
| - <title>Hello World</title>
|
| - </head>
|
| - <body>
|
| - <h1>Hello, World!</h1>
|
| - </body>
|
| -</html>
|
| -</pre>
|
| -
|
| -<h2 id="install">Install and execute sample app</h2>
|
| -
|
| -<ul>
|
| -<li>Go to <code>chrome://extensions</code>.</li>
|
| -<li>Load unpacked extension...</li>
|
| -<li>Select the <code><myappdir></code> directory.</li>
|
| -<li>Open a new Chrome tab.</li>
|
| -<li>Click on the "My First App" icon.</li>
|
| -</ul>
|
| -
|
| -<h2 id="debug_fix_and_reload_app">Debug, fix, and reload</h2>
|
| -
|
| -<p class="note"><b>Tip:</b>
|
| -If you have enabled Developer mode in <code>chrome://extensions</code>,
|
| -your apps can be inspected and debugged using the Chrome Developer Tools.
|
| -Just like any standard web page, right-click on page and select Inspect Element.
|
| -For the background page which doesn't have UI,
|
| -you can either right-click on any app window and
|
| -select <code>Inspect Background Page</code> or
|
| -go to <code>chrome://extensions</code> and click on Inspect Views...</p>
|
| -
|
| -<ol>
|
| -<li><p>Change the text "Hello world"
|
| -to "My first app" in index.html.</p></li>
|
| -<li><p>Change the
|
| -<a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a> background script to create two windows instead of one.
|
| -Don't bother to create another html.
|
| -For now, you can open index.html on both.</p></li>
|
| -<li><p>After changing code,
|
| -right-click on your app and select Reload App to reload the changed files.
|
| -All Developer Tools windows will be reopened when you reload your app.</p></li>
|
| -<li><p>Launch the app in a new tab page.
|
| -Move the top window and you will see the second window behind it.</p></li>
|
| -</ol>
|
| -
|
| -<h2 id="takeaways">Takeaways</h2>
|
| -
|
| -<ul>
|
| -<li>Chrome Apps have three basic pieces.
|
| -The first and foremost is the manifest, which describes your app,
|
| -requests special permissions, defines important meta information and much more.
|
| -The second part is the background script,
|
| -which contains all logic not tied to a specific user interface.
|
| -The last part is the user interface: HTML, CSS, JavaScripts related to the interface, images, etc.</li>
|
| -<li>Chrome Apps can be debugged just like standard web pages
|
| -using the Chrome Developer Tools.
|
| -But since an app doesn't have the Reload control of a browser,
|
| -a Reload App option has been added when you run in Developer mode.</li>
|
| -</ul>
|
| -
|
| -<h2 id="you_should_also_read">You should also read</h2>
|
| -
|
| -<ul>
|
| -<li><a href="first_app">Create Your First App</a> tutorial</li>
|
| -<li><a href="app.runtime">chrome.app.runtime</a> reference</li>
|
| -<li><a href="app.window">chrome.app.window</a> reference</li>
|
| -</ul>
|
| -
|
| -<h2 id="what_39_s_next_">What's next?</h2>
|
| -
|
| -<p>In <a href="app_codelab3_mvc">3 - Create MVC</a>,
|
| -you will use either pure JavaScript or
|
| -<a href="http://angularjs.org/">AngluarJS</a>
|
| -to build your app's model, view, and controller.</p>
|
|
|