Agregar una herramienta personalizada en Microsoft Edge DevTools

En este artículo se describe el código del ejemplo de DevTools personalizado. Para instalar y ejecutar primero el ejemplo, consulte Ejemplo: herramienta DevTools personalizada.

Introducción

Al igual que una extensión normal, una extensión de DevTools tiene un archivo de manifiesto. Esto se describe en Introducción al desarrollo de una extensión, que presenta un ejemplo de extensión básica con el que puede empezar.

Una extensión que amplía DevTools incluye, además:

Un archivo HTML representado para mostrar en el panel de la herramienta en DevTools.
Un archivo HTML no representado que se ejecuta cuando se abre DevTools y que controla normalmente la comunicación entre la herramienta DevTools personalizada y la página web inspeccionada.

Este ejemplo de extensión de DevTools comunica entre DevTools y la página web inspeccionada y llama a las API de DevTools.

El ejemplo de extensión de DevTools muestra una herramienta personalizada en DevTools, incluida una pestaña personalizada en la barra de actividades y un panel que está conectado a la pestaña:

Ficha personalizada

Un panel es una página de herramientas en Microsoft Edge DevTools, junto con la pestaña de la herramienta en la Barra de Actividades.

Vea también:

Información general sobre archivos

El ejemplo de extensión DevTools tiene los siguientes archivos:

Archivo	Descripción
`manifest.json`	Información sobre la extensión: nombre, descripción, versión, versión del manifiesto y página HTML que se mostrará en DevTools.
`panel.html`	Página web para mostrar en el panel personalizado de DevTools.
`devtools.html`	Un archivo HTML no representado que se ejecuta cuando se abre DevTools para cargar los archivos JavaScript de la extensión.
`devtools.js`	Lógica principal de la página DevTools personalizada.
`content_script.js`	Código que la extensión inserta en la página web inspeccionada. Agrega un detector de eventos de clic a la página que enviará un mensaje con la posición de clic del ratón. `devtools.js` Escucha este mensaje y muestra la posición en el panel personalizado.
`icon.png`	Icono que se muestra en la pestaña de la herramienta, en la barra de actividades de DevTools y en el menú Más herramientas .
`README.md`	Información básica para desarrolladores sobre cómo usar el ejemplo.

Los detalles están a continuación.

Interacción entre la página web y DevTools

Se necesitan varios archivos para habilitar la interacción entre la página web inspeccionada y DevTools. Estos archivos se ejecutan en contextos diferentes:

devtools.js se ejecuta en el contexto del panel de herramientas personalizadas, en DevTools.
content_script.js es un script de contenido, lo que significa que se ejecuta en el contexto de la página web inspeccionada. De la misma manera que la página web carga otros scripts, un script de contenido tiene acceso al DOM y puede cambiarlo.

La página DevTools, la página inspeccionada y el script de contenido encajan en una extensión:

Diagrama que muestra la anatomía de una extensión de DevTools

Detecta content_script.js dónde hace clic el usuario en la página web inspeccionada:

document.addEventListener("click", event => {
  chrome.runtime.sendMessage({
    click: true,
    xPosition: event.clientX + document.body.scrollLeft,
    yPosition: event.clientY + document.body.scrollTop
  });
});

El script de contenido transmite esta información al devtools.js archivo, donde los datos se muestran en DevTools en la herramienta Personalizado y en la herramienta Consola .

Detectar los clics del usuario en una página web mediante un script de contenido. El script de contenido transmite esta información al devtools.js archivo, donde se muestran los datos tanto en la consola de DevTools como en la herramienta personalizada de DevTools que es una extensión de Microsoft Edge.

Código para la herramienta DevTools personalizada

El ejemplo de DevTools personalizado consta de los siguientes archivos y código. El código que interactúa con la página web inspeccionada hace lo siguiente:

Muestra información de memoria en la herramienta DevTools personalizada .
Muestra la posición del clic del ratón en la herramienta DevTools personalizada , cuando se hace clic en la página web.
Muestra una alerta de saludo en la página web inspeccionada cuando se hace clic en el botón Saludar en la herramienta DevTools personalizadas .

`manifest.json`

Información sobre la extensión: nombre, descripción, versión, versión del manifiesto y página HTML que se mostrará en DevTools.

El archivo de manifiesto contiene pares clave-valor. Las claves de nivel superior se denominan miembros.

Este archivo es necesario, para una extensión. El manifiesto contiene la siguiente información sobre la extensión:

