diff options
9 files changed, 149 insertions, 21 deletions
diff --git a/chrome/common/extensions/docs/api_other.html b/chrome/common/extensions/docs/api_other.html new file mode 100755 index 0000000..ed40a76 --- /dev/null +++ b/chrome/common/extensions/docs/api_other.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<!-- This page is a placeholder for generated extensions api doc. Note: + 1) The <head> information in this page is significant, should be uniform + across api docs and should be edited only with knowledge of the + templating mechanism. + 2) The <body> tag *must* retain id="body" + 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a + browser, it will be re-generated from the template, json schema and + authored overview content. + 4) The <body>.innerHTML is also generated by an offline step so that this + page may easily be indexed by search engines. + + TODO(rafaelw): Abstract this into a "pageshell" that becomes the single + version of page template shell and the "instance" pages (bookmarks.html, + etc...) can be generated with a build step. +--> +<!-- <html> must retain id="template --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <!-- <head> data is significant and loads the needed libraries and styles --> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title jscontent="pageTitle">pageTitle</title> + <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> + <script type="text/javascript" + src="../../../third_party/jstemplate/jstemplate_compiled.js"> + </script> + <script type="text/javascript" src="js/api_page_generator.js"></script> + <script type="text/javascript" src="js/bootstrap.js"></script> + </head> + <!-- <body> content is completely generated. Do not edit, as it will be + and rewritten. --> + <body> + </body> +</html> diff --git a/chrome/common/extensions/docs/css/ApiRefStyles.css b/chrome/common/extensions/docs/css/ApiRefStyles.css index 4ff0172..083a7e5 100755 --- a/chrome/common/extensions/docs/css/ApiRefStyles.css +++ b/chrome/common/extensions/docs/css/ApiRefStyles.css @@ -42,7 +42,7 @@ div.summary div { margin-bottom: 0.5em; } -pre .newCode { +pre b { background-color: rgb(255, 255, 0); } diff --git a/chrome/common/extensions/docs/static/api_index.html b/chrome/common/extensions/docs/static/api_index.html index 5cd885d..53e8e96 100755 --- a/chrome/common/extensions/docs/static/api_index.html +++ b/chrome/common/extensions/docs/static/api_index.html @@ -17,3 +17,12 @@ Here are the supported chrome.* APIs: <li><a href="windows.html">windows</a></li> </ul> +<p> +Unless the doc says otherwise, +methods in the chrome.* APIs are asynchronous: +they return immediately, +without waiting for the operation to finish. +If you need to know the outcome of an operation, +then you pass a callback function into the method. +<span class="comment">[PENDING: update/elaborate on that]</span> +</p> diff --git a/chrome/common/extensions/docs/static/api_other.html b/chrome/common/extensions/docs/static/api_other.html new file mode 100755 index 0000000..260141c --- /dev/null +++ b/chrome/common/extensions/docs/static/api_other.html @@ -0,0 +1,56 @@ +<div id="pageData-title" class="pageData">Other APIs</div> + +<p> +In addition to the +<a href="api_index.html">chrome.* APIs</a>, +extensions can use all the APIs +that the browser provides +to web pages and apps. +If the browser doesn't support an API you want to use, +you can bundle additional API libraries into your extension. +</p> + +<p>Here's a sampling of the APIs that extensions can use:</p> + +<dl> +<dt><strong> Standard JavaScript APIs </strong></dt> +<dd> <span class="comment">[PENDING: define, explain; link to complete list]</span> +<!-- Use onclick in your toolbar div to add click behavior. +E.g. window.open(someUrl). --></dd> +<dt><strong> XMLHttpRequest </strong></dt> +<dd> + Lets the extension request data from one or more servers. + The manifest specifies + which domains the extension can send requests to. + <span class="comment">[PENDING: link to doc]</span></dd> +<dt><strong> WebKit APIs </strong></dt> +<dd> + Because Google Chrome is built upon WebKit, + your extensions can use WebKit APIs. + Especially useful are the experimental CSS features + such as filters, animations, and transformations. + Here's an example of using WebKit styles + to make the UI spin: + <pre><style> + div:hover { + -webkit-transform: rotate(360deg); + -webkit-transition: all sl ease-out; + } +</style> +</pre> + <p class="comment">[PENDING: link to complete list of webkit apis]</p> +</dd> +<dt><strong> V8 APIs</strong>, such as<strong> JSON </strong></dt> +<dd> JSON is in V8, so you don't need to include a JSON library to use JSON functions. <span class="comment">[PENDING: what other APIs are in v8? link to complete list]</span></dd> +<dt> <strong>HTML5</strong> <strong>APIs</strong>, such as <strong>localStorage</strong> and <strong>Web Workers</strong></dt> +<dd> HTML5 is still being defined and implemented, but one crucial feature it will provide is local storage... <!-- +localStorage.setItem("foo", "bar"); ... localStorage.getItem("foo"); --> <span class="comment">[PENDING: mention Web Workers, too. Other important API? link to complete list]</span></dd> +<dt><strong>APIs in bundled libraries</strong></dt> +<dd> If you want to use a library that the browser doesn't provide +(for example, jQuery), +you can bundle that library's JavaScript files with your extension. +Bundled libraries work in extensions +just as they would in any other web pages. +</dd> +</dl> + diff --git a/chrome/common/extensions/docs/static/background_pages.html b/chrome/common/extensions/docs/static/background_pages.html index b412635..79ec203 100755 --- a/chrome/common/extensions/docs/static/background_pages.html +++ b/chrome/common/extensions/docs/static/background_pages.html @@ -1,4 +1,5 @@ <div id="pageData-title" class="pageData">Background Pages</div> +<div id="pageData-showTOC" class="pageData">true</div> <p> A common need for extensions is to have @@ -16,7 +17,7 @@ The difference is that the background page exists for the lifetime of your extension, and only one instance of it at a time is active.</p> -<h2>Details</h2> +<h2 id="manifest">Manifest</h2> <p> Register your background page in the extension manifest, like this: @@ -26,10 +27,12 @@ Register your background page in the extension manifest, like this: "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", - "background_page": "background.html", + <b>"background_page": "background.html",</b> "toolstrips": ["toolstrip.html"] }</pre> +<h2>Details</h2> + <p> Your toolstrip will likely contain only the necessary code to display the toolstrip UI, diff --git a/chrome/common/extensions/docs/static/getstarted.html b/chrome/common/extensions/docs/static/getstarted.html index fdf05a6..381eacf 100755 --- a/chrome/common/extensions/docs/static/getstarted.html +++ b/chrome/common/extensions/docs/static/getstarted.html @@ -1,4 +1,4 @@ -<div id="pageData-title" class="pageData">Tutorial: Getting Started</div> +<div id="pageData-title" class="pageData">Tutorial: Getting Started (Hello, World!)</div> <div id="pageData-showTOC" class="pageData">true</div> <p> @@ -70,7 +70,7 @@ at the bottom of the Google Chrome window. <code>--load-extension</code> flag. For example, if your extension is at <code>c:\myext</code>, your shortcut might look something like this: -<pre>chrome.exe <span class="newCode">--load-extension="c:\myext"</span></pre> +<pre>chrome.exe <b>--load-extension="c:\myext"</b></pre> </li> <li>Exit Google Chrome. If you have a separate profile for testing, @@ -138,7 +138,7 @@ You should see the UI for your extension at the bottom left of the browser, look </li> <li> <p> Edit <code>my_toolstrip.html</code>, so that it has the following code: </p> - <pre><div class="toolstrip-button"<span class="newCode"> onclick="window.open('hello_world.html')"</span>> + <pre><div class="toolstrip-button"<b> onclick="window.open('hello_world.html')"</b>> <span>Hello, World!</span> </div></pre> </li> @@ -157,11 +157,35 @@ following them exactly. Don't try loading an HTML file that isn't in the extension's folder — it won't work! </p> -<h2 id="summary">Summary</h2> +<h2 id="summary">Now what?</h2> <p> [PENDING: Summarize what we did, what it means, what else we would've done if this were a real extension (e.g. package it), -and where to find more information. -Suggest where to go next.]</p> +and where to find more information.]</p> + +<ul> + <li> + Subscribe to + <a href="http://groups.google.com/group/chromium-extensions/subscribe">chromium-extensions</a> + to keep up to date with the latest news + </li> + <li> + Learn how to debug your extension by following the + <a href="tut_debugging.html">debugging tutorial</a> + </li> + <li> + Look at some + <a href="http://sites.google.com/a/chromium.org/dev/developers/design-documents/extensions/samples">sample extensions</a> + </li> + <li> + Learn more about + <a href="toolstrips.html">toolstrips</a> + </li> + <li> + <a href="packaging.html">Package</a> + your extension into a <code>.crx</code> file + so you can share it with your friends + </li> +</ul> diff --git a/chrome/common/extensions/docs/static/toolstrip.html b/chrome/common/extensions/docs/static/toolstrip.html index 8921918..60ff1bb 100755 --- a/chrome/common/extensions/docs/static/toolstrip.html +++ b/chrome/common/extensions/docs/static/toolstrip.html @@ -9,27 +9,29 @@ so anything you can do with HTML/CSS/JavaScript, you can do with toolstrips. </p> -<h2>Details</h2> -<p>Register your toolstrips in the extension manifest, like this:</p> +<h2 id="manifest">Manifest</h2> +<p>Register your toolstrips in the extension manifest like this:</p> <pre>{ "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", - "toolstrips": [ +<b> "toolstrips": [ "one_toolstrip.html", "two_toolstrip.html" - ] + ]</b> }</pre> +<h2>Creating buttons</h2> <p>You can create buttons that look like the bookmark bar buttons using this template:</p> <pre><div class="toolstrip-button"> <!-- Image is optional and should be a 16x16 icon. --> - <img src="path/to/some_icon.png"> + <img src="<em>path/to/some_icon.png</em>"> <span>My Button</span> </div></pre> + <h2>Debugging tips</h2> <ul> diff --git a/chrome/common/extensions/docs/static/tut_debugging.html b/chrome/common/extensions/docs/static/tut_debugging.html index 61e139f..ff06bc9 100644 --- a/chrome/common/extensions/docs/static/tut_debugging.html +++ b/chrome/common/extensions/docs/static/tut_debugging.html @@ -16,15 +16,15 @@ and debug your extension. <ol> <li> <p> Edit <code>my_toolstrip.html</code>, so that it has the following code: </p> -<pre><span class="newCode"><script> +<pre><b><script> function helloWorld() { var hwFile = 'hello_world.html'; console.log("in helloWorld()"); window.open(hwFile); } -</script></span> +</script></b> -<div class="toolstrip-button" onclick="<span class="newCode">helloWorld();</span>"> +<div class="toolstrip-button" onclick="<b>helloWorld();</b>"> <span>Hello, World!</span> </div></pre> <p> The relocated code still has the same effect, @@ -122,9 +122,9 @@ that might be confusing. that displays the contents of <code>hello_world.html</code>.</li> </ol> <p> -You now know how to load and debug an extension!</p> +You now know how to debug an extension!</p> -<h2 id="summary">Summary</h2> +<h2 id="summary">What next?</h2> <p> [PENDING: Summarize what we did, diff --git a/chrome/common/extensions/docs/template/api_template.html b/chrome/common/extensions/docs/template/api_template.html index cc0eee4..18f4ebf 100755 --- a/chrome/common/extensions/docs/template/api_template.html +++ b/chrome/common/extensions/docs/template/api_template.html @@ -60,10 +60,10 @@ </ul> </li> <li> <a href="api_index.html">chrome.* APIs</a> </li> - <li>Other APIs</li> + <li> <a href="api_other.html">Other APIs</a> </li> </ul> </li> - <li>Samples</li> + <li><a href="http://dev.chromium.org/developers/design-documents/extensions/samples">Samples</a></li> </ul> </div> |