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.
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 Herramientas para desarrolladores tienen acceso a todas las partes de la API de chrome.devtools
, así como a todas
otras APIs de extensión.
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.
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.
Manifiesto
Ejemplo
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");
}
);
La captura de pantalla muestra el efecto que este ejemplo tendría en la ventana Herramientas para desarrolladores:
![Panel del ícono de extensión en la barra de herramientas de Herramientas para desarrolladores](https://developer.chrome.com/static/docs/extensions/reference/api/devtools/panels/images/devtools-panels.png?authuser=7&hl=es)
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
-
resultado
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.
-
muestra
-
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
-
resultado
Un objeto ExtensionSidebarPane para el panel de la barra lateral creado.
-
-
Propiedades
elements
Panel de elementos.
Tipo
sources
Panel de fuentes.
Tipo
themeName
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
-
panel
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 posterioresEspecifica 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
-
callback
función opcional
El parámetro
callback
se ve de la siguiente manera:(resource: Resource) => void
-
recurso
Un objeto
devtools.inspectedWindow.Resource
para el recurso en el que se hizo clic.
-