OLD | NEW |
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 Query">Samples</a>. | 58 <a href="samples.html#Chrome Query">Samples</a>. |
65 </p> | 59 </p> |
66 <!-- END AUTHORED CONTENT --> | |
OLD | NEW |