chrome.devtools.panels

Descripción

Usa la API de chrome.devtools.panels para integrar tu extensión en la IU de la ventana de las Herramientas para desarrolladores: crea tus propios paneles, accede a los paneles existentes y agrega barras laterales.

Manifiesto

Para usar esta API, se deben declarar las siguientes claves en el manifiesto.

"devtools_page"

Consulta el resumen de las APIs de Herramientas para desarrolladores para ver una introducción general al uso de las APIs de las Herramientas para desarrolladores.

Descripción general

Cada panel de extensión y barra lateral se muestra como una página HTML independiente. Se muestran todas las páginas de extensiones en la ventana de las Herramientas para desarrolladores tienen acceso a todos los módulos de la API de chrome.devtools, así como a API de chrome.extension. Hay otras APIs de extensión que no están disponibles para las páginas de Developer de herramientas, pero puedes invocarlas enviando una solicitud a la página en segundo plano de tu extensión de manera similar a como se hace en las secuencias de comandos de contenido.

Puedes usar el método devtools.panels.setOpenResourceHandler para instalar una función de devolución de llamada que procesa las solicitudes de los usuarios para abrir un recurso (por lo general, un clic en el vínculo de un recurso en la la ventana Herramientas para desarrolladores). Como máximo, se llama a uno de los controladores instalados. que los usuarios pueden especificar (usando el cuadro de diálogo Configuración de Herramientas para desarrolladores) el comportamiento predeterminado o una extensión para administrar recursos solicitudes abiertas. Si una extensión llama a setOpenResourceHandler() varias veces, solo la última controlador se conserve.

Ejemplos

Con el siguiente código, se agrega un panel contenido en Panel.html, representado por FontPicker.png en el La barra de herramientas de herramientas para desarrolladores está etiquetada como Selector de fuentes:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

El siguiente código agrega un panel de barra lateral que se encuentra en Sidebar.html y titulado Propiedades de la fuente (Font Properties) para el panel Elementos y, luego, establece su altura en 8ex:

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

Esta captura de pantalla muestra el efecto que tendrían los ejemplos anteriores en la ventana de Herramientas para desarrolladores:

Panel del ícono de extensión en la barra de herramientas de Herramientas para desarrolladores

Para probar esta API, instala el ejemplo de la API de paneles de Herramientas para desarrolladores de chrome-extension-samples en un repositorio de confianza.

Tipos

Button

Un botón creado por la extensión.

Propiedades

  • onClicked

    Evento<functionvoidvoid>

    Se activa cuando se hace clic en el botón.

    La función onClicked.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • update

    void

    Actualiza los atributos del botón. Si se omiten algunos de los argumentos o null, no se actualizan los atributos correspondientes.

    La función update se ve de la siguiente manera: 

    (iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}

    • iconPath

      string opcional

      Ruta al nuevo ícono del botón.

    • tooltipText

      string opcional

      Texto que se muestra como información sobre la herramienta cuando el usuario coloca el cursor del mouse sobre el botón

    • inhabilitado

      booleano opcional

      Indica si el botón está inhabilitado.

ElementsPanel

Representa el panel Elements.

Propiedades

  • onSelectionChanged

    Evento<functionvoidvoid>

    Se activa cuando se selecciona un objeto en el panel.

    La función onSelectionChanged.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • createSidebarPane

    void

    Crea un panel en la barra lateral del panel.

    La función createSidebarPane se ve de la siguiente manera: 

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

    • título

      string

      Texto que se muestra en la leyenda de la barra lateral.

    • callback

      función opcional

      El parámetro callback se ve de la siguiente manera: 

      (result: ExtensionSidebarPane) => void

      • Un objeto ExtensionSidebarPane para el panel de la barra lateral creado.

ExtensionPanel

Representa un panel creado por una extensión.

Propiedades

  • onHidden

    Evento<functionvoidvoid>

    Se activa cuando el usuario se aleja del panel.

    La función onHidden.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • onSearch

    Evento<functionvoidvoid>

    Se activa cuando se realiza una acción de búsqueda (inicio de una búsqueda nueva, navegación de resultados de búsqueda o cancelación de la búsqueda).

    La función onSearch.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

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

      • acción

        string

      • queryString

        string opcional

  • onShown

    Evento<functionvoidvoid>

    Se activa cuando el usuario cambia al panel.

    La función onShown.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      (window: Window) => void

      • en la ventana modal.

        Ventana

  • createStatusBarButton

    void

    Agrega un botón a la barra de estado del panel.

    La función createStatusBarButton se ve de la siguiente manera: 

    (iconPath: string, tooltipText: string, disabled: boolean) => {...}

    • iconPath

      string

      Ruta al ícono del botón. El archivo debe contener una imagen de 64 x 24 píxeles compuesta por dos íconos de 32 x 24. El icono de la izquierda se utiliza cuando el botón está inactivo. se muestra el ícono derecho cuando se presiona el botón.

    • tooltipText

      string

      Texto que se muestra como información sobre la herramienta cuando el usuario coloca el cursor del mouse sobre el botón

    • inhabilitado

      boolean

      Indica si el botón está inhabilitado.

