Las extensiones de Herramientas para desarrolladores agregan funciones a las Herramientas para desarrolladores de Chrome accediendo a herramientas específicas API de extensión a través de una página de Herramientas para desarrolladores agregada a la extensión.
![Diagrama de la arquitectura en el que se muestra la página de Herramientas para desarrolladores que se comunica con el
la ventana inspeccionada y el service worker. Se muestra el service worker
la comunicación con las secuencias de comandos de contenido y el acceso a las APIs de extensiones.
La página de Herramientas para desarrolladores tiene acceso a las APIs de Herramientas para desarrolladores, por ejemplo, para crear paneles.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/architecture-diagram.png?authuser=1&hl=es-419)
Las APIs de extensión específicas de Herramientas para desarrolladores incluyen lo siguiente:
Página de Herramientas para desarrolladores
Cuando se abre una ventana de Herramientas para desarrolladores, una extensión de Herramientas para desarrolladores crea una instancia de su página de Herramientas para desarrolladores que existe siempre que la ventana esté abierta. Esta página tiene acceso a las APIs de Herramientas para desarrolladores y a las APIs de extensión, y puede hacer lo siguiente:
- Crea paneles e interactúa con ellos usando las APIs de
devtools.panels
, incluida la adición de otras páginas de extensiones como paneles o barras laterales de la ventana de Herramientas para desarrolladores. - Obtén información sobre la ventana inspeccionada y evalúa el código en la ventana inspeccionada con el
APIs de
devtools.inspectedWindow
. - Obtén información sobre las solicitudes de red con las APIs de
devtools.network
. - Extiende el panel Grabadora con las APIs de
devtools.recorder
. - Obtén información sobre el estado de registro del panel de rendimiento mediante las APIs de
devtools.performance
.
La página de Herramientas para desarrolladores puede acceder directamente a las APIs de extensiones. Esto incluye poder para comunicarse con el service worker usando envío de mensajes.
Cómo crear una extensión de Herramientas para desarrolladores
Si deseas crear una página de Herramientas para desarrolladores para tu extensión, agrega el campo devtools_page
en la extensión
manifiesto:
{
"name": ...
"version": "1.0",
"devtools_page": "devtools.html",
...
}
El campo devtools_page
debe dirigir a una página HTML. Debido a que las Herramientas para desarrolladores
debe ser local para tu extensión, recomendamos especificarla con una URL relativa.
Los miembros de la API de chrome.devtools
solo están disponibles para las páginas cargadas en las Herramientas para desarrolladores
mientras esa ventana está abierta. No hay acceso a las secuencias de comandos de contenido ni a otras páginas de extensiones
a estas APIs.
Elementos de la IU de Herramientas para desarrolladores: paneles y paneles de la barra lateral
Además de los elementos habituales de la IU de extensión, como las acciones del navegador, los menús contextuales y las ventanas emergentes, una La extensión de Herramientas para desarrolladores puede agregar elementos de la IU a la ventana de Herramientas para desarrolladores:
- Un panel es una pestaña de nivel superior, como los paneles Elements, Sources y Network.
- Un panel de la barra lateral presenta una IU complementaria relacionada con un panel. Los estilos, los estilos calculados y Los paneles de los objetos de escucha de eventos del panel Elements son ejemplos de paneles de la barra lateral. Según el versión de Chrome que usas y donde está anclada la ventana de Herramientas para desarrolladores, es posible que los paneles de la barra lateral se vería como la siguiente imagen de ejemplo:
![Ventana de Herramientas para desarrolladores que muestra el panel Elementos y el panel Estilos de la barra lateral.](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/devtools-window-showing-e-9051f7f0347cd.png?authuser=1&hl=es-419)
Cada panel tiene su propio archivo HTML, que puede incluir otros recursos (JavaScript, CSS, imágenes, etcétera) activada). Para crear un panel básico, usa el siguiente código:
chrome.devtools.panels.create("My Panel",
"MyPanelIcon.png",
"Panel.html",
function(panel) {
// code invoked on panel creation
}
);
JavaScript ejecutado en un panel o en un panel de la barra lateral tiene acceso a las mismas APIs que la página de Herramientas para desarrolladores.
Para crear un panel básico de la barra lateral, usa el siguiente código:
chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
function(sidebar) {
// sidebar initialization code here
sidebar.setObject({ some_data: "Some data to show" });
});
Hay varias formas de mostrar contenido en un panel de la barra lateral:
- Contenido HTML: Llama a
setPage()
para especificar una página HTML que se mostrará en el panel. - Datos JSON: Pasa un objeto JSON a
setObject()
. - Expresión de JavaScript: Pasa una expresión a
setExpression()
. DevTools Evalúa la expresión en el contexto de la página inspeccionada y, luego, muestra el valor que se muestra.
Tanto para setObject()
como para setExpression()
, el panel muestra el valor tal como aparecería en
Consola de Herramientas para desarrolladores. Sin embargo, setExpression()
te permite mostrar elementos DOM y JavaScript arbitrario
objetos, mientras que setObject()
solo admite objetos JSON.
Cómo comunicarse entre los componentes de la extensión
En las siguientes secciones, se describen algunas formas útiles de permitir que los componentes de la extensión de Herramientas para desarrolladores comunicarse entre sí.
Cómo insertar un guion de contenido
Para insertar una secuencia de comandos de contenido, usa scripting.executeScript()
:
// DevTools page -- devtools.js
chrome.scripting.executeScript({
target: {
tabId: chrome.devtools.inspectedWindow.tabId
},
files: ["content_script.js"]
});
Puedes recuperar el ID de la pestaña de la ventana inspeccionada con el
inspectedWindow.tabId
.
Si ya se insertó una secuencia de comandos de contenido, puedes usar las APIs de mensajería para comunicarte con ella.
Evalúa JavaScript en la ventana inspeccionada
Puedes usar el método inspectedWindow.eval()
para ejecutar JavaScript.
código en el contexto de la página inspeccionada. Puedes invocar el método eval()
desde una página de Herramientas para desarrolladores,
panel o el panel de la barra lateral.
De forma predeterminada, la expresión se evalúa en el contexto del marco principal de la página.
inspectedWindow.eval()
usa las mismas opciones y contexto de ejecución de secuencia de comandos que el código.
se ingresa a la consola de Herramientas para desarrolladores, que permite acceder a las Utilidades de consola de Herramientas para desarrolladores
de API cuando se usa eval()
. Por ejemplo, SOAK lo usa para inspeccionar un elemento:
chrome.devtools.inspectedWindow.eval(
"inspect($$('head script[data-soak=main]')[0])",
function(result, isException) { }
);
También puedes establecer useContentScriptContext
en true
cuando llames a inspectedWindow.eval()
para
evaluar la expresión en el mismo contexto que las secuencias de comandos de contenido. Para usar esta opción, usa una declaración de secuencia de comandos de contenido estático antes de llamar a eval()
, ya sea llamando a executeScript()
o especificando un contenido.
en el archivo manifest.json
. Después de que se carga el contexto de la secuencia de comandos de contexto, también puedes usar esta opción para
insertar secuencias de comandos de contenido adicionales.
Pasa el elemento seleccionado a una secuencia de comandos de contenido
La secuencia de comandos de contenido no tiene acceso directo al elemento seleccionado actualmente. Sin embargo, cualquier código que
ejecutar con inspectedWindow.eval()
tiene acceso a las Herramientas para desarrolladores
Console y las APIs de Console Utilities. Por ejemplo, en el código evaluado, puedes usar $0
para acceder al
elemento seleccionado.
Para pasar el elemento seleccionado a una secuencia de comandos de contenido, haz lo siguiente:
Crea un método en la secuencia de comandos de contenido que tome el elemento seleccionado como argumento.
function setSelectedElement(el) { // do something with the selected element }
Llama al método desde la página de Herramientas para desarrolladores con
inspectedWindow.eval()
. con la opciónuseContentScriptContext: true
.chrome.devtools.inspectedWindow.eval("setSelectedElement($0)", { useContentScriptContext: true });
La opción useContentScriptContext: true
especifica que la expresión debe evaluarse en el
el mismo contexto que las secuencias de comandos de contenido, por lo que puede acceder al método setSelectedElement
.
Cómo obtener el window
de un panel de referencia
Para llamar a postMessage()
desde un panel de Herramientas para desarrolladores, necesitarás una referencia a su objeto window
. Obtén un
Ventana iframe del panel desde el controlador de eventos panel.onShown
:
extensionPanel.onShown.addListener(function (extPanelWindow) {
extPanelWindow instanceof Window; // true
extPanelWindow.postMessage( // …
});
Envía mensajes de las secuencias de comandos insertadas a la página de Herramientas para desarrolladores
Código insertado directamente en la página sin una secuencia de comandos de contenido, incluso agregando un <script>
etiqueta o llamando a inspectedWindow.eval()
, no puede enviar mensajes a
página de Herramientas para desarrolladores con runtime.sendMessage()
. En cambio, recomendamos
combinando la secuencia de comandos insertada con una de contenido que puede actuar como intermediaria
Usa el método window.postMessage()
. En el siguiente ejemplo, se usa la secuencia de comandos en segundo plano
de la sección anterior.
// injected-script.js
window.postMessage({
greeting: 'hello there!',
source: 'my-devtools-extension'
}, '*');
// content-script.js
window.addEventListener('message', function(event) {
// Only accept messages from the same frame
if (event.source !== window) {
return;
}
var message = event.data;
// Only accept messages that we know are ours. Note that this is not foolproof
// and the page can easily spoof messages if it wants to.
if (typeof message !== 'object' || message === null ||
message.source !== 'my-devtools-extension') {
return;
}
chrome.runtime.sendMessage(message);
});
Puedes encontrar otras técnicas alternativas de envío de mensajes en GitHub.
Detecta cuándo se abre y se cierra Herramientas para desarrolladores
Para realizar un seguimiento de si la ventana de Herramientas para desarrolladores está abierta, agrega un objeto de escucha onConnect al service worker y llama a connect() desde la página de Herramientas para desarrolladores; Porque cada pestaña puede tener su propia ventana de Herramientas para desarrolladores abierta, es posible que recibas varios eventos de conexión. Para realizar un seguimiento de la apertura de alguna ventana de Herramientas para desarrolladores, cuenta los eventos de conexión y desconexión como se muestra a continuación en el siguiente ejemplo:
// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
if (port.name == "devtools-page") {
if (openCount == 0) {
alert("DevTools window opening.");
}
openCount++;
port.onDisconnect.addListener(function(port) {
openCount--;
if (openCount == 0) {
alert("Last DevTools window closing.");
}
});
}
});
La página de Herramientas para desarrolladores crea una conexión como la siguiente:
// devtools.js
// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
name: "devtools-page"
});
// Send a periodic heartbeat to keep the port open.
setInterval(() => {
port.postMessage("heartbeat");
}, 15000);
Ejemplos de extensión de Herramientas para desarrolladores
Los ejemplos de esta página provienen de las siguientes páginas:
- Extensión de Herramientas para desarrolladores de Polymer: Utiliza muchos asistentes que se ejecutan en la página del host para realizar consultas. Estado de DOM/JS para devolver al panel personalizado.
- React Herramientas para la extensión: Usa un submódulo del procesador para reutilizar la IU de Herramientas para desarrolladores. o los componentes de la solución.
- Inspector de Ember: Núcleo de extensión compartido con adaptadores para Chrome y Firefox.
- Coquette-inspect: Una extensión limpia basada en React con un agente de depuración insertado. a la página de alojamiento.
- Las extensiones de muestra tienen extensiones más valiosas para instalar, probar y aprender. de la imagen de la que se originó.
Más información
Para obtener información sobre las APIs estándar que pueden usar las extensiones, consulta chrome.* APIs y la Web APIs.
Envíanos tus comentarios. Tus comentarios y sugerencias nos ayudan a mejorar las APIs.
Ejemplos
Puedes encontrar ejemplos que usan las APIs de Herramientas para desarrolladores en Muestras.