Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

Esta funcionalidade está disponível desde o Firefox 54.

Quando uma extensão fornece ferramentas que são úteis para os programadores, é possível adicionar uma IU para as mesmas para as ferramentas de desenvolvimento do navegador como um novo painel.

Simple example showing the addition of "My panel" to the Developer Tools tabs.

Especificar um painel de ferramentas de desenvolvimento

Um painél das ferramentas de desenvovlimento é adicionado utilizando a API devtools.panels, que precisa de ser executada a partir de uma página de devtools especial.

Adicione a páginas de devtools, incluindo a chave devtools_page na extensão de manifest.json e forneça a localização do ficheiro HTML da página na extensão:

"devtools_page": "devtools-page.html"

From the devtools page, call a script that will add the devtools panel:

<body>
  <script src="devtools.js"></script>
</body>

In the script, create the devtools panel by specifying the panel's title, icon, and HTML file that provides the panel's content:

function handleShown() {
  console.log("panel is being shown");
}

function handleHidden() {
  console.log("panel is being hidden");
}

browser.devtools.panels.create(
  "My Panel",           // title
  "icons/star.png",           // icon
  "devtools/panel/panel.html"          // content
).then((newPanel) => {
  newPanel.onShown.addListener(handleShown);
  newPanel.onHidden.addListener(handleHidden);
});

The extension can now run code in the inspected window using devtools.inspectedWindow.eval() or by injecting a content script via the background script by passing a message. You can find more details on how to do this in Extending the developer tools.

Exemplos

The webextensions-examples repo on GitHub, contains several examples of extensions that use devtools panels:

Etiquetas do documento e contribuidores

Contribuidores para esta página: mansil
Última atualização por: mansil,