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.html">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.html">XMLHttpRequest</a>
  27   to request data from one or more servers.
  28   The <a href="declare_permissions.html">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         Also, there is no default exit behavior. In normal webpages,
  50         the browser intercepts the ESC key to exit fullscreen.
  51         This behavior is not present in Chrome Apps.</li>
  52     </ul>
  53   </li>
  54 {{/is_apps}}
  55   <li> geolocation
  56     (<a href="http://www.html5rocks.com/tutorials/geolocation/trip_meter/">tutorial</a>) </li>
  57   <li> local storage
  58     (<a href="http://www.html5rocks.com/en/tutorials/offline/storage/">tutorial</a>) </li>
  59   <li> notifications
  60     (<a href="http://www.html5rocks.com/tutorials/notifications/quick/">tutorial</a>) </li>
  61 {{?is_apps}}
  62   <li> pointer lock
  63     (<a href="http://www.html5rocks.com/en/tutorials/pointerlock/intro/">tutorial</a>)
  64     <ul>
  65       <li>In Chrome Apps, pointer lock is entered without
  66         requiring a user gesture,
  67         prompting the user, or providing exit instructions.
  68         Also, there is no default exit behavior. In normal webpages,
  69         the browser intercepts the ESC key to exit pointer lock.
  70         This behavior is not present in Chrome Apps.</li>
  71     </ul>
  72   </li>
  73 {{/is_apps}}
  74   <li> video
  75     (<a href="http://www.html5rocks.com/en/tutorials/video/basics/">tutorial</a>) </li>
  76   <li> web database
  77     (<a href="http://www.html5rocks.com/tutorials/webdatabase/todo/">tutorial</a>) </li>
  78   </ul>
  79   <p>
  80   See <a href="http://www.html5rocks.com">html5rocks.com</a>
  81   for HTML5 information, tutorials, an interactive playground,
  82   and links to other resources.
  83   </p>
  84 </dd>
  85
  86 <dt><strong> WebKit APIs </strong></dt>
  87 <dd>
  88   Because Google Chrome is built upon WebKit,
  89   your extensions can use WebKit APIs.
  90   Especially useful are the experimental CSS features
  91   such as filters, animations, and transformations.
  92   Here's an example of using WebKit styles
  93   to make the UI spin:
  94   <pre>&lt;style>
  95   div:hover {
  96     -webkit-transform: rotate(360deg);
  97     -webkit-transition: all 1s ease-out;
  98   }
  99 &lt;/style>
 100 </pre>
 101
 102 </dd>
 103 <dt><strong> V8 APIs</strong>, such as<strong> JSON </strong></dt>
 104 <dd> Because JSON is in V8, you don't need to include a JSON library to use JSON functions. </dd>
 105 <dt><strong>APIs in bundled libraries</strong></dt>
 106 <dd> If you want to use a library that the browser doesn't provide
 107 (for example, jQuery),
 108 you can bundle that library's JavaScript files with your extension.
 109 Bundled libraries work in extensions
 110 just as they do in other web pages.
 111 </dd>
 112 </dl>