Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(9017)

Unified Diff: chrome/common/extensions/docs/templates/articles/app_codelab2_basic.html

Issue 645693006: Updated Chrome Apps codelab (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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&#39;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 -&gt; New App -&gt; Hello World).
-</p>
-
-<h2 id="manifest">Create manifest</h2>
-
-<p>In an empty directory (let&#39;s call it <code>&lt;myappdir&gt;</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">
-{
- &quot;manifest_version&quot;: 2,
- &quot;name&quot;: &quot;My first app&quot;,
- &quot;version&quot;: &quot;1&quot;,
- &quot;app&quot;: {
- &quot;background&quot;: {
- &quot;scripts&quot;: [&quot;main.js&quot;]
- }
- }
-}
-</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(&#39;index.html&#39;, {
- 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">
-&lt;html&gt;
- &lt;head&gt;
- &lt;meta charset=&quot;utf-8&quot;&gt;
- &lt;title&gt;Hello World&lt;/title&gt;
- &lt;/head&gt;
- &lt;body&gt;
- &lt;h1&gt;Hello, World!&lt;/h1&gt;
- &lt;/body&gt;
-&lt;/html&gt;
-</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>&lt;myappdir&gt;</code> directory.</li>
-<li>Open a new Chrome tab.</li>
-<li>Click on the &quot;My First App&quot; 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&#39;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 &quot;Hello world&quot;
-to &quot;My first app&quot; 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&#39;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&#39;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>

Powered by Google App Engine
This is Rietveld 408576698