Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(444)

Side by Side Diff: chrome/common/extensions/docs/server2/templates/intros/pageAction.html

Issue 10832042: Extensions Docs Server: Doc conversion script (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: everything but svn stuff Created 8 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
1 <!-- BEGIN AUTHORED CONTENT -->
2 <p> 1 <p>
3 Use page actions to put icons inside the address bar. 2 Use page actions to put icons inside the address bar.
4 Page actions represent actions 3 Page actions represent actions
5 that can be taken on the current page, 4 that can be taken on the current page,
6 but that aren't applicable to all pages. 5 but that aren't applicable to all pages.
7 Some examples: 6 Some examples:
8 </p> 7 </p>
9 <ul> 8 <ul>
10 <li> Subscribe to this page's RSS feed </li> 9 <li> Subscribe to this page's RSS feed </li>
11 <li> Make a slideshow out of this page's photos </li> 10 <li> Make a slideshow out of this page's photos </li>
12 </ul> 11 </ul>
12
13 <p> 13 <p>
14 The RSS icon in the following screenshot 14 The RSS icon in the following screenshot
15 represents a page action 15 represents a page action
16 that lets you subscribe to 16 that lets you subscribe to
17 the RSS feed for the current page. 17 the RSS feed for the current page.
18 </p> 18 </p>
19
19 <img src="{{static}}/images/page-action.png" 20 <img src="{{static}}/images/page-action.png"
20 width="361" height="79" /> 21 width="361" height="79" />
22
21 <p> 23 <p>
22 If you want the extension's icon to always be visible, 24 If you want the extension's icon to always be visible,
23 use a <a href="browserAction.html">browser action</a> instead. 25 use a <a href="browserAction.html">browser action</a> instead.
24 </p> 26 </p>
27
25 <p class="caution"> 28 <p class="caution">
26 <strong>Note:</strong> 29 <strong>Note:</strong>
27 Packaged apps cannot use page actions. 30 Packaged apps cannot use page actions.
28 </p> 31 </p>
32
33
29 <h2 id="manifest">Manifest</h2> 34 <h2 id="manifest">Manifest</h2>
35
30 <p> 36 <p>
31 Register your page action in the 37 Register your page action in the
32 <a href="manifest.html">extension manifest</a> 38 <a href="manifest.html">extension manifest</a>
33 like this: 39 like this:
34 </p> 40 </p>
41
35 <pre>{ 42 <pre>{
36 "name": "My extension", 43 "name": "My extension",
37 ... 44 ...
38 <b>"page_action": { 45 <b>"page_action": {
39 "default_icon": "icons/foo.png", <em>// optional</em> 46 "default_icon": "icons/foo.png", <em>// optional</em>
40 "default_title": "Do action", <em>// optional; shown in tooltip</em> 47 "default_title": "Do action", <em>// optional; shown in tooltip</em>
41 "default_popup": "popup.html" <em>// optional</em> 48 "default_popup": "popup.html" <em>// optional</em>
42 }</b>, 49 }</b>,
43 ... 50 ...
44 }</pre> 51 }</pre>
52
45 <h2 id="ui">Parts of the UI</h2> 53 <h2 id="ui">Parts of the UI</h2>
54
46 <p> 55 <p>
47 Like browser actions, 56 Like browser actions,
48 page actions can have an icon, 57 page actions can have an icon,
49 a tooltip, and popup; 58 a tooltip, and popup;
50 they can't have badges, however. 59 they can't have badges, however.
51 In addition, page actions can appear and disappear. 60 In addition, page actions can appear and disappear.
52 You can find information about icons, tooltips, and popups 61 You can find information about icons, tooltips, and popups
53 by reading about the 62 by reading about the
54 <a href="browserAction.html#ui">browser action UI</a>. 63 <a href="browserAction.html#ui">browser action UI</a>.
55 </p> 64 </p>
65
56 <p> 66 <p>
57 You make a page action appear and disappear using the 67 You make a page action appear and disappear using the
58 <a href="#method-show">show()</a> and 68 <a href="#method-show">show()</a> and
59 <a href="#method-hide">hide()</a> methods, respectively. 69 <a href="#method-hide">hide()</a> methods, respectively.
60 By default, a page action is hidden. 70 By default, a page action is hidden.
61 When you show it, you specify the tab 71 When you show it, you specify the tab
62 in which the icon should appear. 72 in which the icon should appear.
63 The icon remains visible 73 The icon remains visible
64 until the tab is closed 74 until the tab is closed
65 or starts displaying a different URL 75 or starts displaying a different URL
66 (because the user clicks a link, for example). 76 (because the user clicks a link, for example).
67 </p> 77 </p>
68 <!-- [PENDING: We should discuss how tabs and page actions are related. All met hods take a tab ID argument. How do you get that tab ID? What's the usual way of arranging the code that monitors pages? Point to examples.] --> 78
79
80
81
69 <h2 id="tips">Tips</h2> 82 <h2 id="tips">Tips</h2>
83
70 <p>For the best visual impact, 84 <p>For the best visual impact,
71 follow these guidelines:</p> 85 follow these guidelines:</p>
86
72 <ul> 87 <ul>
73 <li><b>Do</b> use page actions 88 <li><b>Do</b> use page actions
74 for features that make sense 89 for features that make sense
75 for only a few pages. 90 for only a few pages.
76 <li><b>Don't</b> use page actions 91 <li><b>Don't</b> use page actions
77 for features that make sense 92 for features that make sense
78 for most pages. 93 for most pages.
79 Use <a href="browserAction.html">browser actions</a> instead. 94 Use <a href="browserAction.html">browser actions</a> instead.
80 <li><b>Don't</b> constantly animate your icon. 95 <li><b>Don't</b> constantly animate your icon.
81 That's just annoying. 96 That's just annoying.
82 </ul> 97 </ul>
98
99
83 <h2 id="examples"> Examples </h2> 100 <h2 id="examples"> Examples </h2>
101
84 <p> 102 <p>
85 You can find simple examples of using page actions in the 103 You can find simple examples of using page actions in the
86 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension s/docs/examples/api/pageAction/">examples/api/pageAction</a> 104 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension s/docs/examples/api/pageAction/">examples/api/pageAction</a>
87 directory. 105 directory.
88 For other examples and for help in viewing the source code, see 106 For other examples and for help in viewing the source code, see
89 <a href="samples.html">Samples</a>. 107 <a href="samples.html">Samples</a>.
90 </p> 108 </p>
91 <!-- END AUTHORED CONTENT -->
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698