chrome/common/extensions/docs/templates/articles/api_other.html

   1 <h1>Web APIs</h1>
   2
   3 <p>
   4 In addition to the
   5 <a href="api_index">chrome.* APIs</a>,
   6 extensions can use all the APIs
   7 that the browser provides
   8 to web pages and apps.
   9 If the browser doesn't support an API you want to use,
  10 you can bundle additional API libraries into your extension.
  11 </p>
  12
  13 <p>Here's a sampling of the APIs that extensions can use:</p>
  14
  15 <dl>
  16 <dt><strong> Standard JavaScript APIs </strong></dt>
  17 <dd> These are the same core JavaScript and
  18   <a href="https://developer.mozilla.org/en/Gecko_DOM_Reference">Document Object Model</a>
  19   (DOM) APIs
  20   that you can use in ordinary web apps.
  21
  22 <!-- Use onclick in your toolbar div to add click behavior.
  23 E.g. window.open(someUrl). --></dd>
  24 <dt><strong> XMLHttpRequest </strong></dt>
  25 <dd>
  26   Use <a href="xhr">XMLHttpRequest</a>
  27   to request data from one or more servers.
  28   The <a href="declare_permissions">permissions</a> field
  29   of the manifest specifies
  30   which hosts the extension can send requests to.
  31   </dd>
  32 <dt> <strong>HTML5 and other emerging APIs</strong></dt>
  33 <dd> Google Chrome supports HTML5 features,
  34      along with other emerging APIs.
  35      Here are some of the APIs you can use:
  36   <ul>
  37   <li> audio
  38     (<a href="http://www.html5rocks.com/tutorials/audio/quick/">tutorial</a>) </li>
  39   <li> application cache
  40     (<a href="http://www.html5rocks.com/tutorials/appcache/beginner/">tutorial</a>) </li>
  41   <li> canvas
  42     (<a href="http://www.html5rocks.com/en/tutorials/#canvas">articles</a>) </li>
  43 {{?is_apps}}
  44   <li> fullscreen
  45     (<a href="http://updates.html5rocks.com/2011/10/Let-Your-Content-Do-the-Talking-Fullscreen-API">article</a>)
  46     <ul>
  47       <li>In Chrome Apps, fullscreen is entered without
  48         prompting the user or providing exit instructions.
  49         HTML5 fullscreen requires the <code>app.window.fullscreen</code>
  50         permission in the manifest.
  51         In normal webpages, the browser intercepts the ESC key to exit
  52         pointer lock ensuring a consistent escape method for users.
  53         That is also the behavior in Chrome Apps unless the
  54         <code>app.window.fullscreen.overrideEsc</code>
  55         permission is used to enable the app to call
  56         <code>preventDefault</code> on keydown and keyup events.</li>
  57     </ul>
  58   </li>
  59 {{/is_apps}}
  60   <li> geolocation
  61     (<a href="http://www.html5rocks.com/tutorials/geolocation/trip_meter/">tutorial</a>) </li>
  62   <li> local storage
  63     (<a href="http://www.html5rocks.com/en/tutorials/offline/storage/">tutorial</a>) </li>
  64   <li> notifications
  65     (<a href="http://www.html5rocks.com/tutorials/notifications/quick/">tutorial</a>) </li>
  66 {{?is_apps}}
  67   <li> pointer lock
  68     (<a href="http://www.html5rocks.com/en/tutorials/pointerlock/intro/">tutorial</a>)
  69     <ul>
  70       <li>In Chrome Apps, pointer lock is entered without
  71         requiring a user gesture,
  72         prompting the user, or providing exit instructions.
  73         Pointer lock requires the <code>pointerlock</code>
  74         permission in the manifest.
  75         Also, there is no default exit behavior. In normal webpages,
  76         the browser intercepts the ESC key to exit pointer lock.
  77         This behavior is not present in Chrome Apps.</li>
  78     </ul>
  79   </li>
  80 {{/is_apps}}
  81   <li> video
  82     (<a href="http://www.html5rocks.com/en/tutorials/video/basics/">tutorial</a>) </li>
  83   <li> web database
  84     (<a href="http://www.html5rocks.com/tutorials/webdatabase/todo/">tutorial</a>) </li>
  85   </ul>
  86   <p>
  87   See <a href="http://www.html5rocks.com">html5rocks.com</a>
  88   for HTML5 information, tutorials, an interactive playground,
  89   and links to other resources.
  90   </p>
  91 </dd>
  92
  93 <dt><strong> WebKit APIs </strong></dt>
  94 <dd>
  95   Because Google Chrome is built upon WebKit,
  96   your extensions can use WebKit APIs.
  97   Especially useful are the experimental CSS features
  98   such as filters, animations, and transformations.
  99   Here's an example of using WebKit styles
 100   to make the UI spin:
 101   <pre>&lt;style>
 102   div:hover {
 103     -webkit-transform: rotate(360deg);
 104     -webkit-transition: all 1s ease-out;
 105   }
 106 &lt;/style>
 107 </pre>
 108
 109 </dd>
 110 <dt><strong> V8 APIs</strong>, such as<strong> JSON </strong></dt>
 111 <dd> Because JSON is in V8, you don't need to include a JSON library to use JSON functions. </dd>
 112 <dt><strong>APIs in bundled libraries</strong></dt>
 113 <dd> If you want to use a library that the browser doesn't provide
 114 (for example, jQuery),
 115 you can bundle that library's JavaScript files with your extension.
 116 Bundled libraries work in extensions
 117 just as they do in other web pages.
 118 </dd>
 119 </dl>