1 <!-- BEGIN AUTHORED CONTENT --> 2 <p id="classSummary"> 3 Use the <code>experimental.webInspector.panels</code> module to integrate your 4 extension into Developer Tools window UI: create your own panels, access 5 existing panels and add sidebars. 6 </p><p> 7 See <a href="experimental.webInspector.html">WebInspector API summary</a> for 8 general introduction to using WebInspector API</a>. 9 </p> 10 11 <h2>Notes</h2> 12 13 <p> 14 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 16 modules in <code>experimental.webInspector</code> API, as well as to 17 <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 19 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>. 21 </p> 22 23 <h2 id="overview-examples">Examples</h2> 24 <p>The following code adds a panel contained in <code>Panel.html</code>, 25 represented by <code>FontPicker.png</code> on the Developer Tools toolbar 26 and labeled as <em>Font Picker</em>:</p> 27 28 <pre> 29 webInspector.panels.create("Font Picker", "FontPicker.png", "Panel.html"); 30 </pre> 31 <p>The following code adds a sidebar pane contained in 32 <code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements 33 panel, then sets its height to <code>8ex</code>: 34 <pre> 35 webInspector.panels.elements.createSidebarPane("Font Properties", "Sidebar.html", 36 function(sidebar) { 37 sidebar.setHeight("8ex"); 38 } 39 })); 40 </pre> 41 <p> 42 This screenshot demonstrates the effect the above examples would have on 43 Developer Tools window: 44 45 <img src="images/devtools-panels.png" 46 style="margin-left: 20px" 47 width="686" height="289" 48 alt="Extension icon panel on DevTools toolbar" /> 49 </p> 50 <!-- END AUTHORED CONTENT --> 51
