diff options
| author | kathyw@google.com <kathyw@google.com@0039d316-1c4b-4281-b951-d872f2087c98> | 2009-07-15 17:30:04 +0000 |
|---|---|---|
| committer | kathyw@google.com <kathyw@google.com@0039d316-1c4b-4281-b951-d872f2087c98> | 2009-07-15 17:30:04 +0000 |
| commit | 1dce5bac3b547984f3305f011a46caea412960c5 (patch) | |
| tree | 4eab5dbf6b59a363925d7fa4f7cc1e12c360f752 /chrome/common | |
| parent | 32a7ea645ed0fc1679728d14d0aaf73ff5a3bebe (diff) | |
| download | chromium_src-1dce5bac3b547984f3305f011a46caea412960c5.zip chromium_src-1dce5bac3b547984f3305f011a46caea412960c5.tar.gz chromium_src-1dce5bac3b547984f3305f011a46caea412960c5.tar.bz2 | |
First extensions doc putback (if Raf doesn't beat me).
This is a tutorial page that should be viewable at a URL such as
http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/helloworld.html
BUG=none
TEST=none
Review URL: http://codereview.chromium.org/149652
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@20743 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'chrome/common')
15 files changed, 410 insertions, 0 deletions
diff --git a/chrome/common/extensions/docs/helloworld.html b/chrome/common/extensions/docs/helloworld.html new file mode 100755 index 0000000..3209fff --- /dev/null +++ b/chrome/common/extensions/docs/helloworld.html @@ -0,0 +1,280 @@ +<!DOCTYPE HTML> +<html> +<head> +<meta charset="utf-8"> +<title>Extensions: Hello, World</title> +<link href="stylesheet.css" rel="stylesheet" type="text/css"> +</head> + +<body> +<h1>Hello, World</h1> + +<p> +This tutorial walks you through creating a simple extension. +To complete this tutorial, you must have Windows; +Linux and Mac don't yet support extensions. +</p> + +<p> +[PENDING: add a TOC and navigation links to other pages] +</p> + +<h2>Get your browser ready</h2> + +<p> +To develop extensions for Google Chrome, you need to set up your browser: +</p> + +<ol> + <li><a href="http://dev.chromium.org/getting-involved/dev-channel">Subscribe + to the Dev channel</a> of Google Chrome for Windows. </li> + <li><a href="http://dev.chromium.org/developers/creating-and-using-profiles">Create + a separate profile</a> for testing + <em>(optional but highly recommended)</em>. + Having a testing profile means that you can use Google Chrome + (with your default profile) + for everyday browsing, + even if your extension has horrible bugs.</li> +</ol> + +<h2>Create and load a toolbar extension</h2> +<p> +In this section, you'll write a small extension +that puts a bit of UI into the bottom of the Google Chrome window — +the <em>toolbar</em>. +</p> + +<ol> + <li> + Create a folder somewhere on your computer to contain your extension's code. + We'll assume the folder is located at + <strong><code>c:\myext</code></strong>, + but it can be anywhere. + </li> + <li> + Inside your extension's folder, + create a text file called <strong><code>manifest.json</code></strong>, + and put this in it: +<pre>{ + "name": "My First Extra", + "version": "1.0", + "description": "The first ext* that I made.", + "toolstrips": [ + "my_toolstrip.html" + ] +}</pre> + </li> + <li> + In the same folder, create a text file called + <strong><code>my_toolstrip.html</code></strong>, + and put this in it: +<pre><div class="toolstrip-button"> + <span>Hello, World!</span> +</div></pre> + </li> + <li> Load the extension: + <ol type="a"> + <li> + Change the shortcut that you use to start the browser + (or create a new one) + so that it has the <code>--enable-extensions</code> + and <code>--load-extension</code> flags. + For example, if your extension is at <code>c:\myext</code>, + your shortcut might look something like this: +<pre>chrome.exe <span class="newCode">--enable-extensions --load-extension="c:\myext"</span></pre> + </li> + <li>Exit Google Chrome. + If you have a separate profile for testing, + you only need to exit the browser instances that use the testing profile. </li> + <li>Double-click the shortcut to start the browser.</li> + </ol> + <p> + <b>Note:</b> + For details on changing shortcut properties, see + <a href="http://dev.chromium.org/developers/creating-and-using-profiles">Creating + and Using Profiles</a>.</p> + </li> +</ol> + +<p> +You should see the UI for your extension at the bottom left of the browser, looking something like this: +</p> + +<table> + <tbody> + <tr> + <td align="center" width="33%"><img src="images/hw-1.gif" + alt="" /></td> + <td align="center" width="33%"><img src="images/hw-2.gif" + alt="" /></td> + <td align="center" width="33%"><img src="images/hw-3.gif" + alt="" /></td> + </tr> + <tr> + <th align="center" width="33%"> default appearance</th> + <th align="center" width="33%"> initial onhover appearance</th> + <th align="center" width="33%"> final onhover appearance</th> + </tr> + </tbody> +</table> + + <p> + Your extension's button is automatically styled + to look like it belongs in the browser. + If you put the cursor over the button, + the button gets a nice, rounded edge, + just like the buttons in the bookmark bar. + After a while, a tooltip comes up, identifying the extension. + </p> + <p> [PENDING: troubleshooting info should go here. + what are symptoms of common typos, including misnamed files? + what are the symptoms if you don't have the dev channel?] </p> + +<h2>Add code to the extension</h2> +<p> In this step, you'll make your extension <em>do</em> something besides just look good. </p> +<ol> + <li> + <p> Inside your extension's folder, + create a text file called <strong><code>hello_world.html</code></strong>, + and add the following code to it:</p> + <blockquote> <a href="samples/hello_world.txt">CSS + and JavaScript code for hello_world</a></blockquote> + </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>> + <span>Hello, World!</span> +</div></pre> + </li> + <li> + Restart the browser to load the new version of the extension.</li> + <li>Click the button. + A window should come up that displays <code>hello_world.html</code>. </li> +</ol> +<p> It should look something like this:</p> + +<img src="images/hello_world-page.gif" alt="a window with a grid of images related to HELLO WORLD" /> + +<p> If you don't see that page, +try the instructions again, +following them exactly. +Don't try loading an HTML file that isn't in the extension's folder — +it won't work! </p> + +<h2>Debug the extension</h2> +<p> +You can use the browser's built-in developer tools +to view your extension's code, +display debugging output, +and debug your extension. +</p> +<ol> + <li> + <p> Edit <code>my_toolstrip.html</code>, so that it has the following code: </p> +<pre><span class="newCode"><script> +function helloWorld() { + var hwFile = 'hello_world.html'; + console.log("in helloWorld()"); + window.open(hwFile); +} +</script></span> + +<div class="toolstrip-button" onclick="<span class="newCode">helloWorld();</span>"> +<span>Hello, World!</span> +</div></pre> + <p> The relocated code still has the same effect, + but now it has some debugging output, + thanks to the call to <code>console.log()</code>.</p> + </li> + <li> + Restart the browser, so that it loads your new version of the extension. + + <div class="note"> + <b>Tip:</b> + If you don't want to restart your browser, + you can get an updated version of the extension + by opening a new window. + The new window will contain the updated extension; + old windows will contain the old version. + </div> + </li> + <li> + Right-click the <strong>Hello, World!</strong> button + (at the bottom left) + to bring up the Developer Tools window + for this instance of your toolbar button. + It should look something like this: + <p> + <img src="images/devtools-1.gif" alt="" /> </p> + </li> + <li> + Click the <strong>Scripts</strong> button. + If necessary, choose <strong>my_toolstrip.html</strong> + from the list of scripts. + The result should be something like this: + <p> + <img src="images/devtools-2.gif" alt="" /> </p> + </li> + <li> + Set a debugging breakpoint at the <code>window.open()</code> statement + by clicking <strong>5</strong> in the left column: + <p> + <img src="images/devtools-3.gif" alt="" /> </p> + </li> + <li> + Click the Console button + (second from left, at the bottom of the Developer Tools window) + so that you can see both the code and the console. + <p> + <img src="images/devtools-4.gif" alt="" /></p> + </li> + <li> + Back in the main browser window, + click the <strong>Hello, World!</strong> button, + so that the extension begins executing. + You should see the output of <code>console.log()</code> + along with the line number, + and execution should stop just before + the call to <code>window.open()</code>. + <p> + <img src="images/devtools-5.gif" alt="" /> + </p> + + <p> + The Call Stack area at the right of the tools window shows that + the <code>helloWorld()</code> method was called by an anonymous function + that was called by <code>onclick</code>. + Anywhere in the Call Stack or console that you see a file and line number + (for example, "my_toolstrip.html:4"), + you can click that text to see the relevant line of code. </p> + </li> + <li> + In the upper right part of the tools window, + scroll down (if necessary) until you can see the local scope variables. + This section shows the current values of all variables in the current scope. + For example, you can see that <code>hwFile</code> is a local variable + that has the value "hello_world.html". + <p> + <img src="images/devtools-6.gif" alt="" /> </p> + </li> + <li> + Click the buttons at the upper right of the window + to resume execution or to step through the code. + Once the call to <code>window.open()</code> returns, + the main browser window should open a new tab + that displays the contents of <code>hello_world.html</code>.</li> +</ol> +<p> +You now know how to load and debug an extension!</p> + +<h2>Summary</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> + +</body> +</html> diff --git a/chrome/common/extensions/docs/images/devtools-1.gif b/chrome/common/extensions/docs/images/devtools-1.gif Binary files differnew file mode 100755 index 0000000..7e70df7 --- /dev/null +++ b/chrome/common/extensions/docs/images/devtools-1.gif diff --git a/chrome/common/extensions/docs/images/devtools-2.gif b/chrome/common/extensions/docs/images/devtools-2.gif Binary files differnew file mode 100755 index 0000000..a294906 --- /dev/null +++ b/chrome/common/extensions/docs/images/devtools-2.gif diff --git a/chrome/common/extensions/docs/images/devtools-3.gif b/chrome/common/extensions/docs/images/devtools-3.gif Binary files differnew file mode 100755 index 0000000..cf34865 --- /dev/null +++ b/chrome/common/extensions/docs/images/devtools-3.gif diff --git a/chrome/common/extensions/docs/images/devtools-4.gif b/chrome/common/extensions/docs/images/devtools-4.gif Binary files differnew file mode 100755 index 0000000..a5340f0 --- /dev/null +++ b/chrome/common/extensions/docs/images/devtools-4.gif diff --git a/chrome/common/extensions/docs/images/devtools-5.gif b/chrome/common/extensions/docs/images/devtools-5.gif Binary files differnew file mode 100755 index 0000000..5ef3553 --- /dev/null +++ b/chrome/common/extensions/docs/images/devtools-5.gif diff --git a/chrome/common/extensions/docs/images/devtools-6.gif b/chrome/common/extensions/docs/images/devtools-6.gif Binary files differnew file mode 100755 index 0000000..0505d6a --- /dev/null +++ b/chrome/common/extensions/docs/images/devtools-6.gif diff --git a/chrome/common/extensions/docs/images/hello-world-1.gif b/chrome/common/extensions/docs/images/hello-world-1.gif Binary files differnew file mode 100755 index 0000000..165ca36b --- /dev/null +++ b/chrome/common/extensions/docs/images/hello-world-1.gif diff --git a/chrome/common/extensions/docs/images/hello-world-2.gif b/chrome/common/extensions/docs/images/hello-world-2.gif Binary files differnew file mode 100755 index 0000000..f6ee358 --- /dev/null +++ b/chrome/common/extensions/docs/images/hello-world-2.gif diff --git a/chrome/common/extensions/docs/images/hello_world-page.gif b/chrome/common/extensions/docs/images/hello_world-page.gif Binary files differnew file mode 100755 index 0000000..514b11e --- /dev/null +++ b/chrome/common/extensions/docs/images/hello_world-page.gif diff --git a/chrome/common/extensions/docs/images/hw-1.gif b/chrome/common/extensions/docs/images/hw-1.gif Binary files differnew file mode 100755 index 0000000..da8564b --- /dev/null +++ b/chrome/common/extensions/docs/images/hw-1.gif diff --git a/chrome/common/extensions/docs/images/hw-2.gif b/chrome/common/extensions/docs/images/hw-2.gif Binary files differnew file mode 100755 index 0000000..5549604 --- /dev/null +++ b/chrome/common/extensions/docs/images/hw-2.gif diff --git a/chrome/common/extensions/docs/images/hw-3.gif b/chrome/common/extensions/docs/images/hw-3.gif Binary files differnew file mode 100755 index 0000000..729d241 --- /dev/null +++ b/chrome/common/extensions/docs/images/hw-3.gif diff --git a/chrome/common/extensions/docs/samples/hello_world.txt b/chrome/common/extensions/docs/samples/hello_world.txt new file mode 100755 index 0000000..13c2f95 --- /dev/null +++ b/chrome/common/extensions/docs/samples/hello_world.txt @@ -0,0 +1,45 @@ +<style> +img { + margin:5px; + border:2px solid black; + vertical-align:middle; + width:75px; + height:75px; +} +</style> + +<script> +var req = new XMLHttpRequest(); +req.open( + "GET", + "http://api.flickr.com/services/rest/?" + + "method=flickr.photos.search&" + + "api_key=90485e931f687a9b9c2a66bf58a3861a&" + + "text=hello%20world&" + + "safe_search=1&" + // 1 is "safe" + "content_type=1&" + // 1 is "photos only" + "sort=relevance&" + // another good one is "interestingness-desc" + "per_page=95", + true); +req.onload = showPhotos; +req.send(null); + +function showPhotos() { + var photos = req.responseXML.getElementsByTagName("photo"); + + for (var i = 0, photo; photo = photos[i]; i++) { + var img = document.createElement("image"); + img.src = constructImageURL(photo); + document.body.appendChild(img); + } +} + +// See: http://www.flickr.com/services/api/misc.urls.html +function constructImageURL(photo) { + return "http://farm" + photo.getAttribute("farm") + + ".static.flickr.com/" + photo.getAttribute("server") + + "/" + photo.getAttribute("id") + + "_" + photo.getAttribute("secret") + + "_s.jpg"; +} +</script> diff --git a/chrome/common/extensions/docs/stylesheet.css b/chrome/common/extensions/docs/stylesheet.css new file mode 100755 index 0000000..a764843 --- /dev/null +++ b/chrome/common/extensions/docs/stylesheet.css @@ -0,0 +1,85 @@ +@charset "UTF-8"; +body { + font-family:Arial, Helvetica, sans-serif; + font-size: 13px; +} +h2,h3 { + margin-top: 2em; +} +.comment { + color: rgb(255, 0, 0); +} +.optional { + color: rgb(125, 125, 125); +} +.apiGroup div.description { + margin-left: 2em; +} +.apiGroup div.summary { + border: 1px solid rgb(147, 180, 217); + font-family: "Courier New", Courier, monospace; + padding: 0.5em; + background-color: rgb(202, 222, 244); + /* white-space: pre; */ +} +div.summary div { + margin-bottom: 0.5em; +} +pre .newCode { + background-color: rgb(255, 255, 0); +} +pre { + border: 1px solid rgb(187, 187, 187); + padding: 0.5em; + background-color: rgb(250, 250, 250); +} +div#toc { + background-color: rgb(232, 237, 235); + border: 1px solid rgb(176, 189, 204); + display: inline; + float: right; + margin: 5px 0px 5px 20px; + padding: 5px; + width: 250px; +} +#toc p { + font-weight: bold; + margin: 0px; +} +#toc ol { + list-style-image: none; + list-style-type: none; + padding-left: 1em; + /* margin-top: 1em; //PROBABLY NEED TO SET THIS */ +} +#breadcrumbs { + font-size: 80%; +} +.exampleLink { + font-size: 80%; +} +dd { + margin-bottom: 0.75em; +} +table { + margin-top: 1em; +} +ol li { + margin-top: 1em; +} +/* no styles, for now at least */ +.example { +} +p#classSummary { +} +.apiItem { +} +div.note { + background-color: rgb(202, 222, 244); + border: 1px solid rgb(147, 180, 217); + padding: 0.5em; + margin: 1em 0px; +} +img { + border-width: 0px; +}
\ No newline at end of file |
