New home page for developer.chrome.com

chrome/docs/platform-pillar.html

+{{+content:partials.site}}
+<div class="pillar-content">
+
+  <h1>Chrome Platform</h1>
+  
+  <section class="article-list g-section">
+    <article class="new">
+    <h4 class="label">Apps</h4>
+    <h2>Learn Basics</h2>
+    <p>Develop your first Chrome App and discover
+    how they look, how they behave, and how they are modeled.
+    Launch your Apps from your native platform
+    using the
+    <a href="http://chrome.blogspot.com/2013/12/a-new-breed-of-chrome-apps-now.html">Chrome App Launcher</a>:
+    </p>
+    <p><a href="/apps/first_app.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/chrome_apps.png" alt="500px Chrome App launched from Chrome App Launcher">
+    </article>
+    
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Learn with Codelab</h2>
+    <p>The goal of this codelab is to get you building Chrome Apps fast.
+    Once you've completed this codelab, you will have a simple Todo app.</p>
+    <p><a href="/apps/app_codelab1_setup.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/todo_codelab.png"
+         width="110%"
+         alt="Create this simple Todo Chrome App.">
+    </article>
+
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Samples</h2>
+    <p>Browse official Chrome Apps samples in the
+    <a href="https://github.com/GoogleChrome/chrome-app-samples">chrome-apps-samples GitHub repository</a>.
+    The <a href="https://github.com/GoogleChrome/chrome-app-samples/blob/master/README.md">README.md</a>
+    lists each sample's APIs and provides a link to download in the Chrome Web Store.</p>
+    <img src="{{static}}/images/platform-pillar/chrome_app_samples.png" alt="Chrome apps samples maintained in GitHub repository">
+    </article>
+
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Reference</h2>
+    <p>Chrome Apps have access to Chrome APIs not available to traditional web sites.
+    With these APIs,
+    you can build powerful apps that interact
+    with network and hardware devices, media tools, and much more.
+    <ul>
+        <li><a href="/apps/api_index.html">Chrome Platform APIs</a>: lists APIs available in each Chrome channel</li>
+        <li><a href="/apps/manifest.html">Manifest File Format</a>: lists supported manifest fields</li>
+        <li><a href="/apps/app_deprecated.html">Disabled Web Features</a>: lists disabled open web platform features</li>
+    </ul></p>
+    <p><a href="/apps/api_index.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Develop in Cloud</h2>
+    <p>Chrome Apps leverage the Google Cloud Platform to store and access data.
+    They work offline by default
+    and can sync back to the cloud once connectivity is restored.
+    Use the
+    <a href="/apps/syncFileSystem.html">syncFileSystem API</a>
+    to save and synchronize caching data in Google Drive.</p>
+    <p><a href="/apps/offline_apps.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/sync_file_system.png" alt="Use Google Drive to store Chrome Apps data in the cloud.">
+    </article>
+
+    <article>
+    <h4 class="label">Apps</h4>
+    <h2>Network and Hardware APIs</h2>
+    <p> Chrome Apps can interact with low-level system services.
+    Using the network and hardware APIs, they can:
+    <ul>
+      <li>Act as <a href="/apps/socket.html">network clients</a>
+for TCP and UDP connections.</li>
+      <li>Communicate with <a href="/apps/usb.html">usb devices</a>.</li>
+      <li>Read and write to devices connected to <a href="/apps/serial.html">serial ports</a>.</li>
+      <li>Connect to <a href="/apps/bluetooth.html">bluetooth devices</a>.</li>
+    </ul></p>
+    <p><a href="/apps/app_usb.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Learn Basics</h2>
+    <p>Extensions are small software programs that can modify and
+    enhance the functionality of the Chrome browser.
+    Write extensions using web technologies: HTML, JavaScript, and CSS.</p>
+    <p><a href="/extensions/overview.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/extensions.png" alt="Browser action and page actions are common extension types.">
+    </article>
+
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Getting Started Tutorial</h2>
+    <p>This tutorial walks you through the construction
+    of a simple browser action extension.
+    Clicking the browser action UI element opens a pop-up window.</p>
+    <p><a href="/extensions/getstarted.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/one_click_kittens.png" alt="One-click kittens tutorial">
+    </article>
+
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Samples</h2>
+    <p>Browse official Chrome Extensions samples;
+    each sample lists API methods and links to source files.
+    Filter by keyword or API:</p>
+    <p><a href="/extensions/samples.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/extension_samples.png" alt="Extension samples page">
+    </article>
+
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Reference</h2>
+    <p>Extensions are essentially web pages;
+    they can use all APIs that the browser provides to web pages.
+    Using Extensions APIs, they can also interact programmatically with browser features
+    such as bookmarks and tabs.
+    Read the reference docs to find out more:
+    <ul>
+        <li><a href="/extensions/whats_new.html">What's New</a>: lists what's new in stable Chrome versions</li>
+        <li><a href="/extensions/api_index.html">Chrome Platform APIs</a>: lists APIs available in each Chrome channel</li>
+        <li><a href="/extensions/manifest.html">Manifest File Format</a>: describes supported manifest fields</li>
+        <li><a href="/extensions/permission_warnings.html">Permissions</a>: describes permission warnings</li>
+    </ul>
+    </p>
+    <p><a href="/extensions/api_index.html">Learn more</a></p>
+    </article>
+
+    <article class="new">
+    <h4 class="label">Extensions</h4>
+    <h2>Distribute Extensions</h2>
+    <p><a href="/extensions/packaging.html">Upload your extension</a>
+    to test it in developer channels,
+    then <a href="/extensions/hosting.html">publish your extension</a>
+    in the Chrome Web Store.
+    New feature! You can now
+    <a href="/webstore/payments-otp">monetize your extensions</a>!</p>
+    <p><a href="/extensions/hosting.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/upload_extensions.png" alt="Upload extensions on chrome://extensions page.">
+    </article> 
+    <article>
+    <h4 class="label">Extensions</h4>
+    <h2>Themes</h2>
+    <p>A theme is a special kind of extension that changes the way the browser looks.
+    Themes are <a href="/extensions/packaging.html">packaged</a> like regular extensions,
+    but they don't contain JavaScript or HTML code.
+    Distribute your themes in the
+    <a href="https://chrome.google.com/webstore/category/themes">Chrome Web Store</a>.
+    </p>
+    <p><a href="/extensions/themes.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/theme.png" alt="Grass theme">
+    </article>
+
+    <article class="new">
+    <h4 class="label">Native Client</h4>
+    <h2>Learn Basics</h2>
+    <p>Native Client is a sandbox for running compiled C and C++ code in the browser.
+    Portable Native Client extends that technology with architecture independence,
+    letting developers compile their code once to run in any website and on any architecture.</p>
+    <p><a href="/native-client/index.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/pnacl_intro.png" alt="Watch a live recorded conversation on Native Client.">
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>Tutorial</h2>
+    
+    <p>This multi-part tutorial explains how to get started developing applications with Native Client.</p>
+
+    <p><a href="/native-client/devguide/tutorial/tutorial-part1">Part one</a>
+    shows how to build and run a simple web application
+    using Portable Native Client (PNaCl).</p>
+    
+    <p><a href="/native-client/devguide/tutorial/tutorial-part2">Part two</a>
+    shows how to convert the finished PNaCl web application
+    to use the Native Client SDK build system and common JavaScript files.
+    </p>
+    <p><a href="/native-client/devguide/tutorial/tutorial-part1">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>SDK</h2>
+    <p>Follow these steps to download
+    and install the Native Client SDK:
+    <ol>
+      <li>Download the SDK update utility and unzip.</li>
+      <li>See which versions are available.</li>
+      <li>Run <code>naclsdk</code> with the “update” command
+      to download particular bundles that are available.</li>
+    </ol>
+    </p>
+    <p><a href="/native-client/sdk/download">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>Development Cycle</h2>
+    <p>End-to-end native client development workflow:
+    <ul>
+    <li><a href="/native-client/devguide/devcycle/building.html">Build</a>
+Native Client modules.</li>
+    <li><a href="/native-client/devguide/devcycle/running.html">Run</a>
+Native Client applications during development.</li>
+    <li><a href="/native-client/devguide/devcycle/debugging.html">Debug, monitor, and measure</a>
+Native Client application performance.</li>
+    </ul></p>
+    <p><a href="/native-client/devguide/devcycle/building.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>Coding Your Application</h2>
+    <p>Dive deeper into Native Client development.
+    Learn:
+    <ul>
+    <li>How Native Client applications are
+    <a href="/native-client/devguide/coding/application-structure.html">structured</a></li>
+    <li>Which classes and functions to implement in your
+<a href="/native-client/devguide/coding/native-client-modules.html">Native Client module</a> for Chrome to load, initialize, and run it</li>
+    <li>How to use the
+    <a href="/native-client/devguide/coding/message-system.html">messaging system</a>
+    to communicate between the JavaScript code and
+    the Native Client module's C or C++code</li>
+    </ul>    
+    And much more!</p>
+    <p><a href="/native-client/devguide/coding/application-structure.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Native Client</h4>
+    <h2>Pepper API</h2>
+    <p>The Pepper API lets Native Client modules communicate
+    with the hosting browser and access system-level functions in a safe and portable way.
+    Pepper has both a
+    <a href="/native-client/pepperc/index.html">C API</a> and a
+    <a href="/native-client/peppercpp/index.html">C++ API</a>.</p>
+
+    <p>These APIs are generally divided into two parts:
+    <ul><li>Functions implemented in the browser
+    that you call from your Native Client module</li>
+    <li>Functions the browser invokes so you must implement them
+    in your Native Client module
+    </li>
+    </ul>
+    </p>
+    <p><a href="/native-client/overview.html#pepper-plugin-api">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>What Is the Chrome Web Store?</h2>
+    <p>The Chrome Web Store lets you
+    <a href="/webstore/publish.html">publish</a>
+    your Chrome Apps, Extensions, and Themes
+    where Chrome users can easily find them.</p>
+    <p><a href="/webstore/index.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/chrome_web_store.png" alt="Publish apps, extensions, and themes in Chrome Web Store.">
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>Tutorial: Getting Started</h2>
+    <p>Follow these simple steps
+    to publish your app, extension,
+    or theme to the Chrome Web Store:
+    <ol>
+      <li>Create manifest file.</li>
+      <li>Get image assets.</li>
+      <li>Test app.</li>
+      <li>Zip app.</li>
+      <li>Upload your app to store.</li>
+    </ol>
+    </p>
+    <p><a href="/webstore/get_started_simple.html">Learn more</a></p>
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>Branding</h2>
+    <p>Follow the Chrome Web Store branding guidelines
+for supplying images and promotional assets.</p>
+    <p><a href="/webstore/branding.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/ChromeWebStore_BadgeWBorder_v2_206x58.png" alt="Using the Chrome Web Store badge">
+    </article>
+
+    <article class="new">
+    <h4 class="label">Store</h4>
+    <h2>Monetizing</h2>
+    <p>Two options for charging your users:
+    Chrome Web Store Payments for
+    <a href="/webstore/payments-otp">one-time payments</a> or
+    <a href="/apps/google_wallet.html">Google Wallet for Digital Goods</a>
+    to sell digital or virtual goods in your Chrome Apps or Extensions.</p>
+    <p><a href="/webstore/money.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/wallet-review.png"
+         width="250px"
+         alt="Using Google Wallet in apps and extensions">
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>Publishing</h2>
+    <p>When your app, extension, or theme is finished (if not before),
+    upload it with the
+    <a href="https://chrome.google.com/webstore/developer/dashboard">Developer Dashboard</a>.
+    Uploading generates an app ID,
+    which you may need to complete your application code.</p>
+    <p><a href="/webstore/publish.html">Learn more</a></p>
+    <img src="{{static}}/images/platform-pillar/store_developer_dashboard.png" alt="Chrome Web Store Developer Dashboard">
+    </article>
+
+    <article>
+    <h4 class="label">Store</h4>
+    <h2>Best Practices</h2>
+    <p>When publishing in the store,
+    follow these <a href="/webstore/best_practices.html">best practices</a>:
+    <ul>
+      <li>Support Google Accounts.</li>
+      <li>Keep ex-user data for 30 days.</li>
+      <li>Cache license data.</li>
+      <li>Create a compelling store listing.</li>
+    </ul>
+    </p>
+    <p><a href="/webstore/best_practices.html">Learn more</a></p>
+    </article>
+
+  </section>
+
+<section class="g-section g-tpl-33-67" id="further-resources">
+    <h2>Further Resources</h2>
+    <div class="g-unit g-first">
+      <article class="g-content">
+          <h2 class="school">Office Hours</h2>
+          <p>Watch demos of the Platform and get help in Chrome Office Hours on
+          <a href="https://developers.google.com/live/chrome/">Google Developers Live</a>.</p>
+      </article>
+    </div>
+    <div class="g-unit">
+      <div class="g-section g-tpl-50-50">
+        <div class="g-unit g-first">
+          <article class="g-content">
+          <h2 class="chat">Ask Questions</h2>
+          <p>Ask questions and get answers on these Stack Overflow channels:
+          <ul>
+          <li><a href="http://stackoverflow.com/questions/tagged/google-chrome">google-chrome</a>
+          </li>
+          <li><a href="http://stackoverflow.com/questions/tagged/google-chrome-extension">google-chrome-extension</a></li>
+          <li><a href="http://stackoverflow.com/questions/tagged/google-chrome-app">google-chrome-app</a></li>
+          </ul>
+          </p>
+          </article>
+        </div>
+        <div class="g-unit g-last">
+          <article class="g-content">
+          <h2 class="puzzle">Join a Group</h2>
+          <p>Help us make the Chrome Platform better!
+          Join a Chrome Platform group:
+          <ul>
+          <li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-apps">Chrome Apps</a></li>
+          <li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions">Chrome Extensions</a></li>
+          <li><a href="https://groups.google.com/forum/#!forum/native-client-discuss">Native Client</a></li>
+          </ul>
+          </p>             
+          </article>
+        </div>
+      </div>
+    </div>
+  </section>
+
+</div>
+{{/partials.site}}