<!-- BEGIN AUTHORED CONTENT -->
<p id="classSummary">
Use the <code>experimental.webInspector.panels</code> module to integrate your
extension into Developer Tools window UI: create your own panels, access
existing panels and add sidebars.
</p><p>
See <a href="experimental.webInspector.html">WebInspector API summary</a> for
general introduction to using WebInspector API</a>.
</p>

<h2>Notes</h2>

<p>
Each extension panel and sidebar is displayed as a separate HTML page. All
extension pages displayed in the Developer Tools window have access to all
modules in <code>experimental.webInspector</code> API, as well as to
<a href="extension.html">chrome.extension</a> API. Other extension APIs are not
available to the pages within Developer Tools window, but you may invoke them
by sending a request to the background page of your extension, similarly to how
it's done in the <a href="overview.html#contentScripts">content scripts</a>.
</p>

<h2 id="overview-examples">Examples</h2>
<p>The following code adds a panel contained in <code>Panel.html</code>,
represented by <code>FontPicker.png</code> on the Developer Tools toolbar
and labeled as <em>Font Picker</em>:</p>

<pre>
webInspector.panels.create("Font Picker", "FontPicker.png", "Panel.html");
</pre>
<p>The following code adds a sidebar pane contained in
<code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements
panel, then sets its height to <code>8ex</code>:
<pre>
webInspector.panels.elements.createSidebarPane("Font Properties", "Sidebar.html",
    function(sidebar) {
      sidebar.setHeight("8ex");
    }
}));
</pre>
<p>
This screenshot demonstrates the effect the above examples would have on
Developer Tools window:

<img src="images/devtools-panels.png"
     style="margin-left: 20px"
     width="686" height="289"
     alt="Extension icon panel on DevTools toolbar" />
</p>
<!-- END AUTHORED CONTENT -->