devtools.panels.ElementsPanel.createSidebarPane()

Adds a new pane to the sidebar in the HTML/CSS inspector.

The HTML/CSS inspector, called the Page Inspector in Firefox and the Elements panel in Chrome, displays the page DOM in the main part of its window, and has a sidebar that displays various other aspects of the page HTML/CSS in a tabbed interface. For example, in Firefox, the sidebar can display the CSS rules for the selected element, or its fonts, or its box model.

The createSidebarPane() function adds a new pane to the sidebar. For example, the screenshot below shows a new pane titled "My pane", that displays a JSON object:

This function takes one argument, which is a string representing the pane's title. It returns a Promise that resolves to an ExtensionSidebarPane object representing the new pane. You can use that object to define the pane's content and behavior.

let creating = browser.devtools.panels.elements.createSidebarPane(
  title       // string
)

function onCreated(sidebarPane) {
  sidebarPane.setObject({
    someBool: true,
    someString: "hello there",
    someObject: {
      someNumber: 42,
      someOtherString: "this is my pane's content",
    },
  });
}

browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);