Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the BSD License.
©2013 Google
chrome extensions
|
Use the chrome.devtools.panels module to integrate
your extension into Developer Tools window UI: create your own panels, access
existing panels, and add sidebars.
See DevTools APIs summary for general introduction to using Developer Tools APIs.
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 chrome.devtools API, as well as to
chrome.extension 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 content scripts.
You can use the devtools.panels.setOpenResourceHandler
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 setOpenResourceHandler()
multiple times, only the last handler is retained.
The following code adds a panel contained in Panel.html,
represented by FontPicker.png on the Developer Tools toolbar
and labeled as Font Picker:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html"
function(panel) { ... });
The following code adds a sidebar pane contained in
Sidebar.html and titled Font Properties to the Elements
panel, then sets its height to 8ex:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
});
This screenshot demonstrates the effect the above examples would have on
Developer Tools window:
You can find examples that use this API in Samples.
Creates a pane within panel's sidebar.
If you specify the callback parameter, it should specify a function that looks like this:
function(ExtensionSidebarPane result) {...};
Fired when an object is selected in the panel.
Appends a button to the status bar of the panel.
Fired when the user switches to the panel.
Fired when the user switches away from the panel.
Sets an expression that is evaluated within the inspected page. The result is displayed in the sidebar pane.
If you specify the callback parameter, it should specify a function that looks like this:
function() {...};
Sets a JSON-compliant object to be displayed in the sidebar pane.
If you specify the callback parameter, it should specify a function that looks like this:
function() {...};
Fired when the sidebar pane becomes visible as a result of user switching to the panel that hosts it.
window object of the sidebar page, if one was set with the setPage() method. Fired when the sidebar pane becomes hidden as a result of the user switching away from the panel that hosts the sidebar pane.
Updates the attributes of the button. If some of the arguments are omitted or null, the corresponding attributes are not updated.
Fired when the button is clicked.
Creates an extension panel.
If you specify the callback parameter, it should specify a function that looks like this:
function(ExtensionPanel panel) {...};
Specifies the function to be called when the user clicks a resource link in the Developer Tools window. To unset the handler, either call the method with no parameters or pass null as the parameter.
If you specify the callback parameter, it should specify a function that looks like this:
function(devtools.inspectedWindow.Resource resource) {...};