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

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