chrome.devtools.panels

Descrição

Use a API chrome.devtools.panels para integrar sua extensão à interface da janela das ferramentas para desenvolvedores: crie seus próprios painéis, acesse painéis existentes e adicione barras laterais.

Cada painel de extensão e barra lateral é mostrado como uma página HTML separada. Todas as páginas de extensão exibidas na janela "Ferramentas do desenvolvedor" têm acesso a todas as partes da API chrome.devtools e a todas as outras APIs de extensão.

É possível usar o método devtools.panels.setOpenResourceHandler para instalar uma função de callback que processa as solicitações do usuário para abrir um recurso (normalmente, um clique em um link de recurso na janela "Ferramentas do desenvolvedor"). No máximo, um dos processadores instalados é chamado. Os usuários podem especificar (usando a caixa de diálogo "Settings" 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 sobre o uso das APIs do DevTools.

Manifesto

As chaves a seguir precisam ser declaradas no manifesto para usar essa API.

"devtools_page"

Exemplo

O código a seguir adiciona um painel contido em Panel.html, representado por FontPicker.png na barra de ferramentas das ferramentas do desenvolvedor e rotulado como 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 Propriedades da fonte ao painel "Elements" 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 de ícones de 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 de painéis do DevTools do repositório chrome-extension-samples.

Tipos

Button

Um botão criado pela extensão.

Propriedades

  • onClicked

    Evento<functionvoidvoid>

    Disparado quando o botão é clicado.

    A função onClicked.addListener é semelhante a esta: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback tem este formato: 

      () => 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 é semelhante a esta: 

    (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<functionvoidvoid>

    É acionado quando um objeto é selecionado no painel.

    A função onSelectionChanged.addListener é semelhante a esta: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback tem este formato: 

      () => void

  • createSidebarPane

    void

    Cria um painel na barra lateral do painel.

    A função createSidebarPane é semelhante a esta: 

    (title: string, callback?: function) => {...}

    • título

      string

      Texto que aparece na legenda da barra lateral.

    • callback

      função opcional

      O parâmetro callback tem este formato: 

      (result: ExtensionSidebarPane) => void

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

ExtensionPanel

Representa um painel criado por extensão.

Propriedades

  • onHidden

    Evento<functionvoidvoid>

    Disparado quando o usuário sai do painel.

    A função onHidden.addListener é semelhante a esta: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback tem este formato: 

      () => void

  • onSearch

    Evento<functionvoidvoid>

    É acionado após uma ação de pesquisa (início de uma nova pesquisa, navegação pelos resultados da pesquisa ou cancelamento da pesquisa).

    A função onSearch.addListener é semelhante a esta: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback tem este formato: 

      (action: string, queryString?: string) => void

      • ação

        string

      • queryString

        string opcional

  • onShown

    Evento<functionvoidvoid>

    Disparado quando o usuário muda para o painel.

    A função onShown.addListener é semelhante a esta: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback tem este formato: 

      (window: Window) => void

      • janela

        Janela

  • createStatusBarButton

    void

    Adiciona um botão à barra de status do painel.

    A função createStatusBarButton é semelhante a esta: 

    (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 pixels. O ícone à esquerda é usado quando o botão está inativo. O ícone à direita aparece quando o botão é pressionado.

    • tooltipText

      string

      Texto mostrado como uma dica quando o usuário passa o cursor sobre o botão.

    • desativado

      booleano

      Se o botão está desativado.

ExtensionSidebarPane

Uma barra lateral criada pela extensão.

Propriedades

  • onHidden

    Evento<functionvoidvoid>

    É 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 é semelhante a esta: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback tem este formato: 

      () => void

  • onShown

    Evento<functionvoidvoid>

    É acionado quando o painel da barra lateral fica visível como resultado da mudança do usuário para o painel que o hospeda.

    A função onShown.addListener é semelhante a esta: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback tem este formato: 

      (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 é semelhante a esta: 

    (expression: string, rootTitle?: string, callback?: function) => {...}

    • expressão

      string

      Uma expressão a ser avaliada no contexto da página inspecionada. Os objetos JavaScript e os nós DOM são mostrados em uma árvore expansível semelhante ao console/watch.

    • rootTitle

      string opcional

      Um título opcional para a raiz da árvore de expressão.

    • callback

      função opcional

      O parâmetro callback tem este formato: 

      () => void

  • setHeight

    void

    Define a altura da barra lateral.

    A função setHeight é semelhante a esta: 

    (height: string) => {...}

    • altura

      string

      Uma especificação de tamanho semelhante ao CSS, como '100px' ou '12ex'.

  • setObject

    void

    Define um objeto compatível com JSON para ser exibido no painel da barra lateral.

    A função setObject é semelhante a esta: 

    (jsonObject: string, rootTitle?: string, callback?: function) => {...}

    • jsonObject

      string

      Um objeto a ser mostrado no contexto da página inspecionada. É avaliado no contexto do autor da chamada (cliente da 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 este formato: 

      () => void

  • setPage

    void

    Define uma página HTML para ser exibida no painel da barra lateral.

    A função setPage é semelhante a esta: 

    (path: string) => {...}

    • caminho

      string

      Caminho relativo de uma página de extensão a ser exibida na barra lateral.

SourcesPanel

Representa o painel "Origens".

Propriedades

  • onSelectionChanged

    Evento<functionvoidvoid>

    É acionado quando um objeto é selecionado no painel.

    A função onSelectionChanged.addListener é semelhante a esta: 

    (callback: function) => {...}

    • callback

      função

      O parâmetro callback tem este formato: 

      () => void

  • createSidebarPane

    void

    Cria um painel na barra lateral do painel.

    A função createSidebarPane é semelhante a esta: 

    (title: string, callback?: function) => {...}

    • título

      string

      Texto que aparece na legenda da barra lateral.

    • callback

      função opcional

      O parâmetro callback tem este formato: 

      (result: ExtensionSidebarPane) => void

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

Propriedades

elements

Painel "Elements".

Tipo

ElementsPanel

sources

Painel "Origens".

Tipo

SourcesPanel

themeName

Chrome 59 e versões mais recentes

O nome do tema de cores definido nas configurações do usuário nas Ferramentas do desenvolvedor. 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

  • 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 em relação ao diretório de extensão.

  • pagePath

    string

    Caminho da página HTML do painel em relação ao diretório da extensão.

  • callback

    função opcional

    O parâmetro callback tem este formato: 

    (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 as Ferramentas para Desenvolvedores abram um URL em um painel.

Parâmetros

  • url

    string

    O URL do recurso a ser aberto.

  • lineNumber

    number

    Especifica o número da linha para rolar quando o recurso for carregado.

  • columnNumber

    número opcional

    Chrome 114 e versões mais recentes

    Especifica o número da coluna para rolar quando o recurso for carregado.

  • callback

    função opcional

    O parâmetro callback tem este formato: 

    () => 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 "Ferramentas do desenvolvedor". Para redefinir o gerenciador, chame o método sem parâmetros ou transmita nulo como parâmetro.

Parâmetros