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/app_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/app_bluetooth.html">bluetooth devices</a>.</li>
    </ul></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>
    <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>
          </ul>
          </p>
          </article>
        </div>
      </div>
    </div>
  </section>

</div>
{{/partials.site}}