| Index: chrome/common/extensions/docs/server2/templates/intros/browserAction.html
|
| diff --git a/chrome/common/extensions/docs/server2/templates/intros/browserAction.html b/chrome/common/extensions/docs/server2/templates/intros/browserAction.html
|
| index 2b7123f82dfacd5bf00512211dbe06a46c694624..d4c7476825997882d33b00b2a8d6d040554c960f 100644
|
| --- a/chrome/common/extensions/docs/server2/templates/intros/browserAction.html
|
| +++ b/chrome/common/extensions/docs/server2/templates/intros/browserAction.html
|
| @@ -1,4 +1,3 @@
|
| -<!-- BEGIN AUTHORED CONTENT -->
|
| <p>Use browser actions to put icons
|
| in the main Google Chrome toolbar,
|
| to the right of the address bar.
|
| @@ -8,6 +7,7 @@
|
| a <a href="#badge">badge</a>,
|
| and a <a href="#popups">popup</a>.
|
| </p>
|
| +
|
| <p>
|
| In the following figure,
|
| the multicolored square
|
| @@ -15,24 +15,31 @@ to the right of the address bar
|
| is the icon for a browser action.
|
| A popup is below the icon.
|
| </p>
|
| +
|
| <img src="{{static}}/images/browser-action.png"
|
| width="363" height="226" />
|
| +
|
| <p>
|
| If you want to create an icon that isn't always visible,
|
| use a <a href="pageAction.html">page action</a>
|
| instead of a browser action.
|
| </p>
|
| +
|
| <p class="caution">
|
| <strong>Note:</strong>
|
| Packaged apps cannot use browser actions.
|
| </p>
|
| -<!-- [PENDING: We should show tooltips and badges, as well.] -->
|
| +
|
| +
|
| +
|
| <h2 id="manifest">Manifest</h2>
|
| +
|
| <p>
|
| Register your browser action in the
|
| <a href="manifest.html">extension manifest</a>
|
| like this:
|
| </p>
|
| +
|
| <pre>{
|
| "name": "My extension",
|
| ...
|
| @@ -43,17 +50,22 @@ like this:
|
| }</b>,
|
| ...
|
| }</pre>
|
| +
|
| <h2 id="ui">Parts of the UI</h2>
|
| +
|
| <p>
|
| A browser action can have an <a href="#icon">icon</a>,
|
| a <a href="#tooltip">tooltip</a>,
|
| a <a href="#badge">badge</a>,
|
| and a <a href="#popups">popup</a>.
|
| </p>
|
| +
|
| <h3 id="icon">Icon</h3>
|
| +
|
| <p>Browser action icons can be up to 19 pixels wide and high.
|
| Larger icons are resized to fit, but for best results,
|
| use a 19-pixel square icon.</p>
|
| +
|
| <p>You can set the icon in two ways:
|
| using a static image or using the
|
| HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">canvas element</a>.
|
| @@ -62,14 +74,19 @@ and a <a href="#popups">popup</a>.
|
| such as smooth animation —
|
| using the canvas element.
|
| </p>
|
| +
|
| <p>Static images can be in any format WebKit can display,
|
| including BMP, GIF, ICO, JPEG, or PNG.
|
| </p>
|
| +
|
| <p>To set the icon,
|
| use the <b>default_icon</b> field of <b>browser_action</b>
|
| in the <a href="#manifest">manifest</a>,
|
| or call the <a href="#method-setIcon">setIcon()</a> method.
|
| +
|
| +
|
| <h3 id="tooltip">Tooltip</h3>
|
| +
|
| <p>
|
| To set the tooltip,
|
| use the <b>default_title</b> field of <b>browser_action</b>
|
| @@ -78,28 +95,36 @@ or call the <a href="#method-setTitle">setTitle()</a> method.
|
| You can specify locale-specific strings for the <b>default_title</b> field;
|
| see <a href="i18n.html">Internationalization</a> for details.
|
| </p>
|
| +
|
| <h3 id="badge">Badge</h3>
|
| +
|
| <p>Browser actions can optionally display a <em>badge</em> —
|
| a bit of text that is layered over the icon.
|
| Badges make it easy to update the browser action
|
| to display a small amount of information
|
| about the state of the extension.</p>
|
| +
|
| <p>Because the badge has limited space,
|
| it should have 4 characters or less.
|
| </p>
|
| +
|
| <p>
|
| Set the text and color of the badge using
|
| <a href="#method-setBadgeText">setBadgeText()</a> and
|
| <a href="#method-setBadgeBackgroundColor">setBadgeBackgroundColor()</a>,
|
| respectively.
|
| -<!-- [PENDING: if you have a color but no text, will anything display?] -->
|
| +
|
| </p>
|
| +
|
| +
|
| <h3 id="popups">Popup</h3>
|
| +
|
| <p>If a browser action has a popup,
|
| the popup appears when the user clicks the icon.
|
| The popup can contain any HTML contents that you like,
|
| and it's automatically sized to fit its contents.
|
| </p>
|
| +
|
| <p>
|
| To add a popup to your browser action,
|
| create an HTML file with the popup's contents.
|
| @@ -107,9 +132,12 @@ Specify the HTML file in the <b>default_popup</b> field of <b>browser_action</b>
|
| in the <a href="#manifest">manifest</a>, or call the
|
| <a href="#method-setPopup">setPopup()</a> method.
|
| </p>
|
| +
|
| <h2>Tips</h2>
|
| +
|
| <p>For the best visual impact,
|
| follow these guidelines:</p>
|
| +
|
| <ul>
|
| <li><b>Do</b> use browser actions for features
|
| that make sense on most pages.
|
| @@ -132,12 +160,13 @@ in the <a href="#manifest">manifest</a>, or call the
|
| <li><b>Don't</b> constantly animate your icon.
|
| That's just annoying.
|
| </ul>
|
| +
|
| <h2 id="examples"> Examples </h2>
|
| +
|
| <p>
|
| You can find simple examples of using browser actions in the
|
| <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/">examples/api/browserAction</a>
|
| directory.
|
| For other examples and for help in viewing the source code, see
|
| <a href="samples.html">Samples</a>.
|
| -</p>
|
| -<!-- END AUTHORED CONTENT -->
|
| +</p>
|
|
|