ExtensionSidebarPane

Una barra lateral creada por la extensión.

Propiedades

  • onHidden

    Evento<functionvoidvoid>

    Se activa cuando el panel de la barra lateral se oculta como resultado de que el usuario se aleja del panel que aloja el panel de la barra lateral.

    La función onHidden.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • onShown

    Evento<functionvoidvoid>

    Se activa cuando el panel de la barra lateral se hace visible cuando el usuario cambia al panel que lo aloja.

    La función onShown.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      (window: Window) => void

      • en la ventana modal.

        Ventana

  • setExpression

    void

    Establece una expresión que se evalúa dentro de la página inspeccionada. El resultado se muestra en el panel de la barra lateral.

    La función setExpression se ve de la siguiente manera: 

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

    • expresión

      string

      Una expresión que se evaluará en el contexto de la página inspeccionada. Los objetos de JavaScript y los nodos del DOM se muestran en un árbol expandible similar a la consola o el reloj.

    • rootTitle

      string opcional

      Es un título opcional para la raíz del árbol de expresiones.

    • callback

      función opcional

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • setHeight

    void

    Establece la altura de la barra lateral.

    La función setHeight se ve de la siguiente manera: 

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

    • alto

      string

      Una especificación de tamaño similar a CSS, como '100px' o '12ex'

  • setObject

    void

    Configura un objeto compatible con JSON que se mostrará en el panel de la barra lateral.

    La función setObject se ve de la siguiente manera: 

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

    • jsonObject

      string

      Un objeto que se mostrará en el contexto de la página inspeccionada. Se evalúa en el contexto del emisor (cliente de la API).

    • rootTitle

      string opcional

      Es un título opcional para la raíz del árbol de expresiones.

    • callback

      función opcional

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • setPage

    void

    Configura una página HTML que se mostrará en el panel de la barra lateral.

    La función setPage se ve de la siguiente manera: 

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

    • ruta de acceso

      string

      Es la ruta de acceso relativa de la página de una extensión que se mostrará en la barra lateral.

SourcesPanel

Representa el panel Sources.

Propiedades

  • onSelectionChanged

    Evento<functionvoidvoid>

    Se activa cuando se selecciona un objeto en el panel.

    La función onSelectionChanged.addListener se ve de la siguiente manera: 

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

    • callback

      función

      El parámetro callback se ve de la siguiente manera: 

      () => void

  • createSidebarPane

    void

    Crea un panel en la barra lateral del panel.

    La función createSidebarPane se ve de la siguiente manera: 

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

    • título

      string

      Texto que se muestra en la leyenda de la barra lateral.

    • callback

      función opcional

      El parámetro callback se ve de la siguiente manera: 

      (result: ExtensionSidebarPane) => void

      • Un objeto ExtensionSidebarPane para el panel de la barra lateral creado.

Propiedades

elements

Panel de elementos.

Tipo

ElementsPanel

sources

Panel de fuentes.

Tipo

SourcesPanel

themeName

Chrome 59 y versiones posteriores

Es el nombre del tema de color establecido en la configuración de Herramientas para desarrolladores del usuario. Valores posibles: default (el predeterminado) y dark.

Tipo

string

Métodos

create()

chrome.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
  callback?: function,
)

Crea un panel de extensiones.

Parámetros

  • título

    string

    Es el título que se muestra junto al ícono de la extensión en la barra de herramientas de las Herramientas para desarrolladores.

  • iconPath

    string

    Es la ruta de acceso del ícono del panel en relación con el directorio de la extensión.

  • pagePath

    string

    Es la ruta de acceso de la página HTML del panel en relación con el directorio de la extensión.

  • callback

    función opcional

    El parámetro callback se ve de la siguiente manera: 

    (panel: ExtensionPanel) => void

    • Un objeto ExtensionPanel que representa el panel creado.

openResource()

chrome.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
  callback?: function,
)

Solicita a las Herramientas para desarrolladores que abra una URL en un panel de Herramientas para desarrolladores.

Parámetros

  • url

    string

    La URL del recurso que se abrirá.

  • lineNumber

    número

    Especifica el número de línea hasta el que se debe desplazar cuando se carga el recurso.

  • columnNumber

    número opcional

    Chrome 114 y versiones posteriores

    Especifica el número de columna hasta la cual desplazarse cuando se carga el recurso.

  • callback

    función opcional

    El parámetro callback se ve de la siguiente manera: 

    () => void

setOpenResourceHandler()

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

Especifica la función a la que se llamará cuando el usuario haga clic en el vínculo de un recurso en la ventana de las Herramientas para desarrolladores. Para quitar la configuración del controlador, llama al método sin parámetros o pasa un valor nulo como parámetro.

Parámetros