chrome/common/extensions/docs/server2/templates/intros/devtools_panels.html - Issue 10797039: Extensions Docs Server: devtools API

Side by Side Diff: chrome/common/extensions/docs/server2/templates/intros/devtools_panels.html

Issue 10797039: Extensions Docs Server: devtools API (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src

Patch Set: console and audits are back Created 8 years, 4 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

« chrome/common/extensions/docs/server2/templates/articles/experimental_devtools.html ('K') | « chrome/common/extensions/docs/server2/templates/intros/devtools_network.html ('k') | chrome/common/extensions/docs/server2/templates/intros/experimental_devtools_audits.html » ('j') | chrome/common/extensions/docs/server2/templates/intros/experimental_devtools_console.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!-- BEGIN AUTHORED CONTENT -->

	2 <p id="classSummary">

	3 Use the <code>chrome.devtools.panels</code> module to integrate

	4 your extension into Developer Tools window UI: create your own panels, access

	5 existing panels, and add sidebars.

	6 </p><p>

	7 See <a href="devtools.html">DevTools APIs summary</a> for

	8 general introduction to using Developer Tools APIs.

	9 </p>

	10

	11 <h2>Overview</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>chrome.devtools</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><p>

	22 You can use the <code><a href="#method-setOpenResourceHandler"

	23 >setOpenResourceHandler()</a></code> method to install a

	24 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

	26 installed handlers gets called; users can specify (using the Developer Tools

	27 Settings dialog) either the default behavior or an extension to handle resource

	28 open requests. If an extension calls <code>setOpenResourceHandler()</code>

	29 multiple times, only the last handler is retained.

	30 </p>

	31 <h2 id="overview-examples">Examples</h2>

	32 <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

	34 and labeled as <em>Font Picker</em>:</p>

	35

	36 <pre>

	37 chrome.devtools.panels.create("Font Picker",

	38 "FontPicker.png",

	39 "Panel.html"

	40 function(panel) { ... });

	41 </pre>

	42 <p>The following code adds a sidebar pane contained in

	43 <code>Sidebar.html</code> and titled <em>Font Properties</em> to the Elements

	44 panel, then sets its height to <code>8ex</code>:

	45 <pre>

	46 chrome.devtools.panels.elements.createSidebarPane("Font Properties",

	47 function(sidebar) {

	48 sidebar.setPage("Sidebar.html");

	49 sidebar.setHeight("8ex");

	50 });

	51 </pre>

	52 <p>

	53 This screenshot demonstrates the effect the above examples would have on

	54 Developer Tools window:

	55

	56 <img src="{{static}}/images/devtools-panels.png"

	57 style="margin-left: 20px"

	58 width="686" height="289"

	59 alt="Extension icon panel on DevTools toolbar" />

	60 </p>

	61

	62 <p>

	63 You can find examples that use this API in

	64 <a href="samples.html#Chrome Query">Samples</a>.

	65 </p>

	66 <!-- END AUTHORED CONTENT -->

OLD	NEW