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

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

Issue 10832042: Extensions Docs Server: Doc conversion script (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: script/build.py fixes 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 id="classSummary"> 1 <p id="classSummary">
3 Use the <code>chrome.devtools.panels</code> module to integrate 2 Use the <code>chrome.devtools.panels</code> module to integrate
4 your extension into Developer Tools window UI: create your own panels, access 3 your extension into Developer Tools window UI: create your own panels, access
5 existing panels, and add sidebars. 4 existing panels, and add sidebars.
6 </p><p> 5 </p><p>
7 See <a href="devtools.html">DevTools APIs summary</a> for 6 See <a href="devtools.html">DevTools APIs summary</a> for
8 general introduction to using Developer Tools APIs. 7 general introduction to using Developer Tools APIs.
9 </p> 8 </p>
10
11 <h2>Overview</h2> 9 <h2>Overview</h2>
12
13 <p> 10 <p>
14 Each extension panel and sidebar is displayed as a separate HTML page. All 11 Each extension panel and sidebar is displayed as a separate HTML page. All
15 extension pages displayed in the Developer Tools window have access to all 12 extension pages displayed in the Developer Tools window have access to all
16 modules in <code>chrome.devtools</code> API, as well as to 13 modules in <code>chrome.devtools</code> API, as well as to
17 <a href="extension.html">chrome.extension</a> API. Other extension APIs are not 14 <a href="extension.html">chrome.extension</a> API. Other extension APIs are not
18 available to the pages within Developer Tools window, but you may invoke them 15 available to the pages within Developer Tools window, but you may invoke them
19 by sending a request to the background page of your extension, similarly to how 16 by sending a request to the background page of your extension, similarly to how
20 it's done in the <a href="overview.html#contentScripts">content scripts</a>. 17 it's done in the <a href="overview.html#contentScripts">content scripts</a>.
21 </p><p> 18 </p><p>
22 You can use the <code><a href="#method-setOpenResourceHandler" 19 You can use the <code><a href="#method-setOpenResourceHandler"
23 >setOpenResourceHandler()</a></code> method to install a 20 >setOpenResourceHandler()</a></code> method to install a
24 callback function that handles user requests to open a resource (typically, 21 callback function that handles user requests to open a resource (typically,
25 a click on a resource link in the Developer Tools window). At most one of the 22 a click on a resource link in the Developer Tools window). At most one of the
26 installed handlers gets called; users can specify (using the Developer Tools 23 installed handlers gets called; users can specify (using the Developer Tools
27 Settings dialog) either the default behavior or an extension to handle resource 24 Settings dialog) either the default behavior or an extension to handle resource
28 open requests. If an extension calls <code>setOpenResourceHandler()</code> 25 open requests. If an extension calls <code>setOpenResourceHandler()</code>
29 multiple times, only the last handler is retained. 26 multiple times, only the last handler is retained.
30 </p> 27 </p>
31 <h2 id="overview-examples">Examples</h2> 28 <h2 id="overview-examples">Examples</h2>
32 <p>The following code adds a panel contained in <code>Panel.html</code>, 29 <p>The following code adds a panel contained in <code>Panel.html</code>,
33 represented by <code>FontPicker.png</code> on the Developer Tools toolbar 30 represented by <code>FontPicker.png</code> on the Developer Tools toolbar
34 and labeled as <em>Font Picker</em>:</p> 31 and labeled as <em>Font Picker</em>:</p>
35
36 <pre> 32 <pre>
37 chrome.devtools.panels.create("Font Picker", 33 chrome.devtools.panels.create("Font Picker",
38 "FontPicker.png", 34 "FontPicker.png",
39 "Panel.html" 35 "Panel.html"
40 function(panel) { ... }); 36 function(panel) { ... });
41 </pre> 37 </pre>
42 <p>The following code adds a sidebar pane contained in 38 <p>The following code adds a sidebar pane contained in
43 <code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements 39 <code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements
44 panel, then sets its height to <code>8ex</code>: 40 panel, then sets its height to <code>8ex</code>:
45 <pre> 41 <pre>
46 chrome.devtools.panels.elements.createSidebarPane("Font Properties", 42 chrome.devtools.panels.elements.createSidebarPane("Font Properties",
47 function(sidebar) { 43 function(sidebar) {
48 sidebar.setPage("Sidebar.html"); 44 sidebar.setPage("Sidebar.html");
49 sidebar.setHeight("8ex"); 45 sidebar.setHeight("8ex");
50 }); 46 });
51 </pre> 47 </pre>
52 <p> 48 <p>
53 This screenshot demonstrates the effect the above examples would have on 49 This screenshot demonstrates the effect the above examples would have on
54 Developer Tools window: 50 Developer Tools window:
55
56 <img src="{{static}}/images/devtools-panels.png" 51 <img src="{{static}}/images/devtools-panels.png"
57 style="margin-left: 20px" 52 style="margin-left: 20px"
58 width="686" height="289" 53 width="686" height="289"
59 alt="Extension icon panel on DevTools toolbar" /> 54 alt="Extension icon panel on DevTools toolbar" />
60 </p> 55 </p>
61
62 <p> 56 <p>
63 You can find examples that use this API in 57 You can find examples that use this API in
64 <a href="samples.html#Chrome&#32;Query">Samples</a>. 58 <a href="samples.html#Chrome&#32;Query">Samples</a>.
65 </p> 59 </p>
66 <!-- END AUTHORED CONTENT -->
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698