Descrição
Use a API chrome.devtools.panels
para integrar sua extensão à interface da janela de Ferramentas para desenvolvedores: crie seus próprios painéis, acesse painéis existentes e adicione barras laterais.
Cada painel e barra lateral da extensão é exibido como uma página HTML separada. Todas as páginas de extensão exibidas
na janela "Ferramentas do desenvolvedor" terão acesso a todas as partes da API chrome.devtools
e a todas
outras APIs de extensão.
Use o método devtools.panels.setOpenResourceHandler
para instalar uma função de callback
que lida com solicitações de usuários para abrir um recurso (normalmente, um clique em um link de recurso na
"Ferramentas do desenvolvedor"). No máximo, um dos manipuladores instalados é chamado. que os usuários podem especificar (usando
caixa de diálogo "Configurações das Ferramentas para desenvolvedores") é o comportamento padrão ou uma extensão para lidar com recursos
solicitações em aberto. Se uma extensão chamar setOpenResourceHandler()
várias vezes, somente a última
é mantido.
Consulte o resumo das APIs do DevTools para uma introdução geral ao uso das APIs das Ferramentas para desenvolvedores.
Manifesto
Exemplo
O código a seguir adiciona um painel contido em Panel.html
, representado por FontPicker.png
na
Barra de ferramentas para desenvolvedores com o rótulo Seletor de fontes:
chrome.devtools.panels.create("Font Picker",
"FontPicker.png",
"Panel.html",
function(panel) { ... });
O código a seguir adiciona um painel de barra lateral contido em Sidebar.html
e intitulado Font Properties ao
no painel Elementos e define a altura como 8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
A captura de tela ilustra o efeito que esse exemplo teria na janela Ferramentas para desenvolvedores:
![Painel do ícone de extensão na barra de ferramentas do DevTools](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=19&hl=pt-br)
Para testar essa API, instale o exemplo da API DevTools dashboards (link em inglês) das chrome-extension-samples repositório de dados.
Tipos
Button
Um botão criado pela extensão.
Propriedades
-
onClicked
Evento<functionvoidvoid>
Disparado quando o botão é clicado.
A função
onClicked.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:() => void
-
-
update
void
Atualiza os atributos do botão. Se alguns dos argumentos forem omitidos ou
null
, os atributos correspondentes não serão atualizados.A função
update
tem esta aparência:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
string opcional
Caminho para o novo ícone do botão.
-
tooltipText
string opcional
Texto exibido como uma dica quando o usuário passa o mouse sobre o botão.
-
desativado
booleano opcional
Indica se o botão está desativado.
-
ElementsPanel
Representa o painel Elementos.
Propriedades
-
onSelectionChanged
Evento<functionvoidvoid>
Disparado quando um objeto é selecionado no painel.
A função
onSelectionChanged.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:() => void
-
-
createSidebarPane
void
Cria um painel dentro da barra lateral.
A função
createSidebarPane
tem esta aparência:(title: string, callback?: function) => {...}
-
título
string
Texto exibido na legenda da barra lateral.
-
callback
função opcional
O parâmetro
callback
tem esta aparência:(result: ExtensionSidebarPane) => void
-
resultado
Um objeto ExtensionSidebarPane para o painel da barra lateral criado.
-
-
ExtensionPanel
Representa um painel criado por uma extensão.
Propriedades
-
onHidden
Evento<functionvoidvoid>
Disparado quando o usuário sai do painel.
A função
onHidden.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:() => void
-
-
onSearch
Evento<functionvoidvoid>
Disparado após uma ação de pesquisa (início de uma nova pesquisa, navegação nos resultados da pesquisa ou cancelamento da pesquisa).
A função
onSearch.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:(action: string, queryString?: string) => void
-
ação
string
-
queryString
string opcional
-
-
-
onShown
Evento<functionvoidvoid>
Disparado quando o usuário alterna para o painel.
A função
onShown.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:(window: Window) => void
-
janela
Janela
-
-
-
createStatusBarButton
void
Anexa um botão à barra de status do painel.
A função
createStatusBarButton
tem esta aparência:(iconPath: string, tooltipText: string, disabled: boolean) => {...}
-
iconPath
string
Caminho para o ícone do botão. O arquivo precisa conter uma imagem de 64 x 24 pixels composta por dois ícones de 32 x 24. O ícone à esquerda é usado quando o botão está inativo. o ícone direito aparece quando o botão é pressionado.
-
tooltipText
string
Texto exibido como uma dica quando o usuário passa o mouse sobre o botão.
-
desativado
booleano
Indica se o botão está desativado.
-
retorna
-
ExtensionSidebarPane
Uma barra lateral criada pela extensão.
Propriedades
-
onHidden
Evento<functionvoidvoid>
Disparado quando o painel da barra lateral fica oculto porque o usuário sai do painel que hospeda o painel da barra lateral.
A função
onHidden.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:() => void
-
-
onShown
Evento<functionvoidvoid>
Disparado quando o painel da barra lateral fica visível como resultado da alternância do usuário para o painel que o hospeda.
A função
onShown.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:(window: Window) => void
-
janela
Janela
-
-
-
setExpression
void
Define uma expressão que é avaliada na página inspecionada. O resultado é exibido no painel da barra lateral.
A função
setExpression
tem esta aparência:(expression: string, rootTitle?: string, callback?: function) => {...}
-
expressão
string
Uma expressão a ser avaliada no contexto da página inspecionada. Objetos JavaScript e nós DOM são exibidos em uma árvore expansível semelhante ao console/relógio.
-
rootTitle
string opcional
Um título opcional para a raiz da árvore de expressão.
-
callback
função opcional
O parâmetro
callback
tem esta aparência:() => void
-
-
setHeight
void
Define a altura da barra lateral.
A função
setHeight
tem esta aparência:(height: string) => {...}
-
altura
string
Uma especificação de tamanho semelhante a CSS, como
'100px'
ou'12ex'
.
-
-
setObject
void
Define um objeto compatível com JSON a ser exibido no painel da barra lateral.
A função
setObject
tem esta aparência:(jsonObject: string, rootTitle?: string, callback?: function) => {...}
-
jsonObject
string
Um objeto a ser exibido no contexto da página inspecionada. Avaliado no contexto do autor da chamada (cliente de API).
-
rootTitle
string opcional
Um título opcional para a raiz da árvore de expressão.
-
callback
função opcional
O parâmetro
callback
tem esta aparência:() => void
-
-
setPage
void
Define uma página HTML a ser exibida no painel da barra lateral.
A função
setPage
tem esta aparência:(path: string) => {...}
-
caminho
string
O caminho relativo de uma página de extensão a ser exibido na barra lateral.
-
SourcesPanel
Representa o painel Origens.
Propriedades
-
onSelectionChanged
Evento<functionvoidvoid>
Disparado quando um objeto é selecionado no painel.
A função
onSelectionChanged.addListener
tem esta aparência:(callback: function) => {...}
-
callback
função
O parâmetro
callback
tem esta aparência:() => void
-
-
createSidebarPane
void
Cria um painel dentro da barra lateral.
A função
createSidebarPane
tem esta aparência:(title: string, callback?: function) => {...}
-
título
string
Texto exibido na legenda da barra lateral.
-
callback
função opcional
O parâmetro
callback
tem esta aparência:(result: ExtensionSidebarPane) => void
-
resultado
Um objeto ExtensionSidebarPane para o painel da barra lateral criado.
-
-
Propriedades
elements
Elementos.
Tipo
sources
Painel de origens.
Tipo
themeName
O nome do tema de cores definido nas configurações do DevTools do usuário. Valores possíveis: default
(o padrão) e dark
.
Tipo
string
Métodos
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
Cria um painel de extensão.
Parâmetros
-
título
string
Título exibido ao lado do ícone da extensão na barra de ferramentas das Ferramentas para desenvolvedores.
-
iconPath
string
Caminho do ícone do painel relativo ao diretório de extensão.
-
pagePath
string
Caminho da página HTML do painel relativo ao diretório de extensão.
-
callback
função opcional
O parâmetro
callback
tem esta aparência:(panel: ExtensionPanel) => void
-
painel
Um objeto ExtensionPanel que representa o painel criado.
-
openResource()
chrome.devtools.panels.openResource(
url: string,
lineNumber: number,
columnNumber?: number,
callback?: function,
)
Solicita que o DevTools abra um URL em um painel de Ferramentas para desenvolvedores.
Parâmetros
-
url
string
O URL do recurso a ser aberto.
-
lineNumber
number
Especifica o número da linha a ser rolada quando o recurso é carregado.
-
columnNumber
número opcional
Chrome 114 ou mais recenteEspecifica o número da coluna a ser rolada quando o recurso é carregado.
-
callback
função opcional
O parâmetro
callback
tem esta aparência:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
Especifica a função que será chamada quando o usuário clicar em um link de recurso na janela das Ferramentas para desenvolvedores. Para desativar o gerenciador, chame o método sem parâmetros ou passe nulo como o parâmetro.
Parâmetros
-
callback
função opcional
O parâmetro
callback
tem esta aparência:(resource: Resource) => void
-
recurso
Um objeto
devtools.inspectedWindow.Resource
para o recurso que foi clicado.
-