chrome.devtools.panels

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.

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.

Use 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.

Consulte o Resumo das APIs do DevTools para uma introdução geral ao uso das APIs das Ferramentas para desenvolvedores.

Manifesto

As chaves a seguir precisam ser declaradas no manifesto para o uso dessa API.

"devtools_page"

Exemplo

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");
  }
);

A captura de tela ilustra o efeito que esse exemplo teria na janela das Ferramentas para desenvolvedores:

Painel do ícone da extensão na barra de ferramentas do DevTools
Painel do ícone de extensão na barra de ferramentas do DevTools.

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

      • 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.

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

      • Um objeto ExtensionSidebarPane para o painel da barra lateral criado.

Propriedades

elements

Elements.

Tipo

ElementsPanel

sources

Origens.

Tipo

SourcesPanel

themeName

Chrome 59 ou mais recente

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

    • 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 recente

    Especifica 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