chrome.devtools.panels

Descrição

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

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

Use o método devtools.panels.setOpenResourceHandler para instalar uma função de callback que lida com solicitações de usuários para abrir um recurso (normalmente, um clique em um link de recurso na "Ferramentas do desenvolvedor"). No máximo, um dos manipuladores instalados é chamado. que os usuários podem especificar (usando caixa de diálogo "Configurações das Ferramentas para desenvolvedores") é o comportamento padrão ou uma extensão para lidar com recursos solicitações em aberto. Se uma extensão chamar setOpenResourceHandler() várias vezes, somente a última é 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 para desenvolvedores com o rótulo 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 no 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 Ferramentas para desenvolvedores:

Painel do ícone 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 da API DevTools dashboards (link em inglês) das chrome-extension-samples repositório de dados.

Tipos

Button

Um botão criado pela extensão.

Propriedades

  • onClicked

    Evento<functionvoidvoid>

    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 exibido como uma dica quando o usuário passa o mouse sobre o botão.

    • desativado

      booleano opcional

      Indica se o botão está desativado.

ElementsPanel

Representa o painel Elementos.

Propriedades

  • onSelectionChanged

    Evento<functionvoidvoid>

    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 dentro da barra lateral.

    A função createSidebarPane tem esta aparência: 

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

    • título

      string

      Texto exibido na legenda da barra lateral.

    • callback

      função opcional

      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 por uma extensão.

Propriedades

  • onHidden

    Evento<functionvoidvoid>

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

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

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

    • tooltipText

      string

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

    • desativado

      booleano

      Indica 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 porque o usuário sai 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<functionvoidvoid>

    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 de expressão.

    • callback

      função opcional

      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. Avaliado no contexto do autor da chamada (cliente de 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 esta aparência: 

      () => void

  • setPage

    void

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

    A função setPage tem esta aparência: 

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

    • caminho

      string

      O caminho relativo de uma página de extensão a ser exibido na barra lateral.

SourcesPanel

Representa o painel Origens.

Propriedades

  • onSelectionChanged

    Evento<functionvoidvoid>

    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 dentro da barra lateral.

    A função createSidebarPane tem esta aparência: 

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

    • título

      string

      Texto exibido na legenda da barra lateral.

    • callback

      função opcional

      O parâmetro callback tem esta aparência: 

      (result: ExtensionSidebarPane) => void

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

Propriedades

elements

Elementos.

Tipo

ElementsPanel

sources

Painel de origens.

Tipo

SourcesPanel

themeName

Chrome 59 ou superior

O nome do tema de cores definido nas configurações do DevTools do usuário. Valores possíveis: default (o 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 relativo ao diretório de extensão.

  • pagePath

    string

    Caminho da página HTML do painel relativo ao diretório de extensão.

  • callback

    função opcional

    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 de Ferramentas para desenvolvedores.

Parâmetros

  • url

    string

    O URL do recurso a ser aberto.

  • lineNumber

    number

    Especifica o número da linha a ser rolada quando o recurso é carregado.

  • columnNumber

    número opcional

    Chrome 114 ou mais recente

    Especifica o número da coluna a ser rolada quando o recurso é carregado.

  • callback

    função opcional

    O parâmetro callback tem esta aparência: 

    () => 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 das Ferramentas para desenvolvedores. Para desativar o gerenciador, chame o método sem parâmetros ou passe nulo como o parâmetro.

Parâmetros