diff options
Diffstat (limited to 'chrome/common')
11 files changed, 173 insertions, 69 deletions
diff --git a/chrome/common/extensions/docs/css/ApiRefStyles.css b/chrome/common/extensions/docs/css/ApiRefStyles.css index d3f6378..3f4a8b7 100755 --- a/chrome/common/extensions/docs/css/ApiRefStyles.css +++ b/chrome/common/extensions/docs/css/ApiRefStyles.css @@ -1,8 +1,3 @@ -/* - * PENDING: This file has styles that aren't used by handwritten pages. - * So we should probably have a common CSS file, plus this one, and then - * one for handwritten pages. - */ .pageData { display: none; } @@ -47,6 +42,10 @@ 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; @@ -95,6 +94,10 @@ div#searchbox { dd { margin-bottom: 0.75em; } + +ol li { + margin-top: 1em; +} .example { } @@ -105,6 +108,16 @@ 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; +} + .hidden { display: none; } @@ -141,7 +154,7 @@ p#classSummary { #leftNav ul { line-height:120%; margin:0; - padding:0.6em 0 0; + padding:0; } #leftNav ul li { @@ -184,3 +197,15 @@ p#classSummary { border:1px solid #999; padding:6px; } + +#mainColumn table.imagelayout { + border:none; +} +#mainColumn table.imagelayout td { + border:none; + padding:0px 6px 6px; + text-align:center; +} +#mainColumn table.imagelayout tr.images td { + vertical-align:bottom; +} diff --git a/chrome/common/extensions/docs/static/api_index.html b/chrome/common/extensions/docs/static/api_index.html index 6b7440c..570f379e9 100755 --- a/chrome/common/extensions/docs/static/api_index.html +++ b/chrome/common/extensions/docs/static/api_index.html @@ -1,7 +1,7 @@ +<div id="pageData-title" class="pageData">chrome.* APIs</div> + <p> -[PENDING: links to reference doc — -for example, <a href="chrome-api-index.html">chrome.* APIs</a> -— go here.] +[PENDING: links to chrome.* reference doc go here.] </p> <p> @@ -33,4 +33,4 @@ lorem gravida. Quisque non pharetra velit. Maecenas elit risus, ultricies in sagittis eget, facilisis sed neque. Quisque feugiat porta pharetra. Vestibulum lorem magna, pellentesque et mattis sit amet, euismod et dui. -</p>
\ No newline at end of file +</p> diff --git a/chrome/common/extensions/docs/static/background_pages.html b/chrome/common/extensions/docs/static/background_pages.html index 3d99295..b412635 100755 --- a/chrome/common/extensions/docs/static/background_pages.html +++ b/chrome/common/extensions/docs/static/background_pages.html @@ -1,16 +1,26 @@ <div id="pageData-title" class="pageData">Background Pages</div> -<p>A common need for extensions is to have a single long-running script to manage some task or state. Toolstrips don't quite fit this need, because there can be multiple toolstrips active at any one time (one per browser window). Background pages to the rescue.</p> - -<p>The background page is similar to a toolstrip, in that it is an HTML page that runs in the extension process. The difference is that the background page exists for the lifetime of your extension, and there is only one instance of it active at a time.</p> - -<h3>Status</h3> - -<p>Implemented.</p> - -<h3>Details</h3> - -<p>Register your background page in the extension manifest, like this:</p> +<p> +A common need for extensions is to have +a single long-running script to manage some task or state. +Toolstrips don't quite fit this need, +because multiple toolstrips can be active at any one time +(one per browser window). +Background pages to the rescue. +</p> + +<p> +The background page is similar to a toolstrip, +in that it is an HTML page that runs in the extension process. +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> + +<p> +Register your background page in the extension manifest, like this: +</p> <pre>{ "name": "My First Extension", @@ -20,9 +30,18 @@ "toolstrips": ["toolstrip.html"] }</pre> -<p>Your toolstrip will likely contain only the necessary code to display the toolstrip UI, with all your extension logic contained in the background page. You can communicate between your various pages using direct script calls, similar to how frames can communicate. The chrome.self.getViews() function returns a list of window objects for every active page belonging to your extension.</p> - -<h3>Example</h3> +<p> +Your toolstrip will likely contain +only the necessary code to display the toolstrip UI, +with all your extension logic contained in the background page. +You can communicate between your various pages using direct script calls, +similar to how frames can communicate. +The chrome.self.getViews() function +returns a list of window objects +for every active page belonging to your extension. +</p> + +<h2>Example</h2> <pre>background_page.html (snippet): function updateUI(checked) { diff --git a/chrome/common/extensions/docs/static/bookmarks.html b/chrome/common/extensions/docs/static/bookmarks.html index 073f1ca..efa6970 100755 --- a/chrome/common/extensions/docs/static/bookmarks.html +++ b/chrome/common/extensions/docs/static/bookmarks.html @@ -106,7 +106,7 @@ Here's how those bookmarks might be represented with bookmark objects:</p> alt="a hierarchy of bookmarks" width="522" height="594" - src="images/bookmark-hierarchy.png"> + src="images/bookmarks-hierarchy.png"> <p> Here's some code you could use to create that hierarchy:</p> diff --git a/chrome/common/extensions/docs/static/content_scripts.html b/chrome/common/extensions/docs/static/content_scripts.html index e71219d..b391534 100644 --- a/chrome/common/extensions/docs/static/content_scripts.html +++ b/chrome/common/extensions/docs/static/content_scripts.html @@ -10,7 +10,7 @@ <li>Find and process <a href="http://microformats.org/">microformat</a> data in the DOM </ul> -<h3 id="registration">Registration</h3> +<h2 id="registration">Registration</h2> <p>Content scripts are registered in an extension's <a href="manifest.html">manifest.json</a> file, like so: @@ -59,11 +59,11 @@ </tr> </table> -<h3 id="match_patterns">Match Patterns</h3> +<h2 id="match_patterns">Match patterns</h2> -<p>TODO</p> +<p class="comment">TODO</p> -<h3 id="execution_environment">Execution Environment</h3> +<h2 id="execution_environment">Execution environment</h2> <p>Content scripts execute in a special environment called an <em>isolated world</em>. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts. @@ -99,7 +99,7 @@ document.getElementById("button").onclick = function() { <p>Another important benefit of isolated worlds is that they completely separate the JavaScript on the page from the JavaScript in extensions. This allows us to offer extra functionality to content scripts that should not be accessible from web pages without worrying about web pages accessing it. -<h3 id="messaging">Messaging</h3> +<h2 id="messaging">Messaging</h2> <p>Content scripts can communicate with their parent extension using message passing. The content script opens a channel to the extension using the <a href="extension.html#connect">chrome.extension.connect()</a> method and then sends messages back and forth to it. The messages can contain any valid JSON object (null, boolean, number, string, array, or object). @@ -107,9 +107,9 @@ document.getElementById("button").onclick = function() { <p>When a channel is opened from a content script to an extension, the <a href="extension.html#onConnect">onConnect</a> event is fired in all views in the extension. Any view can receive the event. The event contains a <a href="extension.html#port">Port</a> object, which can be used by the extension view to communicate back to the content script. -<p>[TODO: Complete this] +<p class="comment">[TODO: Complete this]</p> -<h3 id="hostPageCommuncation">Communication with the embedding page</h3> +<h2 id="hostPageCommuncation">Communication with the embedding page</h2> <p>Although the execution environments of content scripts and the pages that host them are isolated from each other, they share access to the page's DOM. If the page wishes to communicate with the content script (or with the extension via the content script), it must do so through the shared DOM.</p> diff --git a/chrome/common/extensions/docs/static/index.html b/chrome/common/extensions/docs/static/index.html index 2967483..fe41a73 100755 --- a/chrome/common/extensions/docs/static/index.html +++ b/chrome/common/extensions/docs/static/index.html @@ -7,4 +7,7 @@ <p>[Maybe add some nice enticing pictures of toolstrips and moles (when we have them)]</p> -<p>If you just want to dive in, try <a href="getstarted.html">Get Started</a>. Otherwise, if you'd prefer to start with the high level overview, try <a href="overview.html">Overview</a>. +<p>If you just want to dive in, +try <a href="getstarted.html">Get Started</a>. +Otherwise, if you'd prefer to start with the high level overview, +try <a href="overview.html">Overview</a>. diff --git a/chrome/common/extensions/docs/static/manifest.html b/chrome/common/extensions/docs/static/manifest.html index 7df63f3..8fedf97 100755 --- a/chrome/common/extensions/docs/static/manifest.html +++ b/chrome/common/extensions/docs/static/manifest.html @@ -1 +1,5 @@ -<p>This page should go into detail about all the parts of the manifest. In cases where there's not too much to say about something (icons, cross-origin XHR), we can just document it inline. Otherwise (content scripts), we can link off to a separate page. +<div id="pageData-title" class="pageData">Manifest File Format</div> + +<p class="comment"> +[PENDING: This page should go into detail about all the parts of the manifest. In cases where there's not too much to say about something (icons, cross-origin XHR), we can just document it inline. Otherwise (content scripts), we can link off to a separate page.] +</p> diff --git a/chrome/common/extensions/docs/static/packaging.html b/chrome/common/extensions/docs/static/packaging.html index 09b2aca..bd1d4d8 100755 --- a/chrome/common/extensions/docs/static/packaging.html +++ b/chrome/common/extensions/docs/static/packaging.html @@ -1,44 +1,102 @@ -<p>Extensions are packaged as signed zip files with the file extension "crx" (eg myextension.crx). Each extension has its own unique key pair. The public key is used as the unique identifier for the extension and the private key is kept private and used to sign each version of the extension.</p> +<div id="pageData-title" class="pageData">Packaging</div> -<h3>Packaging an Extension</h3> +<p> +Extensions are packaged as signed zip files +with the file extension "crx" +(for example, <code>myextension.crx</code>). +Each extension has its own unique key pair. +The public key is used as the unique identifier for the extension. +The private key is kept private +and used to sign each version of the extension. +</p> + +<!-- +[PENDING: Perhaps mention that once the gallery is up, +creating and updating a package will be much easier. +Also refer to instructions on submitting an extension +for inclusion in the gallery.] +--> + +<h2>Creating a package</h2> <p>To package an extension:</p> <ol> <li>Close all your Chrome windows</li> -<li>Open a command line and type: <pre><path-to-chrome>\chrome.exe --pack-extension=<path\to\extension\folder></li> +<li>Execute Chrome, using the <code>--pack-extension</code> option +to specify the path to the extension's folder: +<pre>chrome.exe --pack-extension=<em>ext-folder-path</em></pre> +</li> </ol> -<img src="images/create-package.png"> +<p>The packager creates two files: +a <code>.crx</code> file, +which is the actual extension that can be installed, +and a <code>.pem</code> file, +which contains the private key. +</p> -<h4>Note</h4> +<p> +<b>Do not lose the private key!</b> +Keep the <code>.pem</code> file secret and in a safe place. +You'll need it later if you want to do any of the following: +</p> <ul> -<li>In Windows XP, you can find <path-to-chrome> by right-clicking on your Google Chrome shortcut and selecting Properties -> Shortcut and then pressing Find Target.</li> -<li>In Vista, you can do the same by right-clicking your Google Chrome shortcut and selecting Open File Location.</li> +<li><a href="#update">Update</a> the extension</li> +<li>Import the extension into the extensions gallery, +once the gallery becomes available</li> </ul> -<p>The packager creates two files: a crx file (myextension.crx), which is the actual extension that can be installed, and a private key (myextension.pem). You should keep the private key secret and in a safe place.</p> +<p> +If the extension is successfully packaged, you'll see a dialog like this +that tells you where to find +the <code>.crx</code> and <code>.pem</code> files:</p> +</p> -<h4>IMPORTANT: Do not lose the private key. You will need it later for two things</h4> -<ol> -<li>If you want to create a new version of the extension, you'll need the original private key (see below).<li> -<li>In the future, Google will implement a gallery service for extensions. You'll need your private key if you want to import an existing extension into that gallery.</li> -</ol> +<img src="images/create-package.png" /> + + +<h3>Finding the path to Chrome</h3> + +<p> +If <code>chrome.exe</code> isn't already in your path, +you need to specify the complete path to it. +Here's how: +</p> -<h3>Updating an Extension</h3> +<ul> +<li> +In Windows XP, right-click your Google Chrome shortcut, +choose <b>Properties > Shortcut</b>, +and then choose <b>Find Target</b>. +</li> +<li> +In Vista, right-click your Google Chrome shortcut +and select <b>Open File Location</b>. +</li> +</ul> + + +<h2 id="update">Updating a package</h2> <p>To create an updated version of your extension:</p> <ol> -<li>Increase the version number in manifest.json</li> -<li>Close all your Chrome windows</li> -<li>Run <path-to-chrome>\chrome.exe --pack-extension=<path\to\extension\folder> --pack-extension-key=<path\to\extension-key>, specifying the private key file you created earlier for the second parameter.</li> +<li>Increase the version number in <code>manifest.json</code>.</li> +<li>Close all your Chrome windows.</li> +<li>Execute Chrome, using the <code>--pack-extension</code> +and <code>--pack-extension-key</code> options. +The value of the key option should be the path to +the already generated <code>.pem</code> file for this extension. + +<pre>chrome.exe --pack-extension=<em>ext-folder-path</em> --pack-extension-key=<em>ext-key-path</em></pre> +</li> </ol> -<p>If the updated extension is successfully packaged, you'll see a dialog like this</p> +<p>If the updated extension is successfully packaged, you'll see a dialog like this:</p> <img src="images/package-success.png"> -<h3>Tips and Tricks</h3> +<h2>Tips and Tricks</h2> <ul> -<li>In build 3.0.195 and later, you can use the --no-message-box command line flag to suppress the dialog. This is useful if you're packing extensions in non-interactive scripts.</li> -</ul>
\ No newline at end of file +<li>In build 3.0.195 and later, you can use the <code>--no-message-box</code> command line flag to suppress the dialog. This is useful if you're packing extensions in non-interactive scripts.</li> +</ul> diff --git a/chrome/common/extensions/docs/static/pageActions.html b/chrome/common/extensions/docs/static/pageActions.html index 3d3ebf2..96dbe74 100755 --- a/chrome/common/extensions/docs/static/pageActions.html +++ b/chrome/common/extensions/docs/static/pageActions.html @@ -1,17 +1,14 @@ <!-- BEGIN AUTHORED CONTENT --> <p>Page actions are a simple way to represent actions that can be taken on a page ("Email this page", "Share with Facebook", etc).</p> -<h3>Status</h3> -<p>First version implemented.</p> - -<h3>User interface</h3> +<h2>User interface</h2> <p>Page actions are displayed in the right side of the Omnibox. New actions get added to the left of the star:</p> <img src="images/pageaction-omnibar-icons.png"> <p>A maximum of 8 (?) actions can appear at the top level, any additional ones overflow into a drop-down menu:</p> -<h3>Manifest</h3> +<h2>Manifest</h2> <p>Developers can include page actions in the manifest using the following syntax:</p> diff --git a/chrome/common/extensions/docs/static/toolstrip.html b/chrome/common/extensions/docs/static/toolstrip.html index fbf2248..9ce69a1 100755 --- a/chrome/common/extensions/docs/static/toolstrip.html +++ b/chrome/common/extensions/docs/static/toolstrip.html @@ -1,10 +1,8 @@ <!-- BEGIN AUTHORED CONTENT --> -<p>Toolstrips allow you to add UI to Chrome's toolbar area. Toolstrips are nothing more than (very small) HTML pages, so anything you can do with HTML/CSS/JavaScript, you can do with toolstrips.<p> -<h3>Status</h3> -<p>Implementation in progress.</p> +<p>Toolstrips allow you to add UI to Chrome's toolbar area. Toolstrips are nothing more than (very small) HTML pages, so anything you can do with HTML/CSS/JavaScript, you can do with toolstrips.<p> -<h3>Details</h3> +<h2>Details</h2> <p>Register your toolstrips in the extension manifest, like this:</p> <pre>{ @@ -25,7 +23,7 @@ <span>My Button</span> </div></pre> -<h3>Debugging Tips</h3> +<h2>Debugging Tips</h2> <ul> <li>You can right click on a toolstrip to get a web inspector.</li> @@ -33,7 +31,7 @@ <li>You can run toolstrips in the main content area by loading their URL, which would be something like chrome-extension://0000000000000000000000000000000000000000/my_toolstrip.html</li> </ul> -<h3>Design Tips</h3> +<h2>Design Tips</h2> <ul> <li>Try not to use too much space. Toolbar real estate is precious and users tend to prefer extensions to use as little of it as possible.</li> diff --git a/chrome/common/extensions/docs/template/api_template.html b/chrome/common/extensions/docs/template/api_template.html index a85fe22..8b51be7 100755 --- a/chrome/common/extensions/docs/template/api_template.html +++ b/chrome/common/extensions/docs/template/api_template.html @@ -33,9 +33,9 @@ <ul> <li><a href="manifest.html">Manifest</a></li> <li><a href="toolstrip.html">Toolstrips</a></li> - <li><a href="pageActions.html">Page actions</a></li> - <li><a href="background_pages.html">Background pages</a></li> - <li><a href="content_scripts.html">Content scripts</a></li> + <li><a href="pageActions.html">Page Actions</a></li> + <li><a href="background_pages.html">Background Pages</a></li> + <li><a href="content_scripts.html">Content Scripts</a></li> <li><a href="tabs.html">Tabs</a></li> <li><a href="windows.html">Windows</a></li> <li><a href="bookmarks.html">Bookmarks</a></li> |