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 existentes y agrega barras laterales.
Manifest
Consulta el resumen de las APIs de Herramientas para desarrolladores para obtener una introducción general al uso de las APIs de Herramientas para desarrolladores.
Descripción general
Cada panel de extensión y barra lateral se muestra como una página HTML independiente. Todas las páginas de extensiones que se muestran en la ventana de Herramientas para desarrolladores tienen acceso a todos los módulos de la API de chrome.devtools
, así como a la API de chrome.extension. Otras APIs de extensiones no están disponibles para las páginas de la ventana de Herramientas
para desarrolladores, 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 controle las solicitudes de los usuarios para abrir un recurso (por lo general, un clic en el vínculo de un recurso en la ventana de Herramientas para desarrolladores). Como máximo, se llama a uno de los controladores instalados; los usuarios pueden especificar (mediante el diálogo Configuración de herramientas para desarrolladores) el comportamiento predeterminado o una extensión para manejar las solicitudes abiertas de recursos. Si una extensión llama a setOpenResourceHandler()
varias veces, solo se conserva el último
controlador.
Ejemplos
En el siguiente código, se 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) { ... });
En el siguiente código, se agrega un panel de barra lateral contenido en Sidebar.html
y titulado Font Properties al panel Elements y, luego, se establece su altura en 8ex
:
chrome.devtools.panels.elements.createSidebarPane("Font Properties",
function(sidebar) {
sidebar.setPage("Sidebar.html");
sidebar.setHeight("8ex");
}
);
En esta captura de pantalla, se muestra el efecto que tendrían los ejemplos anteriores en la ventana Herramientas para desarrolladores:
Para probar esta API, instala el ejemplo de la API de paneles de Herramientas para desarrolladores del repositorio chrome-extension-samples.
Tipos
Button
Un botón que crea 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
la 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 si son
null
, los atributos correspondientes no se actualizan.La función
update
se ve de la siguiente manera:(iconPath?: string, tooltipText?: string, disabled?: boolean) => {...}
-
iconPath
cadena opcional
Ruta de acceso al nuevo ícono del botón.
-
tooltipText
cadena opcional
Texto que se muestra como información cuando el usuario coloca el cursor sobre el botón.
-
inhabilitado
booleano opcional
Indica si el botón está inhabilitado.
-
ElementsPanel
Representa el panel de elementos.
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
la 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) => {...}
-
title
cadena
Texto que se muestra en los subtítulos 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 extensión.
Propiedades
-
onHidden
Evento<functionvoidvoid>
Se activa cuando el usuario sale del panel.
La función
onHidden.addListener
se ve de la siguiente manera:(callback: function) => {...}
-
callback
la función
El parámetro
callback
se ve de la siguiente manera:() => void
-
-
onSearch
Evento<functionvoidvoid>
Se activa con una acción de búsqueda (inicio de una nueva búsqueda, navegación de resultados de la búsqueda o cancelación de una búsqueda).
La función
onSearch.addListener
se ve de la siguiente manera:(callback: function) => {...}
-
callback
la función
El parámetro
callback
se ve de la siguiente manera:(action: string, queryString?: string) => void
-
acción
cadena
-
queryString
cadena 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
la 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
cadena
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 ícono izquierdo se utiliza cuando el botón está inactivo; el ícono derecho se muestra cuando se presiona el botón.
-
tooltipText
cadena
Texto que se muestra como información cuando el usuario coloca el cursor sobre el botón.
-
inhabilitado
boolean
Indica si el botón está inhabilitado.
-
resultados
-
ExtensionSidebarPane
Una barra lateral que crea la extensión
Propiedades
-
onHidden
Evento<functionvoidvoid>
Se activa cuando el panel de la barra lateral se oculta como resultado de que el usuario sale del panel que aloja el panel de la barra lateral.
La función
onHidden.addListener
se ve de la siguiente manera:(callback: function) => {...}
-
callback
la 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
la 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 de la barra lateral.
La función
setExpression
se ve de la siguiente manera:(expression: string, rootTitle?: string, callback?: function) => {...}
-
expresión
cadena
Una expresión que se evaluará en el contexto de la página inspeccionada. Los objetos JavaScript y los nodos del DOM se muestran en un árbol expandible similar al de la consola o el reloj.
-
rootTitle
cadena opcional
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
cadena
Una especificación de tamaño similar a CSS, como
'100px'
o'12ex'
.
-
-
setObject
void
Establece un objeto compatible con JSON para 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
cadena
Un objeto que se mostrará en el contexto de la página inspeccionada. Se evalúa en el contexto del llamador (cliente de la API).
-
rootTitle
cadena opcional
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
Establece una página HTML para que se muestre en el panel de la barra lateral.
La función
setPage
se ve de la siguiente manera:(path: string) => {...}
-
ruta de acceso
cadena
Ruta relativa de la página de una extensión que se mostrará en la barra lateral.
-
SourcesPanel
Representa el panel de fuentes.
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
la 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) => {...}
-
title
cadena
Texto que se muestra en los subtítulos 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
(predeterminado) y dark
.
Tipo
cadena
Métodos
create()
chrome.devtools.panels.create(
title: string,
iconPath: string,
pagePath: string,
callback?: function,
)
Crea un panel de extensión.
Parámetros
-
title
cadena
Es el título que aparece junto al ícono de la extensión en la barra de herramientas de las Herramientas para desarrolladores.
-
iconPath
cadena
Es la ruta de acceso del ícono del panel en relación con el directorio de la extensión.
-
pagePath
cadena
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 Herramientas para desarrolladores que abra una URL en un panel de Herramientas para desarrolladores.
Parámetros
-
url
cadena
La URL del recurso que se abrirá.
-
lineNumber
número
Especifica el número de línea al que se desplazará la página cuando se cargue el recurso.
-
columnNumber
número opcional
Chrome 114 y versiones posterioresEspecifica el número de columna a la 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,
)
Especifica la función a la que se llamará cuando el usuario haga clic en un vínculo de recursos en la ventana Herramientas para desarrolladores. Para desactivar el 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.
-