src/chrome/common/extensions/docs/templates/public/home/platform-pillar.html

   1 {{+content:partials.site}}
   2 <div class="pillar-content">
   3
   4   <h1>Chrome Platform</h1>
   5
   6   <section class="article-list g-section">
   7     <article class="new">
   8     <h4 class="label">Apps</h4>
   9     <h2>Learn Basics</h2>
  10     <p>Develop your first Chrome App and discover
  11     how they look, how they behave, and how they are modeled.
  12     Launch your Apps from your native platform
  13     using the
  14     <a href="http://chrome.blogspot.com/2013/12/a-new-breed-of-chrome-apps-now.html">Chrome App Launcher</a>:
  15     </p>
  16     <p><a href="/apps/first_app.html">Learn more</a></p>
  17     <img src="{{static}}/images/platform-pillar/chrome_apps.png" alt="500px Chrome App launched from Chrome App Launcher">
  18     </article>
  19
  20     <article>
  21     <h4 class="label">Apps</h4>
  22     <h2>Learn with Codelab</h2>
  23     <p>The goal of this codelab is to get you building Chrome Apps fast.
  24     Once you've completed this codelab, you will have a simple Todo app.</p>
  25     <p><a href="/apps/app_codelab1_setup.html">Learn more</a></p>
  26     <img src="{{static}}/images/platform-pillar/todo_codelab.png"
  27          width="110%"
  28          alt="Create this simple Todo Chrome App.">
  29     </article>
  30
  31     <article>
  32     <h4 class="label">Apps</h4>
  33     <h2>Samples</h2>
  34     <p>Browse official Chrome Apps samples in the
  35     <a href="https://github.com/GoogleChrome/chrome-app-samples">chrome-apps-samples GitHub repository</a>.
  36     The <a href="https://github.com/GoogleChrome/chrome-app-samples/blob/master/README.md">README.md</a>
  37     lists each sample's APIs and provides a link to download in the Chrome Web Store.</p>
  38     <img src="{{static}}/images/platform-pillar/chrome_app_samples.png" alt="Chrome apps samples maintained in GitHub repository">
  39     </article>
  40
  41     <article>
  42     <h4 class="label">Apps</h4>
  43     <h2>Reference</h2>
  44     <p>Chrome Apps have access to Chrome APIs not available to traditional web sites.
  45     With these APIs,
  46     you can build powerful apps that interact
  47     with network and hardware devices, media tools, and much more.
  48     <ul>
  49         <li><a href="/apps/api_index.html">Chrome Platform APIs</a>: lists APIs available in each Chrome channel</li>
  50         <li><a href="/apps/manifest.html">Manifest File Format</a>: lists supported manifest fields</li>
  51         <li><a href="/apps/app_deprecated.html">Disabled Web Features</a>: lists disabled open web platform features</li>
  52     </ul></p>
  53     <p><a href="/apps/api_index.html">Learn more</a></p>
  54     </article>
  55
  56     <article>
  57     <h4 class="label">Apps</h4>
  58     <h2>Develop in Cloud</h2>
  59     <p>Chrome Apps leverage the Google Cloud Platform to store and access data.
  60     They work offline by default
  61     and can sync back to the cloud once connectivity is restored.
  62     Use the
  63     <a href="/apps/syncFileSystem.html">syncFileSystem API</a>
  64     to save and synchronize caching data in Google Drive.</p>
  65     <p><a href="/apps/offline_apps.html">Learn more</a></p>
  66     <img src="{{static}}/images/platform-pillar/sync_file_system.png" alt="Use Google Drive to store Chrome Apps data in the cloud.">
  67     </article>
  68
  69     <article>
  70     <h4 class="label">Apps</h4>
  71     <h2>Network and Hardware APIs</h2>
  72     <p> Chrome Apps can interact with low-level system services.
  73     Using the network and hardware APIs, they can:
  74     <ul>
  75       <li>Act as <a href="/apps/socket.html">network clients</a>
  76 for TCP and UDP connections.</li>
  77       <li>Communicate with <a href="/apps/usb.html">usb devices</a>.</li>
  78       <li>Read and write to devices connected to <a href="/apps/serial.html">serial ports</a>.</li>
  79       <li>Connect to <a href="/apps/bluetooth.html">bluetooth devices</a>.</li>
  80     </ul></p>
  81     <p><a href="/apps/app_usb.html">Learn more</a></p>
  82     </article>
  83
  84     <article>
  85     <h4 class="label">Extensions</h4>
  86     <h2>Learn Basics</h2>
  87     <p>Extensions are small software programs that can modify and
  88     enhance the functionality of the Chrome browser.
  89     Write extensions using web technologies: HTML, JavaScript, and CSS.</p>
  90     <p><a href="/extensions/overview.html">Learn more</a></p>
  91     <img src="{{static}}/images/platform-pillar/extensions.png" alt="Browser action and page actions are common extension types.">
  92     </article>
  93
  94     <article>
  95     <h4 class="label">Extensions</h4>
  96     <h2>Getting Started Tutorial</h2>
  97     <p>This tutorial walks you through the construction
  98     of a simple browser action extension.
  99     Clicking the browser action UI element opens a pop-up window.</p>
 100     <p><a href="/extensions/getstarted.html">Learn more</a></p>
 101     <img src="{{static}}/images/platform-pillar/one_click_kittens.png" alt="One-click kittens tutorial">
 102     </article>
 103
 104     <article>
 105     <h4 class="label">Extensions</h4>
 106     <h2>Samples</h2>
 107     <p>Browse official Chrome Extensions samples;
 108     each sample lists API methods and links to source files.
 109     Filter by keyword or API:</p>
 110     <p><a href="/extensions/samples.html">Learn more</a></p>
 111     <img src="{{static}}/images/platform-pillar/extension_samples.png" alt="Extension samples page">
 112     </article>
 113
 114     <article>
 115     <h4 class="label">Extensions</h4>
 116     <h2>Reference</h2>
 117     <p>Extensions are essentially web pages;
 118     they can use all APIs that the browser provides to web pages.
 119     Using Extensions APIs, they can also interact programmatically with browser features
 120     such as bookmarks and tabs.
 121     Read the reference docs to find out more:
 122     <ul>
 123         <li><a href="/extensions/whats_new.html">What's New</a>: lists what's new in stable Chrome versions</li>
 124         <li><a href="/extensions/api_index.html">Chrome Platform APIs</a>: lists APIs available in each Chrome channel</li>
 125         <li><a href="/extensions/manifest.html">Manifest File Format</a>: describes supported manifest fields</li>
 126         <li><a href="/extensions/permission_warnings.html">Permissions</a>: describes permission warnings</li>
 127     </ul>
 128     </p>
 129     <p><a href="/extensions/api_index.html">Learn more</a></p>
 130     </article>
 131
 132     <article class="new">
 133     <h4 class="label">Extensions</h4>
 134     <h2>Distribute Extensions</h2>
 135     <p><a href="/extensions/packaging.html">Upload your extension</a>
 136     to test it in developer channels,
 137     then <a href="/extensions/hosting.html">publish your extension</a>
 138     in the Chrome Web Store.
 139     New feature! You can now
 140     <a href="/webstore/payments-otp">monetize your extensions</a>!</p>
 141     <p><a href="/extensions/hosting.html">Learn more</a></p>
 142     <img src="{{static}}/images/platform-pillar/upload_extensions.png" alt="Upload extensions on chrome://extensions page.">
 143     </article>
 144     <article>
 145     <h4 class="label">Extensions</h4>
 146     <h2>Themes</h2>
 147     <p>A theme is a special kind of extension that changes the way the browser looks.
 148     Themes are <a href="/extensions/packaging.html">packaged</a> like regular extensions,
 149     but they don't contain JavaScript or HTML code.
 150     Distribute your themes in the
 151     <a href="https://chrome.google.com/webstore/category/themes">Chrome Web Store</a>.
 152     </p>
 153     <p><a href="/extensions/themes.html">Learn more</a></p>
 154     <img src="{{static}}/images/platform-pillar/theme.png" alt="Grass theme">
 155     </article>
 156
 157     <article class="new">
 158     <h4 class="label">Native Client</h4>
 159     <h2>Learn Basics</h2>
 160     <p>Native Client is a sandbox for running compiled C and C++ code in the browser.
 161     Portable Native Client extends that technology with architecture independence,
 162     letting developers compile their code once to run in any website and on any architecture.</p>
 163     <p><a href="/native-client/index.html">Learn more</a></p>
 164     <img src="{{static}}/images/platform-pillar/pnacl_intro.png" alt="Watch a live recorded conversation on Native Client.">
 165     </article>
 166
 167     <article>
 168     <h4 class="label">Native Client</h4>
 169     <h2>Tutorial</h2>
 170
 171     <p>This multi-part tutorial explains how to get started developing applications with Native Client.</p>
 172
 173     <p><a href="/native-client/devguide/tutorial/tutorial-part1">Part one</a>
 174     shows how to build and run a simple web application
 175     using Portable Native Client (PNaCl).</p>
 176
 177     <p><a href="/native-client/devguide/tutorial/tutorial-part2">Part two</a>
 178     shows how to convert the finished PNaCl web application
 179     to use the Native Client SDK build system and common JavaScript files.
 180     </p>
 181     <p><a href="/native-client/devguide/tutorial/tutorial-part1">Learn more</a></p>
 182     </article>
 183
 184     <article>
 185     <h4 class="label">Native Client</h4>
 186     <h2>SDK</h2>
 187     <p>Follow these steps to download
 188     and install the Native Client SDK:
 189     <ol>
 190       <li>Download the SDK update utility and unzip.</li>
 191       <li>See which versions are available.</li>
 192       <li>Run <code>naclsdk</code> with the “update” command
 193       to download particular bundles that are available.</li>
 194     </ol>
 195     </p>
 196     <p><a href="/native-client/sdk/download">Learn more</a></p>
 197     </article>
 198
 199     <article>
 200     <h4 class="label">Native Client</h4>
 201     <h2>Development Cycle</h2>
 202     <p>End-to-end native client development workflow:
 203     <ul>
 204     <li><a href="/native-client/devguide/devcycle/building.html">Build</a>
 205 Native Client modules.</li>
 206     <li><a href="/native-client/devguide/devcycle/running.html">Run</a>
 207 Native Client applications during development.</li>
 208     <li><a href="/native-client/devguide/devcycle/debugging.html">Debug, monitor, and measure</a>
 209 Native Client application performance.</li>
 210     </ul></p>
 211     <p><a href="/native-client/devguide/devcycle/building.html">Learn more</a></p>
 212     </article>
 213
 214     <article>
 215     <h4 class="label">Native Client</h4>
 216     <h2>Coding Your Application</h2>
 217     <p>Dive deeper into Native Client development.
 218     Learn:
 219     <ul>
 220     <li>How Native Client applications are
 221     <a href="/native-client/devguide/coding/application-structure.html">structured</a></li>
 222     <li>Which classes and functions to implement in your
 223 <a href="/native-client/devguide/coding/native-client-modules.html">Native Client module</a> for Chrome to load, initialize, and run it</li>
 224     <li>How to use the
 225     <a href="/native-client/devguide/coding/message-system.html">messaging system</a>
 226     to communicate between the JavaScript code and
 227     the Native Client module's C or C++code</li>
 228     </ul>
 229     And much more!</p>
 230     <p><a href="/native-client/devguide/coding/application-structure.html">Learn more</a></p>
 231     </article>
 232
 233     <article>
 234     <h4 class="label">Native Client</h4>
 235     <h2>Pepper API</h2>
 236     <p>The Pepper API lets Native Client modules communicate
 237     with the hosting browser and access system-level functions in a safe and portable way.
 238     Pepper has both a
 239     <a href="/native-client/pepperc/index.html">C API</a> and a
 240     <a href="/native-client/peppercpp/index.html">C++ API</a>.</p>
 241
 242     <p>These APIs are generally divided into two parts:
 243     <ul><li>Functions implemented in the browser
 244     that you call from your Native Client module</li>
 245     <li>Functions the browser invokes so you must implement them
 246     in your Native Client module
 247     </li>
 248     </ul>
 249     </p>
 250     <p><a href="/native-client/overview.html#pepper-plugin-api">Learn more</a></p>
 251     </article>
 252
 253     <article>
 254     <h4 class="label">Store</h4>
 255     <h2>What Is the Chrome Web Store?</h2>
 256     <p>The Chrome Web Store lets you
 257     <a href="/webstore/publish.html">publish</a>
 258     your Chrome Apps, Extensions, and Themes
 259     where Chrome users can easily find them.</p>
 260     <p><a href="/webstore/index.html">Learn more</a></p>
 261     <img src="{{static}}/images/platform-pillar/chrome_web_store.png" alt="Publish apps, extensions, and themes in Chrome Web Store.">
 262     </article>
 263
 264     <article>
 265     <h4 class="label">Store</h4>
 266     <h2>Tutorial: Getting Started</h2>
 267     <p>Follow these simple steps
 268     to publish your app, extension,
 269     or theme to the Chrome Web Store:
 270     <ol>
 271       <li>Create manifest file.</li>
 272       <li>Get image assets.</li>
 273       <li>Test app.</li>
 274       <li>Zip app.</li>
 275       <li>Upload your app to store.</li>
 276     </ol>
 277     </p>
 278     <p><a href="/webstore/get_started_simple.html">Learn more</a></p>
 279     </article>
 280
 281     <article>
 282     <h4 class="label">Store</h4>
 283     <h2>Branding</h2>
 284     <p>Follow the Chrome Web Store branding guidelines
 285 for supplying images and promotional assets.</p>
 286     <p><a href="/webstore/branding.html">Learn more</a></p>
 287     <img src="{{static}}/images/platform-pillar/ChromeWebStore_BadgeWBorder_v2_206x58.png" alt="Using the Chrome Web Store badge">
 288     </article>
 289
 290     <article class="new">
 291     <h4 class="label">Store</h4>
 292     <h2>Monetizing</h2>
 293     <p>Two options for charging your users:
 294     Chrome Web Store Payments for
 295     <a href="/webstore/payments-otp">one-time payments</a> or
 296     <a href="/apps/google_wallet.html">Google Wallet for Digital Goods</a>
 297     to sell digital or virtual goods in your Chrome Apps or Extensions.</p>
 298     <p><a href="/webstore/money.html">Learn more</a></p>
 299     <img src="{{static}}/images/platform-pillar/wallet-review.png"
 300          width="250px"
 301          alt="Using Google Wallet in apps and extensions">
 302     </article>
 303
 304     <article>
 305     <h4 class="label">Store</h4>
 306     <h2>Publishing</h2>
 307     <p>When your app, extension, or theme is finished (if not before),
 308     upload it with the
 309     <a href="https://chrome.google.com/webstore/developer/dashboard">Developer Dashboard</a>.
 310     Uploading generates an app ID,
 311     which you may need to complete your application code.</p>
 312     <p><a href="/webstore/publish.html">Learn more</a></p>
 313     <img src="{{static}}/images/platform-pillar/store_developer_dashboard.png" alt="Chrome Web Store Developer Dashboard">
 314     </article>
 315
 316     <article>
 317     <h4 class="label">Store</h4>
 318     <h2>Best Practices</h2>
 319     <p>When publishing in the store,
 320     follow these <a href="/webstore/best_practices.html">best practices</a>:
 321     <ul>
 322       <li>Support Google Accounts.</li>
 323       <li>Keep ex-user data for 30 days.</li>
 324       <li>Cache license data.</li>
 325       <li>Create a compelling store listing.</li>
 326     </ul>
 327     </p>
 328     <p><a href="/webstore/best_practices.html">Learn more</a></p>
 329     </article>
 330
 331   </section>
 332
 333 <section class="g-section g-tpl-33-67" id="further-resources">
 334     <h2>Further Resources</h2>
 335     <div class="g-unit g-first">
 336       <article class="g-content">
 337           <h2 class="school">Office Hours</h2>
 338           <p>Watch demos of the Platform and get help in Chrome Office Hours on
 339           <a href="https://developers.google.com/live/chrome/">Google Developers Live</a>.</p>
 340       </article>
 341     </div>
 342     <div class="g-unit">
 343       <div class="g-section g-tpl-50-50">
 344         <div class="g-unit g-first">
 345           <article class="g-content">
 346           <h2 class="chat">Ask Questions</h2>
 347           <p>Ask questions and get answers on these Stack Overflow channels:
 348           <ul>
 349           <li><a href="http://stackoverflow.com/questions/tagged/google-chrome">google-chrome</a>
 350           </li>
 351           <li><a href="http://stackoverflow.com/questions/tagged/google-chrome-extension">google-chrome-extension</a></li>
 352           <li><a href="http://stackoverflow.com/questions/tagged/google-chrome-app">google-chrome-app</a></li>
 353           </ul>
 354           </p>
 355           </article>
 356         </div>
 357         <div class="g-unit g-last">
 358           <article class="g-content">
 359           <h2 class="puzzle">Join a Group</h2>
 360           <p>Help us make the Chrome Platform better!
 361           Join a Chrome Platform group:
 362           <ul>
 363           <li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-apps">Chrome Apps</a></li>
 364           <li><a href="https://groups.google.com/a/chromium.org/forum/#!forum/chromium-extensions">Chrome Extensions</a></li>
 365           <li><a href="https://groups.google.com/forum/#!forum/native-client-discuss">Native Client</a></li>
 366           </ul>
 367           </p>
 368           </article>
 369         </div>
 370       </div>
 371     </div>
 372   </section>
 373
 374 </div>
 375 {{/partials.site}}