chrome.devtools.panels

refresh date: 2026-09-25 robots: noindex

Descrição

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

Manifesto

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

"devtools_page"

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 exibidas na janela das 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 das Ferramentas para Desenvolvedores, mas é possível invocá-las enviando uma solicitação para a página de segundo plano da extensão, de maneira semelhante ao que é feito nos scripts de conteúdo.

Use 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 das 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 a seguir adiciona um painel contido em Panel.html, representado por FontPicker.png na barra de ferramentas das Ferramentas para Desenvolvedores 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 Font Properties 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");
  }
);

Esta captura de tela demonstra o efeito que os exemplos acima teriam na janela de ferramentas para desenvolvedores:

Painel de ícones de extensão na barra de ferramentas do DevTools

Para testar essa API, instale o exemplo da API devtools panels do repositório chrome-extension-samples.

Tipos

Button

Um botão criado pela extensão.

Propriedades

  • onClicked

    Event<functionvoidvoid>

    Disparado quando o botão é clicado.

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

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      () => 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: 

    (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

    Event<functionvoidvoid>

    Disparado quando um objeto é selecionado no painel.

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

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      () => void

  • createSidebarPane

    void

    Promessa

    Cria um painel na barra lateral do painel.

    A função createSidebarPane é semelhante a: 

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

    • título

      string

      Texto que aparece na legenda da barra lateral.

    • callback

      função optional

      O parâmetro callback é semelhante a: 

      (result: ExtensionSidebarPane) => void

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

    • retorna

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Um callback invocado quando a barra lateral é criada.

      As promessas só são compatíveis com o Manifest V3 e versões mais recentes. Outras plataformas precisam usar callbacks.

ExtensionPanel

Representa um painel criado por uma extensão.

Propriedades

  • onHidden

    Event<functionvoidvoid>

    Disparado quando o usuário sai do painel.

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

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      () => void

  • onSearch

    Event<functionvoidvoid>

    Acionado em 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 é semelhante a: 

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

    • callback

      função

      O parâmetro callback é semelhante a: 

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

      • ação

        string

      • queryString

        string opcional

  • onShown

    Event<functionvoidvoid>

    Disparado quando o usuário muda para o painel.

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

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      (window: Window) => void

      • janela

        Janela

  • createStatusBarButton

    void

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

    A função createStatusBarButton é semelhante a: 

    (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, e o ícone à direita é mostrado quando o botão é pressionado.

    • tooltipText

      string

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

    • desativado

      booleano

      Se o botão está desativado.

  • mostrar

    void

    Chrome 140 ou mais recente

    Mostra o painel ativando a guia correspondente.

    A função show é semelhante a: 

    () => {...}

ExtensionSidebarPane

Uma barra lateral criada pela extensão.

Propriedades

  • onHidden

    Event<functionvoidvoid>

    Disparado quando o painel da barra lateral é ocultado porque o usuário saiu do painel que o hospeda.

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

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Disparado quando o painel da barra lateral fica visível porque o usuário mudou para o painel que o hospeda.

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

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      (window: Window) => void

      • janela

        Janela

  • setExpression

    void

    Promessa

    Define uma expressão que é avaliada na página inspecionada. O resultado é exibido no painel da barra lateral.

    A função setExpression é semelhante a: 

    (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 exibidos em uma árvore expansível semelhante ao console/observação.

    • rootTitle

      string opcional

      Um título opcional para a raiz da árvore de expressões.

    • callback

      função optional

      O parâmetro callback é semelhante a: 

      () => void

    • retorna

      Promessa<void>

      Chrome 152+

      Um callback invocado depois que o painel da barra lateral é atualizado com os resultados da avaliação da expressão.

      As promessas só são compatíveis com o Manifest V3 e versões mais recentes. Outras plataformas precisam usar callbacks.

  • setHeight

    void

    Define a altura da barra lateral.

    A função setHeight é semelhante a: 

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

    • altura

      string

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

  • setObject

    void

    Promessa

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

    A função setObject é semelhante a: 

    (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 da API).

    • rootTitle

      string opcional

      Um título opcional para a raiz da árvore de expressões.

    • callback

      função optional

      O parâmetro callback é semelhante a: 

      () => void

    • retorna

      Promessa<void>

      Chrome 152+

      Um callback invocado depois que a barra lateral é atualizada com o objeto.

      As promessas só são compatíveis com o Manifest V3 e versões mais recentes. Outras plataformas precisam usar callbacks.

  • setPage

    void

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

    A função setPage é semelhante a: 

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

    • caminho

      string

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

SourcesPanel

Representa o painel "Fontes".

Propriedades

  • onSelectionChanged

    Event<functionvoidvoid>

    Disparado quando um objeto é selecionado no painel.

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

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

    • callback

      função

      O parâmetro callback é semelhante a: 

      () => void

  • createSidebarPane

    void

    Promessa

    Cria um painel na barra lateral do painel.

    A função createSidebarPane é semelhante a: 

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

    • título

      string

      Texto que aparece na legenda da barra lateral.

    • callback

      função optional

      O parâmetro callback é semelhante a: 

      (result: ExtensionSidebarPane) => void

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

    • retorna

      Promise<ExtensionSidebarPane>

      Chrome 152+

      Um callback invocado quando a barra lateral é criada.

      As promessas só são compatíveis com o Manifest V3 e versões mais recentes. Outras plataformas precisam usar callbacks.

Theme

Chrome 99+

Tema usado pelo DevTools.

Enumeração

"default"
Tema padrão do DevTools. Esse é sempre o tema claro.

"dark"
Tema escuro.

Propriedades

elements

Painel Elementos.

Tipo

ElementsPanel

sources

Painel "Fontes".

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

Promessa 
chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
): Promise<ExtensionPanel>

Cria um painel de extensão.

Parâmetros

  • título

    string

    Título que aparece ao lado do ícone da extensão na barra de ferramentas para desenvolvedores.

  • iconPath

    string

    Caminho do ícone do painel em relação ao diretório da extensão.

  • pagePath

    string

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

  • callback

    função optional

    O parâmetro callback é semelhante a: 

    (panel: ExtensionPanel) => void

    • Um objeto ExtensionPanel que representa o painel criado.

Retorna

  • Promise<ExtensionPanel>

    Chrome 152+

    Uma função que é chamada quando o painel é criado.

    As promessas só são compatíveis com o Manifest V3 e versões mais recentes. Outras plataformas precisam usar callbacks.

openResource()

Promessa 
chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
): Promise<void>

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

    número

    Especifica o número da linha para a qual rolar quando o recurso é carregado.

  • columnNumber

    número optional

    Chrome 114+

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

  • callback

    função optional

    O parâmetro callback é semelhante a: 

    () => void

Retorna

  • Promessa<void>

    Chrome 152+

    Uma função que é chamada quando o recurso é carregado.

    As promessas só são compatíveis com o Manifest V3 e versões mais recentes. Outras plataformas precisam usar callbacks.

setOpenResourceHandler()

chrome.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

Especifica a função a ser chamada quando o usuário clica em um link de recurso na janela de ferramentas para desenvolvedores. Para remover o gerenciador, chame o método sem parâmetros ou transmita null como parâmetro.

Parâmetros

  • callback

    função optional

    O parâmetro callback é semelhante a: 

    (resource: Resource, lineNumber: number) => void

setThemeChangeHandler()

Chrome 99+ 
chrome.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Especifica a função a ser chamada quando o tema atual muda no DevTools. Para cancelar a definição do gerenciador, chame o método sem parâmetros ou transmita null como o parâmetro.

Parâmetros

  • callback

    função optional

    O parâmetro callback é semelhante a: 

    (theme: Theme) => void

    • tema

      Tema

      Tema atual no DevTools.