src/chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html

   1 <h1 id="lab_2_work_with_code">Create Basic App</h1>
   2
   3 <p>There are three core pieces to any Chrome App:</p>
   4
   5 <ul>
   6 <li>The manifest that describes meta-information about your application:
   7 name, description, version number and how to launch your application</li>
   8 <li>The background script,
   9 which sets up how your application responds to system events
  10 such as the user installing and launching the app and the system suspending it</li>
  11 <li>The view
  12 (which is optional, but you normally need to show the user something)</li>
  13 </ul>
  14
  15 <p>Let&#39;s look at each of these components at their simplest level.</p>
  16
  17 <p class="note"><b>Tip:</b>
  18 If you use the Sublime Text editor with
  19 <a href="http://www.youtube.com/watch?v=x_FTILqlbsg&hd=1">our plugin</a>,
  20 you can create these three files with a click (Chrome -&gt; New App -&gt; Hello World).
  21 </p>
  22
  23 <h2 id="manifest">Create manifest</h2>
  24
  25 <p>In an empty directory (let&#39;s call it <code>&lt;myappdir&gt;</code>),
  26 create the manifest file: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/manifest.json">manifest.json</a>
  27 </p>
  28
  29 <pre data-filename="manifest.json">
  30 {
  31   &quot;manifest_version&quot;: 2,
  32   &quot;name&quot;: &quot;My first app&quot;,
  33   &quot;version&quot;: &quot;1&quot;,
  34   &quot;app&quot;: {
  35     &quot;background&quot;: {
  36       &quot;scripts&quot;: [&quot;main.js&quot;]
  37     }
  38   }
  39 }
  40 </pre>
  41
  42 <h2 id="background">Create background script</h2>
  43
  44 <p>In the same directory,
  45 create the background script: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/main.js">main.js</a>
  46
  47 <pre data-filename="main.js">
  48 chrome.app.runtime.onLaunched.addListener(function() {
  49   chrome.app.window.create(&#39;index.html&#39;, {
  50     bounds: {
  51       width: 500,
  52       height: 309
  53     }
  54   });
  55 });
  56 </pre>
  57
  58 <h2 id="view">Create view</h2>
  59
  60 <p>Create the user interface: <a href="https://github.com/GoogleChrome/chrome-app-codelab/blob/master/lab2_basic/index.html">index.html</a>
  61
  62 <pre data-filename="index.html">
  63 &lt;html&gt;
  64   &lt;head&gt;
  65       &lt;meta charset=&quot;utf-8&quot;&gt;
  66       &lt;title&gt;Hello World&lt;/title&gt;
  67   &lt;/head&gt;
  68   &lt;body&gt;
  69       &lt;h1&gt;Hello, World!&lt;/h1&gt;
  70   &lt;/body&gt;
  71 &lt;/html&gt;
  72 </pre>
  73
  74 <h2 id="install">Install and execute sample app</h2>
  75
  76 <ul>
  77 <li>Go to <code>chrome://extensions</code>.</li>
  78 <li>Load unpacked extension...</li>
  79 <li>Select the <code>&lt;myappdir&gt;</code> directory.</li>
  80 <li>Open a new Chrome tab.</li>
  81 <li>Click on the &quot;My First App&quot; icon.</li>
  82 </ul>
  83
  84 <h2 id="debug_fix_and_reload_app">Debug, fix, and reload</h2>
  85
  86 <p class="note"><b>Tip:</b>
  87 If you have enabled Developer mode in <code>chrome://extensions</code>,
  88 your apps can be inspected and debugged using the Chrome Developer Tools.
  89 Just like any standard web page, right-click on page and select Inspect Element.
  90 For the background page which doesn&#39;t have UI,
  91 you can either right-click on any app window and
  92 select <code>Inspect Background Page</code> or
  93 go to <code>chrome://extensions</code> and click on Inspect Views...</p>
  94
  95 <ol>
  96 <li><p>Change the text &quot;Hello world&quot;
  97 to &quot;My first app&quot; in index.html.</p></li>
  98 <li><p>Change the
  99 <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.
 100 Don&#39;t bother to create another html.
 101 For now, you can open index.html on both.</p></li>
 102 <li><p>After changing code,
 103 right-click on your app and select Reload App to reload the changed files.
 104 All Developer Tools windows will be reopened when you reload your app.</p></li>
 105 <li><p>Launch the app in a new tab page.
 106 Move the top window and you will see the second window behind it.</p></li>
 107 </ol>
 108
 109 <h2 id="takeaways">Takeaways</h2>
 110
 111 <ul>
 112 <li>Chrome Apps have three basic pieces.
 113 The first and foremost is the manifest, which describes your app,
 114 requests special permissions, defines important meta information and much more.
 115 The second part is the background script,
 116 which contains all logic not tied to a specific user interface.
 117 The last part is the user interface: HTML, CSS, JavaScripts related to the interface, images, etc.</li>
 118 <li>Chrome Apps can be debugged just like standard web pages
 119 using the Chrome Developer Tools.
 120 But since an app doesn&#39;t have the Reload control of a browser,
 121 a Reload App option has been added when you run in Developer mode.</li>
 122 </ul>
 123
 124 <h2 id="you_should_also_read">You should also read</h2>
 125
 126 <ul>
 127 <li><a href="first_app">Create Your First App</a> tutorial</li>
 128 <li><a href="app.runtime">chrome.app.runtime</a> reference</li>
 129 <li><a href="app.window">chrome.app.window</a> reference</li>
 130 </ul>
 131
 132 <h2 id="what_39_s_next_">What's next?</h2>
 133
 134 <p>In <a href="app_codelab3_mvc">3 - Create MVC</a>,
 135 you will use either pure JavaScript or
 136 <a href="http://angularjs.org/">AngluarJS</a>
 137 to build your app's model, view, and controller.</p>