Member	Descripción
`name`	El nombre de la extensión que aparecerá en `edge://extensions/`.
`description`	La descripción de la extensión que se mostrará debajo del nombre de la extensión.
`version`	La versión de la extensión que aparecerá junto al nombre de la extensión.
`manifest_version`	Determina el conjunto de características que usará la extensión, como la modificación de la solicitud de red. La versión actual es version `3`. Para obtener más información sobre esta versión y las diferencias con la versión `2`, consulte Escala de tiempo para migrar al manifiesto V3.
`devtools_page`	La ruta de acceso a un archivo HTML que se ejecuta cada vez que se abre DevTools y carga los archivos JavaScript de la extensión. Esta página no está representada en DevTools.
`content_scripts`	Los archivos JavaScript o CSS que se usarán cuando el usuario abra páginas web específicas. Consulte Scripts de contenido en los documentos de Chrome.
`permissions`	El dispositivo local requiere permisos para ver la capacidad de memoria del sistema, ya que el script llama a la API para eso.

manifest.json:

{
    "name": "Custom DevTools Tool",
    "description": "A DevTools extension interacting with the inspected page",
    "manifest_version": 3,
    "version": "1.0",
    "devtools_page": "devtools.html",
    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "run_at": "document_idle",
        "js": [
            "content_script.js"
        ]
    }],
    "permissions": [
        "system.memory"
    ]
}

El permissions miembro del manifiesto define manifest.json los permisos que la extensión requiere del usuario. Se necesitan algunos permisos para usar determinadas API de extensión. El system-memory permiso es necesario para poder usar las API de extensión. Las API específicas tienen permisos asociados.

Claves dentro del content_scripts miembro:

Clave	Valor
`matches`	Especifica en qué páginas se insertará este script de contenido.
`run_at`	Indica cuándo el explorador inserta el script en la página.
`js`	Los archivos javascript que se van a inyectar.

Vea también:

manifest.json - archivo de origen en el repositorio.
Referencia de la API de extensiones

`panel.html`

Página web para mostrar en el panel personalizado de DevTools.

Este archivo es obligatorio. Esta es la página web que se mostrará en el panel personalizado de DevTools.

panel.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h2>Custom DevTools tool</h2>

    <h3>Memory</h3>
    <div>
      <b>Available Memory Capacity:</b> <span id="availableMemoryCapacity"></span>
    </div>
    <div>
      <b>Total Memory Capacity:</b> <span id="totalMemoryCapacity"></span>
    </div>

    <h3>Send message from DevTools to inspected page</h3>
    <input type="button" id="sayHello" value="Say hello to the inspected page">
    <h3>Send message from inspected page to DevTools</h3>
    <p>Click somewhere in the inspected webpage.</p>
    <div>
      <b>Coordinates:</b> <span id="youClickedOn"></span>
    </div>

  </body>
</html>

panel.htmlen la llamada al método en devtools.js.chrome.devtools.panels.create La panel.html página web contiene la interfaz de usuario del panel de la herramienta personalizada.

Los elementos anteriores demuestran la interacción entre la página inspeccionada y el panel DevTools.

Cuando el usuario hace clic en el sayHello botón de la extensión DevTools, se muestra una alerta en la ventana inspeccionada.

Cuando el usuario hace clic en cualquier parte de la página inspeccionada, las coordenadas del clic del mouse se muestran en la herramienta personalizada de DevTools.

Vea también:

panel.html : archivo de origen en el repositorio.

`devtools.html`

Un archivo HTML no representado que se ejecuta cuando se abre DevTools. Este archivo es obligatorio.

El nombre devtools.html de archivo debe coincidir con el valor del devtools_page miembro en el archivo de manifiesto.

devtools.html Contiene un <script> elemento que carga devtools.js:

devtools.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script src="devtools.js"></script>
  </body>
</html>

Vea también:

devtools.html : archivo de origen en el repositorio.

`devtools.js`

devtools.js contiene la lógica principal de la página de DevTools personalizada. devtools.js hace lo siguiente:

Crea una nueva pestaña y un panel de herramientas personalizadas en DevTools mediante .chrome.devtools.panels.create()
Cuando se muestra la herramienta (panel.onShown escucha), los availableMemoryCapacity elementos and totalMemoryCapacity se recuperan del DOM.
Establece un temporizador para ejecutar código cada segundo después de que se muestre el panel.
Cuando se activa el temporizador, el chrome.system.memory.getInfo método se usa para recuperar la capacidad de memoria total y disponible del dispositivo, y estos valores se muestran en los elementos DOM correspondientes.

devtools.js:

