Use the chrome.devtools.panels API to integrate your extension into Developer Tools window UI: create your own panels, access existing panels, and add sidebars.

class ChromeDevtoolsPanels extends ChromeApi {
 static final JsObject _devtools_panels = chrome['devtools']['panels'];

 ChromeDevtoolsPanels._();

 bool get available => _devtools_panels != null;

 /**
  * Elements panel.
  */
 ElementsPanel get elements => _createElementsPanel(_devtools_panels['elements']);

 /**
  * Creates an extension panel.
  * 
  * [title] Title that is displayed next to the extension icon in the Developer
  * Tools toolbar.
  * 
  * [iconPath] Path of the panel's icon relative to the extension directory.
  * 
  * [pagePath] Path of the panel's HTML page relative to the extension
  * directory.
  * 
  * Returns:
  * An ExtensionPanel object representing the created panel.
  */
 Future<ExtensionPanel> create(String title, String iconPath, String pagePath) {
   if (_devtools_panels == null) _throwNotAvailable();

   var completer = new ChromeCompleter<ExtensionPanel>.oneArg(_createExtensionPanel);
   _devtools_panels.callMethod('create', [title, iconPath, pagePath, completer.callback]);
   return completer.future;
 }

 /**
  * 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.
  * 
  * Returns:
  * A [devtools.inspectedWindow.Resource] object for the resource that was
  * clicked.
  */
 Future<Resource> setOpenResourceHandler() {
   if (_devtools_panels == null) _throwNotAvailable();

   var completer = new ChromeCompleter<Resource>.oneArg(_createResource);
   _devtools_panels.callMethod('setOpenResourceHandler', [completer.callback]);
   return completer.future;
 }

 void _throwNotAvailable() {
   throw new UnsupportedError("'chrome.devtools.panels' is not available");
 }
}