summaryrefslogtreecommitdiffstats
path: root/chrome/common/extensions
diff options
context:
space:
mode:
Diffstat (limited to 'chrome/common/extensions')
-rw-r--r--chrome/common/extensions/docs/examples/tutorials/getstarted.zipbin5577 -> 6172 bytes
-rw-r--r--chrome/common/extensions/docs/examples/tutorials/getstarted/manifest.json1
-rw-r--r--chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html71
-rw-r--r--chrome/common/extensions/docs/examples/tutorials/getstarted/popup.js37
-rw-r--r--chrome/common/extensions/docs/getstarted.html77
-rw-r--r--chrome/common/extensions/docs/samples.html2
-rw-r--r--chrome/common/extensions/docs/samples.json5
-rw-r--r--chrome/common/extensions/docs/static/getstarted.html93
8 files changed, 165 insertions, 121 deletions
diff --git a/chrome/common/extensions/docs/examples/tutorials/getstarted.zip b/chrome/common/extensions/docs/examples/tutorials/getstarted.zip
index 13d0f0a..c421bef 100644
--- a/chrome/common/extensions/docs/examples/tutorials/getstarted.zip
+++ b/chrome/common/extensions/docs/examples/tutorials/getstarted.zip
Binary files differ
diff --git a/chrome/common/extensions/docs/examples/tutorials/getstarted/manifest.json b/chrome/common/extensions/docs/examples/tutorials/getstarted/manifest.json
index 5030c0f..7b3f37b 100644
--- a/chrome/common/extensions/docs/examples/tutorials/getstarted/manifest.json
+++ b/chrome/common/extensions/docs/examples/tutorials/getstarted/manifest.json
@@ -1,6 +1,7 @@
{
"name": "Hello World",
"version": "1.0",
+ "manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
diff --git a/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html b/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html
index a3cab7a..7012d86 100644
--- a/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html
+++ b/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html
@@ -1,50 +1,25 @@
-<style>
-body {
- min-width:357px;
- overflow-x:hidden;
-}
+<!doctype html>
+<html>
+ <head>
+ <title>Getting Started Extension's Popup</title>
+ <style>
+ body {
+ min-width:357px;
+ overflow-x:hidden;
+ }
-img {
- margin:5px;
- border:2px solid black;
- vertical-align:middle;
- width:75px;
- height:75px;
-}
-</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=20",
- 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>
+ <!-- JavaScript and HTML must be in separate files for security. -->
+ <script src="popup.js></script>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.js b/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.js
new file mode 100644
index 0000000..5920eae
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.js
@@ -0,0 +1,37 @@
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+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=20",
+ 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";
+}
diff --git a/chrome/common/extensions/docs/getstarted.html b/chrome/common/extensions/docs/getstarted.html
index 1eec53b..6b712a7 100644
--- a/chrome/common/extensions/docs/getstarted.html
+++ b/chrome/common/extensions/docs/getstarted.html
@@ -362,24 +362,25 @@
<div id="pageData-showTOC" class="pageData">true</div>
<p>
-This tutorial walks you through creating a simple extension.
-You'll add an icon to Google Chrome
-that, when clicked, displays an automatically generated page.
-The icon and page will look something like this:
+ This tutorial walks you through creating a simple extension. You'll add an
+ icon to Google Chrome that, when clicked, displays an automatically generated
+ page. The icon and page will look something like this:
</p>
-<img src="images/hello-world-small.png" width="300" height="221" alt="a window with a grid of images related to HELLO WORLD">
+<img src="images/hello-world-small.png" width="300" height="221" alt="a window with a grid of images related to 'Hello World'">
<p>
-You can develop extensions using any release of Google Chrome,
-on Windows, Mac, or Linux.
+ You can develop extensions using any release of Google Chrome, on Windows,
+ Mac, or Linux. Extensions you develop on one platform should run without
+ change on every platform Chrome supports.
</p>
<h2 id="load">Create and load an extension</h2>
+
<p>
-In this section, you'll write an extension
-that adds a <em>browser action</em>
-to the toolbar of Google Chrome.
+ The extension we'll walk through creating here is a
+ <a href="browserAction.html">Browser Action</a>, which adds a button to
+ Chrome's toolbar whose behavior you can control.
</p>
<ol>
@@ -387,12 +388,15 @@ to the toolbar of Google Chrome.
Create a folder somewhere on your computer to contain your extension's code.
</li>
<li>
- Inside your extension's folder,
- create a text file called <strong><code>manifest.json</code></strong>,
- and put this in it:
-<pre>{
+ <p>
+ Inside your extension's folder, create a text file called
+ <strong><code>manifest.json</code></strong>, and fill it with the
+ following code:
+ </p>
+ <pre>{
"name": "My First Extension",
"version": "1.0",
+ "manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
@@ -403,15 +407,16 @@ to the toolbar of Google Chrome.
}</pre>
</li>
<li>
- Copy this icon to the same folder:<br>
- <table cellpadding="0" cellspacing="0" style="border:0">
- <tbody><tr>
- <td style="text-align:center; border:0;"><a href="examples/tutorials/getstarted/icon.png"><img src="examples/tutorials/getstarted/icon.png" width="19" height="19" border="0"></a><br>
- <a href="examples/tutorials/getstarted/icon.png">Download icon.png</a></td>
- </tr>
- </tbody></table>
+ <p>Copy this icon to the same folder:</p>
+ <div style="width: 150px; text-align: center;">
+ <a href="examples/tutorials/getstarted/icon.png" download="icon">
+ <img src="examplex/tutorials/getstarted/icon.png" width="19" height="19" alt="" style="display: block; margin: 0.25em auto;">
+ Download icon.png
+ </a>
+ </div>
</li>
- <li id="load-ext"> Load the extension.
+ <li id="load-ext">
+ <p>Load the extension.</p>
<ol type="a">
<li style="margin-top:0">
Bring up the extensions management page
@@ -453,22 +458,30 @@ as the following screenshot shows.
</p>
<h2 id="code">Add code to the extension</h2>
-<p> In this step, you'll make your extension <em>do</em> something besides just look good. </p>
+<p>
+ In this step, you'll make your extension <em>do</em> something besides just
+ look good.
+</p>
+
<ol>
<li>
- <p> Edit <code>manifest.json</code> to add the following line:</p>
-<pre> ...
+ <p>Edit <code>manifest.json</code> to add the following line:</p>
+ <pre>...
"browser_action": {
"default_icon": "icon.png"<b>,
"default_popup": "popup.html"</b>
},
- ...
-</pre>
- <p> Inside your extension's folder,
- create a text file called <strong><code>popup.html</code></strong>,
- and add the following code to it:</p>
- <blockquote> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html?content-type=text/plain" target="_blank">CSS
- and JavaScript code for hello_world</a></blockquote>
+ ...</pre>
+
+ <p>
+ Inside your extension's folder, create two text files called
+ <strong><code>popup.html</code></strong> and
+ <strong><code>popup.js</code></strong>. Add the following code to
+ these files:
+ </p>
+ <blockquote>
+ <a href="examples/tutorials/getstarted/popup.html" target="_blank">HTML code (popup.html)</a> and
+ <a href="examples/tutorials/getstarted/popup.js" target="_blank">JavaScript code (popup.js)</a> for hello_world </blockquote>
</li>
<li>
Return to the extensions management page,
diff --git a/chrome/common/extensions/docs/samples.html b/chrome/common/extensions/docs/samples.html
index 2677e5b..350296d 100644
--- a/chrome/common/extensions/docs/samples.html
+++ b/chrome/common/extensions/docs/samples.html
@@ -2179,6 +2179,8 @@
<code><a target="_blank" href="examples/tutorials/getstarted/manifest.json">manifest.json</a></code>
</li><li>
<code><a target="_blank" href="examples/tutorials/getstarted/popup.html">popup.html</a></code>
+ </li><li>
+ <code><a target="_blank" href="examples/tutorials/getstarted/popup.js">popup.js</a></code>
</li>
</ul>
</div>
diff --git a/chrome/common/extensions/docs/samples.json b/chrome/common/extensions/docs/samples.json
index 3ba3573..9af2653 100644
--- a/chrome/common/extensions/docs/samples.json
+++ b/chrome/common/extensions/docs/samples.json
@@ -1194,9 +1194,10 @@
"search_string": "HELLO WORLD THE FIRST EXTENSION THAT I MADE. BROWSER_ACTION",
"source_files": [
"manifest.json",
- "popup.html"
+ "popup.html",
+ "popup.js"
],
- "source_hash": "f8c01d82bfac2dd8fd8eb57022e7a12e316ecf60",
+ "source_hash": "074b48f31f670cf36fdcc201b04ec2cfa87204e8",
"zip_path": "examples\/tutorials\/getstarted.zip"
},
{
diff --git a/chrome/common/extensions/docs/static/getstarted.html b/chrome/common/extensions/docs/static/getstarted.html
index c72546f..7fd0407 100644
--- a/chrome/common/extensions/docs/static/getstarted.html
+++ b/chrome/common/extensions/docs/static/getstarted.html
@@ -2,26 +2,28 @@
<div id="pageData-showTOC" class="pageData">true</div>
<p>
-This tutorial walks you through creating a simple extension.
-You'll add an icon to Google Chrome
-that, when clicked, displays an automatically generated page.
-The icon and page will look something like this:
+ This tutorial walks you through creating a simple extension. You'll add an
+ icon to Google Chrome that, when clicked, displays an automatically generated
+ page. The icon and page will look something like this:
</p>
<img src="images/hello-world-small.png"
- width="300" height="221"
- alt="a window with a grid of images related to HELLO WORLD" />
+ width="300"
+ height="221"
+ alt="a window with a grid of images related to 'Hello World'">
<p>
-You can develop extensions using any release of Google Chrome,
-on Windows, Mac, or Linux.
+ You can develop extensions using any release of Google Chrome, on Windows,
+ Mac, or Linux. Extensions you develop on one platform should run without
+ change on every platform Chrome supports.
</p>
<h2 id="load">Create and load an extension</h2>
+
<p>
-In this section, you'll write an extension
-that adds a <em>browser action</em>
-to the toolbar of Google Chrome.
+ The extension we'll walk through creating here is a
+ <a href="browserAction.html">Browser Action</a>, which adds a button to
+ Chrome's toolbar whose behavior you can control.
</p>
<ol>
@@ -29,12 +31,15 @@ to the toolbar of Google Chrome.
Create a folder somewhere on your computer to contain your extension's code.
</li>
<li>
- Inside your extension's folder,
- create a text file called <strong><code>manifest.json</code></strong>,
- and put this in it:
-<pre>{
+ <p>
+ Inside your extension's folder, create a text file called
+ <strong><code>manifest.json</code></strong>, and fill it with the
+ following code:
+ </p>
+ <pre>{
"name": "My First Extension",
"version": "1.0",
+ "manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
@@ -45,19 +50,21 @@ to the toolbar of Google Chrome.
}</pre>
</li>
<li>
- Copy this icon to the same folder:<br>
- <table cellpadding="0" cellspacing="0" style="border:0">
- <tr>
- <td style="text-align:center; border:0;"><a
- href="examples/tutorials/getstarted/icon.png"
- ><img src="examples/tutorials/getstarted/icon.png"
- width="19" height="19" border="0"></a><br>
- <a href="examples/tutorials/getstarted/icon.png"
- >Download icon.png</a></td>
- </tr>
- </table>
+ <p>Copy this icon to the same folder:</p>
+ <div style="width: 150px; text-align: center;">
+ <a href='examples/tutorials/getstarted/icon.png'
+ download='icon'>
+ <img src='examplex/tutorials/getstarted/icon.png'
+ width='19'
+ height='19'
+ alt=''
+ style='display: block; margin: 0.25em auto;'>
+ Download icon.png
+ </a>
+ </div>
</li>
- <li id="load-ext"> Load the extension.
+ <li id="load-ext">
+ <p>Load the extension.</p>
<ol type="a">
<li style="margin-top:0" />
Bring up the extensions management page
@@ -102,24 +109,32 @@ as the following screenshot shows.
</p>
<h2 id="code">Add code to the extension</h2>
-<p> In this step, you'll make your extension <em>do</em> something besides just look good. </p>
+<p>
+ In this step, you'll make your extension <em>do</em> something besides just
+ look good.
+</p>
+
<ol>
<li>
- <p> Edit <code>manifest.json</code> to add the following line:</p>
-<pre>
- ...
+ <p>Edit <code>manifest.json</code> to add the following line:</p>
+ <pre>...
"browser_action": {
"default_icon": "icon.png"<b>,
"default_popup": "popup.html"</b>
},
- ...
-</pre>
- <p> Inside your extension's folder,
- create a text file called <strong><code>popup.html</code></strong>,
- and add the following code to it:</p>
- <blockquote> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html?content-type=text/plain"
- target="_blank">CSS
- and JavaScript code for hello_world</a></blockquote>
+ ...</pre>
+
+ <p>
+ Inside your extension's folder, create two text files called
+ <strong><code>popup.html</code></strong> and
+ <strong><code>popup.js</code></strong>. Add the following code to
+ these files:
+ </p>
+ <blockquote>
+ <a href="examples/tutorials/getstarted/popup.html"
+ target="_blank">HTML code (popup.html)</a> and
+ <a href="examples/tutorials/getstarted/popup.js"
+ target="_blank">JavaScript code (popup.js)</a> for hello_world</a> </blockquote>
</li>
<li>
Return to the extensions management page,
generated by cgit v1.1 at 2025-01-17 06:38:23 +0000