let availableMemoryCapacity;
let totalMemoryCapacity;
let youClickedOn;

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // Code invoked on panel creation.
    panel.onShown.addListener( (extPanelWindow) => {
        // Memory API.
        availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
        totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
        // 2-way message sending.
        let sayHello = extPanelWindow.document.querySelector('#sayHello');
        youClickedOn = extPanelWindow.document.querySelector('#youClickedOn');
        sayHello.addEventListener("click", () => {
            // show a greeting alert in the inspected page
            chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension!");');
        });
    });
});

// Update the Memory display.
setInterval(() => {
    chrome.system.memory.getInfo((data) => {
        if (availableMemoryCapacity) {
            availableMemoryCapacity.innerHTML = data.availableCapacity;
        }
        if (totalMemoryCapacity) {
            totalMemoryCapacity.innerHTML = data.capacity;
        }
    });
}, 1000);

// Send a message from the inspected page to DevTools.
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    // Messages from content scripts should have sender.tab set.
    if (sender.tab && request.click == true) {
        console.log('I am here!');
        if (youClickedOn) {
            youClickedOn.innerHTML = `(${request.xPosition}, ${request.yPosition})`;
        }
        sendResponse({
            xPosition: request.xPosition,
            yPosition: request.yPosition
        });
    }
});

La create llamada al método en devtools.js:

chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => {
    // code invoked on panel creation
});

El create método tiene la siguiente firma:

chrome.devtools.panels.create(
    title: string, // Tool tab's label in Activity bar.
    iconPath: string, // Icon to display in tool's tab.
    pagePath: string, // Webpage to display in tool's panel.
    callback: function // Code to run when tool is opened.
)

Para comunicarse con la página web inspeccionada, devtools.js agrega detectores de eventos al botón y youClickedOn la sayHello etiqueta definidos en el panel.html archivo.

Cuando el usuario hace clic en el sayHello botón, devtools.js ejecuta el código directamente en la ventana inspeccionada, mediante el chrome.devtools.inspectedWindow.eval() método.

Cuando el usuario hace clic en cualquier parte de la ventana inspeccionada, las extensiones de DevTools reciben un mensaje con request.click == true la información de posición del ratón.

Vea también:

devtools.js : archivo de origen en el repositorio.
API admitidas para las extensiones de Microsoft Edge
- chrome.devtools.panels
  - create()

`content_script.js`

Código que la herramienta DevTools personalizada inserta en la página web inspeccionada. Contiene JavaScript insetado en la página web inspeccionada (cualquier página web).

Este archivo hace lo siguiente:

Agrega un agente de escucha de eventos de clic a la página web inspeccionada que envía un mensaje que contiene la posición del clic del ratón, llamando a chrome.runtime.sendMessage.
Escucha el evento de clic de página a través de un agente de escucha de eventos.

El script de contenido retransmite las coordenadas del clic del mouse al devtools.js archivo, donde las coordenadas se muestran tanto en la herramienta de consola como en la herramienta personalizada de DevTools.

Un script de contenido se ejecuta en el contexto de la página web inspeccionada. De la misma manera que la página web carga otros scripts, un script de contenido tiene acceso al DOM y puede cambiarlo.

content_script.js:

document.addEventListener("click", (event) => {
  chrome.runtime.sendMessage({
      click: true,
      xPosition: event.clientX + document.body.scrollLeft,
      yPosition: event.clientY + document.body.scrollTop
    },
    response => {
      console.log("Received response", response);
    }
  );
});

Vea también:

content_script.js : archivo de origen en el repositorio.
Scripts de contenido : Chrome docs.

`icon.png`

Icono que se muestra en la pestaña de la herramienta, en la barra de actividades de DevTools y en el menú Más herramientas .

icon.png es el icono que se muestra en la pestaña de la herramienta en la barra de actividades de DevTools y en el menú Más herramientas :

Vea también:

icon.png : archivo de origen en el repositorio.

Vea también

Documentos de extensiones de Chrome:

Archivos de origen en el repositorio:

Comentarios

¿Le ha resultado útil esta página?

Last updated on 2026-08-13

Agregar una herramienta personalizada en Microsoft Edge DevTools

Introducción

Información general sobre archivos

Interacción entre la página web y DevTools

Código para la herramienta DevTools personalizada

manifest.json

panel.html

devtools.html

devtools.js

content_script.js

icon.png

Vea también

Comentarios

Recursos adicionales

`manifest.json`

`panel.html`

`devtools.html`

`devtools.js`

`content_script.js`

`icon.png`