Chrome ahora admite el espacio de nombres browser.* estandarizado (disponible a partir de Chrome 148). Estamos actualizando la documentación de forma gradual. Obtén más información en nuestra guía de transición.

Google utiliza tecnología de IA para traducir contenido a tu idioma preferido. Las traducciones realizadas con IA pueden contener errores.

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

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 un vínculo de recurso en la ventana de Herramientas para desarrolladores). Se llama a uno de los controladores instalados como máximo. Los usuarios pueden especificar (con el diálogo de configuración de las 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 conserva el último controlador.

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.

Manifiesto

Las siguientes claves se deben declarar en el manifiesto para usar esta API.

"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 de barra lateral contenido en Sidebar.html y titulado Font Properties al panel Elements 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.

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

Tipos

Button

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 son 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
  
  Es la ruta de acceso al ícono nuevo del botón.
- tooltipText
  
  string opcional
  
  Es el texto que se muestra como información sobre la herramienta cuando el usuario coloca el cursor sobre el botón.
- inhabilitada
  
  booleano opcional
  
  Indica si el botón está inhabilitado.

ElementsPanel

Representa el panel Elementos.

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) => {...}
```
- título
  
  string
  
  Texto que se muestra en la leyenda de la barra lateral.
- muestra
  Promise<ExtensionSidebarPane>
  
  Chrome 152 y versiones posteriores
  
  Es una devolución de llamada que se invoca cuando se crea la barra lateral.

ExtensionPanel

Representa un panel creado por una extensión.

Propiedades

onHidden

Event<functionvoidvoid>

Se activa cuando el usuario sale 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

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
    
    string 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. El ícono de la izquierda se usa cuando el botón está inactivo, mientras que el de la derecha se muestra cuando se presiona el botón.
- tooltipText
  
  string
  
  Es el texto que se muestra como información sobre la herramienta cuando el usuario coloca el cursor sobre el botón.
- inhabilitada
  
  booleano
  
  Indica si el botón está inhabilitado.
- muestra
  Button
mostrar

void

Chrome 140 y versiones posteriores browser.* desde Chrome 152

Muestra el panel activando la pestaña correspondiente.

La función show se ve de la siguiente manera:
```
() => {...}
```

ExtensionSidebarPane

Una barra lateral creada por la extensión.

Propiedades

onHidden

Event<functionvoidvoid>

Se activa cuando el panel de la barra lateral se oculta como resultado de que el usuario cambia de 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
```
onShown

Event<functionvoidvoid>

Se activa cuando el panel de la barra 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 de la barra lateral.

La función setExpression se ve de la siguiente manera:
```
(expression: string, rootTitle?: string) => {...}
```
- 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 del DOM se muestran en un árbol expandible similar al de la consola o la observación.
- rootTitle
  
  string opcional
  
  Un título opcional para la raíz del árbol de expresiones.
- muestra
  Promise<void>
  
  Chrome 152 y versiones posteriores
  
  Es una devolución de llamada que se invoca después de que se actualiza el panel de la barra lateral con los resultados de la evaluación de la expresión.
setHeight

void

Establece la altura de la barra lateral.

La función setHeight se ve de la siguiente manera:
```
(height: string) => {...}
```
- alto
  
  string
  
  Es una 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) => {...}
```
- jsonObject
  
  string
  
  Es un objeto que se mostrará en el contexto de la página inspeccionada. Se evalúa en el contexto del emisor (cliente de API).
- rootTitle
  
  string opcional
  
  Un título opcional para la raíz del árbol de expresiones.
- muestra
  Promise<void>
  
  Chrome 152 y versiones posteriores
  
  Es una devolución de llamada que se invoca después de que se actualiza la barra lateral con el objeto.
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
  
  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 Fuentes.

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) => {...}
```
- título
  
  string
  
  Texto que se muestra en la leyenda de la barra lateral.
- muestra
  Promise<ExtensionSidebarPane>
  
  Chrome 152 y versiones posteriores
  
  Es una devolución de llamada que se invoca cuando se crea la barra lateral.

Theme

Chrome 99 y versiones posteriores Navegador* desde Chrome 152

Es el tema que usan las Herramientas para desarrolladores.

Enum

"default"
Tema predeterminado de las Herramientas para desarrolladores. Este siempre es el tema claro.

"dark"
Tema oscuro.

Propiedades

elements

Panel Elementos

Tipo

ElementsPanel

sources

Panel Fuentes.

Tipo

SourcesPanel

themeName

Chrome 59 y versiones posteriores browser.* desde Chrome 152

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

Tipo

string

Métodos

create()

browser.devtools.panels.create(
  title: string,
  iconPath: string,
  pagePath: string,
): Promise<ExtensionPanel>

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 en relación con el directorio de la extensión.

Muestra

Promise<ExtensionPanel>

Chrome 152 y versiones posteriores

Es una función a la que se llama cuando se crea el panel.

openResource()

browser.devtools.panels.openResource(
  url: string,
  lineNumber: number,
  columnNumber?: number,
): Promise<void>

Solicita a las Herramientas para desarrolladores que abran 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

number opcional

Chrome 114 y versiones posteriores browser.* desde Chrome 152

Especifica el número de columna al que se debe desplazar cuando se carga el recurso.

Muestra

Promise<void>

Chrome 152 y versiones posteriores

Es una función a la que se llama cuando el recurso se cargó correctamente.

setOpenResourceHandler()

browser.devtools.panels.setOpenResourceHandler(
  callback?: function,
): void

Especifica la función a la que se llamará cuando el usuario haga clic en un vínculo de recurso en la ventana de Herramientas para desarrolladores. Para anular 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, lineNumber: number) => void
```
- recurso
  
  Recurso
  
  Un objeto devtools.inspectedWindow.Resource para el recurso en el que se hizo clic.
- lineNumber
  
  número
  
  Especifica el número de línea dentro del recurso en el que se hizo clic.

setThemeChangeHandler()

Chrome 99 y versiones posteriores Navegador* desde Chrome 152

browser.devtools.panels.setThemeChangeHandler(
  callback?: function,
): void

Especifica la función a la que se llamará cuando cambie el tema actual en las Herramientas para desarrolladores. Para anular la configuración del 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:
```
(theme: Theme) => void
```
- tema
  
  Tema
  
  Es el tema actual en Herramientas para desarrolladores.

chrome.devtools.panels Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Descripción

Manifiesto

Ejemplo

Tipos

Button

Propiedades

ElementsPanel

Propiedades

ExtensionPanel

Propiedades

ExtensionSidebarPane

Propiedades

SourcesPanel

Propiedades

Theme

Enum

Propiedades

elements

Tipo

sources

Tipo

themeName

Tipo

Métodos

create()

Parámetros

Muestra

openResource()

Parámetros

Muestra

setOpenResourceHandler()

Parámetros

setThemeChangeHandler()

Parámetros

chrome.devtools.panels