chrome.devtools.panels

Descripción

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

Cada panel de extensión y barra lateral se muestra como una página HTML independiente. Todas las páginas de extensión que se muestran en la ventana de Herramientas para desarrolladores tienen acceso a todas las partes de la API de chrome.devtools, así como a todas las demás APIs de extensión.

Puedes usar el método devtools.panels.setOpenResourceHandler para instalar una función de devolución de llamada que controle las solicitudes del usuario para abrir un recurso (por lo general, un clic en un vínculo de recurso en la ventana de Herramientas para desarrolladores). Se llama a, como máximo, uno de los controladores instalados. Los usuarios pueden especificar (con el diálogo de configuración de Herramientas para desarrolladores) el comportamiento predeterminado o una extensión para controlar las solicitudes de apertura de recursos. Si una extensión llama a setOpenResourceHandler() varias veces, solo se retiene el último controlador.

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

Manifiesto

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

"devtools_page"

Ejemplo

El siguiente código agrega un panel contenido en Panel.html, representado por FontPicker.png en la barra de herramientas de Herramientas para desarrolladores y etiquetado como Selector de fuentes:

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

El siguiente código agrega un panel lateral contenido en Sidebar.html y titulado Propiedades de fuente al 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");
  }
);

En la captura de pantalla, se ilustra el efecto que tendría este ejemplo en la ventana de Herramientas para desarrolladores:

Panel de íconos de extensiones en la barra de herramientas de Herramientas para desarrolladores
Panel de íconos de extensiones en la barra de herramientas de DevTools.

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

Tipos

Button

Es un botón creado por la extensión.

Propiedades

  • onClicked

    Event<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 se establece null, no se actualizan los atributos correspondientes.

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

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

    • iconPath

      cadena opcional

      Ruta de acceso al ícono nuevo del botón.

    • tooltipText

      cadena opcional

      Es el texto que se muestra como información sobre herramientas cuando el usuario coloca el cursor sobre el botón.

    • inhabilitada

      booleano opcional

      Indica si el botón está inhabilitado.

ElementsPanel

Representa el panel Elements.

Propiedades

  • onSelectionChanged

    Event<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 dentro de la barra lateral del panel.

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

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

    • título

      string

      Es el texto que se muestra en el título de la barra lateral.

    • callback

      función opcional

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

      (result: ExtensionSidebarPane) => void

ExtensionPanel

Representa un panel creado por una extensión.

Propiedades

  • onHidden

    Event<functionvoidvoid>

    Se activa cuando el usuario deja de ver el 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

    Event<functionvoidvoid>

    Se activa cuando se realiza una acción de búsqueda (inicio de una búsqueda nueva, navegación por los resultados de la 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

        cadena opcional

  • onShown

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

      • ventana

        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

      Es la ruta de acceso al ícono del botón. El archivo debe contener una imagen de 64 × 24 píxeles compuesta por dos íconos de 32 × 24 píxeles. El ícono de la izquierda se usa cuando el botón está inactivo, y el de la derecha se muestra cuando se presiona el botón.

    • tooltipText

      string

      Es el texto que se muestra como información sobre herramientas cuando el usuario coloca el cursor sobre el botón.

    • inhabilitada

      booleano

      Indica si el botón está inhabilitado.

  • mostrar

    void

    Chrome 140 y versiones posteriores

    Muestra el panel activando la pestaña correspondiente.

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

    () => {...}

ExtensionSidebarPane

Es una barra lateral creada por la extensión.

Propiedades

  • onHidden

    Event<functionvoidvoid>

    Se activa cuando el panel lateral se oculta como resultado de que el usuario cambia del panel que aloja el panel 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

    Event<functionvoidvoid>

    Se activa cuando el panel lateral se vuelve visible como resultado de que 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

      • ventana

        Ventana

  • setExpression

    void

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

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

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

    • expresión

      string

      Es una expresión que se evaluará en el contexto de la página inspeccionada. Los objetos de JavaScript y los nodos DOM se muestran en un árbol expandible similar a la consola o al panel de observación.

    • rootTitle

      cadena opcional

      Es un título opcional para la raíz del árbol de expresión.

    • 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

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

  • setObject

    void

    Establece un objeto compatible con JSON para que se muestre 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

      Es un objeto que se mostrará en el contexto de la página inspeccionada. Se evalúa en el contexto de la entidad que llama (cliente de API).

    • rootTitle

      cadena opcional

      Es un título opcional para la raíz del árbol de expresión.

    • callback

      función opcional

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

      () => void

  • setPage

    void

    Establece una página HTML para que se muestre en el panel lateral.

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

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

    • ruta de acceso

      string

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

SourcesPanel

Representa el panel Sources.

Propiedades

  • onSelectionChanged

    Event<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 dentro de la barra lateral del panel.

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

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

    • título

      string

      Es el texto que se muestra en el título de la barra lateral.

    • callback

      función opcional

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

      (result: ExtensionSidebarPane) => void

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. Los valores posibles son default (el valor predeterminado) y dark.

Tipo

string

Métodos

create()

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

Crea un panel de extensión.

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

    Ruta de acceso de la página HTML del panel relativa al directorio de la extensión.

  • callback

    función opcional

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

    (panel: ExtensionPanel) => void

    • Es un objeto ExtensionPanel que representa el panel creado.

openResource()

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

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

Parámetros

  • url

    string

    Es la URL del recurso que se abrirá.

  • lineNumber

    número

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

  • columnNumber

    número opcional

    Chrome 114 y versiones posteriores

    Especifica el número de columna al que se debe desplazar 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,
): void

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

Parámetros

  • callback

    función opcional

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

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