Extensions Docs Server: devtools API

chrome/common/extensions/docs/server2/templates/intros/devtools_panels.html

+<!-- BEGIN AUTHORED CONTENT -->
+<p id="classSummary">
+Use the <code>chrome.devtools.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="devtools.html">DevTools APIs summary</a> for
+general introduction to using Developer Tools APIs.
+</p>
+
+<h2>Overview</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>chrome.devtools</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><p>
+You can use the <code><a href="#method-setOpenResourceHandler"
+>setOpenResourceHandler()</a></code> method to install a
+callback function that handles user requests to open a resource (typically,
+a click on a resource link in the Developer Tools window). At most one of the
+installed handlers gets called; users can specify (using the Developer Tools
+Settings dialog) either the default behavior or an extension to handle resource
+open requests. If an extension calls <code>setOpenResourceHandler()</code>
+multiple times, only the last handler is retained.
+</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>
+chrome.devtools.panels.create("Font Picker",
+                              "FontPicker.png",
+                              "Panel.html"
+                              function(panel) { ... });
+</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>
+chrome.devtools.panels.elements.createSidebarPane("Font Properties",
+    function(sidebar) {
+      sidebar.setPage("Sidebar.html");
+      sidebar.setHeight("8ex");
+    });
+</pre>
+<p>
+This screenshot demonstrates the effect the above examples would have on
+Developer Tools window:
+
+<img src="{{static}}/images/devtools-panels.png"
+     style="margin-left: 20px"
+     width="686" height="289"
+     alt="Extension icon panel on DevTools toolbar" />
+</p>
+
+<p>
+You can find examples that use this API in
+<a href="samples.html#Chrome&#32;Query">Samples</a>.
+</p>
+<!-- END AUTHORED CONTENT -->