chrome.devtools.panels

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.

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 de ferramentas para desenvolvedores têm acesso a todas as partes da API chrome.devtools, bem como a todas as outras APIs de extensão.

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

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

Painel do ícone da 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

  Cria um painel na barra lateral do painel.

  A função createSidebarPane é semelhante a:

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

  • título

    string

    Texto que aparece na legenda da barra lateral.

  • retorna

    Promise<ExtensionSidebarPane>

    Chrome 152+

    Um callback invocado quando a barra lateral é criada.

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.

  • retorna

    Button

• mostrar

  void

  Chrome 140+ browser.* desde o Chrome 152

  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

  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) => {...}

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

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

• 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

  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) => {...}

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

  • retorna

    Promessa<void>

    Chrome 152+

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

• 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

  Cria um painel na barra lateral do painel.

  A função createSidebarPane é semelhante a:

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

  • título

    string

    Texto que aparece na legenda da barra lateral.

  • retorna

    Promise<ExtensionSidebarPane>

    Chrome 152+

    Um callback invocado quando a barra lateral é criada.

Theme

Chrome 99+ browser.* desde o Chrome 152

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+ browser.* desde o Chrome 152

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

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): 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.

Retorna

• Promise<ExtensionPanel>

  Chrome 152+

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

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): 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+ browser.* desde o Chrome 152

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

Retorna

• Promessa<void>

  Chrome 152+

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

setOpenResourceHandler()

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

  • recurso

    Recurso

    Um objeto devtools.inspectedWindow.Resource para o recurso que foi clicado.

  • lineNumber

    número

    Especifica o número da linha no recurso que foi clicado.

setThemeChangeHandler()

Chrome 99+ browser.* desde o Chrome 152

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