Descrição
Use a API chrome.devtools.panels
para integrar sua extensão à interface da janela "Ferramentas para desenvolvedores": crie seus próprios painéis, acesse os atuais e adicione barras laterais.
Manifesto
Consulte o Resumo das APIs do DevTools para uma introdução geral ao uso das APIs das Ferramentas para desenvolvedores.
Visão geral
Cada painel de extensão e barra lateral é exibido como uma página HTML separada. Todas as páginas de extensão mostradas
na janela "Ferramentas para desenvolvedores" têm acesso a todos os módulos na API chrome.devtools
, bem como à
API chrome.extension. Outras APIs de extensão não estão disponíveis para as páginas na janela "Ferramentas do desenvolvedor", mas é possível invocá-las enviando uma solicitação para a página em segundo plano da extensão, da mesma forma que é feito nos scripts de conteúdo.
Você pode usar o método devtools.panels.setOpenResourceHandler
para instalar uma função de callback
que processa solicitações de usuários para abrir um recurso. Geralmente, um clique em um link de recurso na
janela "Ferramentas para desenvolvedores". No máximo, um dos gerenciadores instalados é chamado. Os usuários podem especificar (usando
a caixa de diálogo "Configurações das Ferramentas para desenvolvedores") o comportamento padrão ou uma extensão para processar
solicitações de abertura de recursos. Se uma extensão chamar setOpenResourceHandler()
várias vezes, apenas o último
gerenciador será mantido.
Exemplos
O código abaixo adiciona um painel contido em Panel.html
, representado por FontPicker.png
na
barra de ferramentas das Ferramentas para desenvolvedores e rotulado como Seletor de fonte:
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 Propriedades da fonte ao
painel Elementos e define a altura como 8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
Esta captura de tela demonstra o efeito que os exemplos acima teriam na janela "Ferramentas para desenvolvedores":
Para testar essa API, instale o exemplo de API DevTools no repositório chrome-extension-samples.
Tipos
Button
Um botão criado pela extensão.
Propriedades
-
onClicked
Evento<functionvoid>
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 mostrado como uma dica quando o usuário passa o mouse sobre o botão.
-
desativado
booleano opcional
Se o botão está desativado.
-
ElementsPanel
Representa o painel Elementos.
Propriedades
-
onSelectionChanged
Evento<functionvoid>
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 na barra lateral.
A função
createSidebarPane
tem esta aparência:(title: string, callback?: function) => {...}
-
title
string
Texto que é exibido na legenda da barra lateral.
-
callback
função optional
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 pela extensão.
Propriedades
-
onHidden
Evento<functionvoid>
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<functionvoid>
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<functionvoid>
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 esquerdo é usado quando o botão está inativo. O ícone direito é exibido quando o botão é pressionado.
-
tooltipText
string
Texto mostrado como uma dica quando o usuário passa o mouse sobre o botão.
-
desativado
boolean
Se o botão está desativado.
-
retorna
-
ExtensionSidebarPane
Uma barra lateral criada pela extensão.
Propriedades
-
onHidden
Evento<functionvoid>
Disparado quando o painel da barra lateral fica oculto como resultado da saída do usuário 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<functionvoid>
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 da expressão.
-
callback
função optional
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. Avaliada no contexto do autor da chamada (cliente de API).
-
rootTitle
string opcional
Um título opcional para a raiz da árvore da expressão.
-
callback
função optional
O parâmetro
callback
tem esta aparência:() => void
-
-
setPage
void
Define uma página HTML para ser exibida no painel da barra lateral.
A função
setPage
tem esta aparência:(path: string) => {...}
-
caminho
string
Caminho relativo de uma página de extensão a ser exibido na barra lateral.
-
SourcesPanel
Representa o painel Sources.
Propriedades
-
onSelectionChanged
Evento<functionvoid>
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 na barra lateral.
A função
createSidebarPane
tem esta aparência:(title: string, callback?: function) => {...}
-
title
string
Texto que é exibido na legenda da barra lateral.
-
callback
função optional
O parâmetro
callback
tem esta aparência:(result: ExtensionSidebarPane) => void
-
resultado
Um objeto ExtensionSidebarPane para o painel da barra lateral criado.
-
-
Propriedades
elements
Elements.
Tipo
sources
Origens.
Tipo
themeName
O nome do tema de cores definido nas configurações do DevTools do usuário. Valores possíveis: default
(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
-
title
string
Título exibido ao lado do ícone de extensão na barra de ferramentas das Ferramentas para desenvolvedores.
-
iconPath
string
Caminho do ícone do painel em relação ao diretório de extensão.
-
pagePath
string
Caminho da página HTML do painel em relação ao diretório de extensão.
-
callback
função optional
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 das Ferramentas para desenvolvedores.
Parâmetros
-
url
string
O URL do recurso a ser aberto.
-
lineNumber
number
Especifica o número da linha para rolar quando o recurso é carregado.
-
columnNumber
número opcional
Chrome 114 ou mais recenteEspecifica o número da coluna para rolar quando o recurso é carregado.
-
callback
função optional
O parâmetro
callback
tem esta aparência:() => void
setOpenResourceHandler()
chrome.devtools.panels.setOpenResourceHandler(
callback?: function,
)
Especifica a função a ser chamada quando o usuário clica em um link de recurso na janela Ferramentas para desenvolvedores. Para cancelar a definição do gerenciador, chame o método sem parâmetros ou transmita nulo como o parâmetro.
Parâmetros
-
callback
função optional
O parâmetro
callback
tem esta aparência:(resource: Resource) => void
-
recurso
Um objeto
devtools.inspectedWindow.Resource
para o recurso que foi clicado.
-