Adición de una herramienta personalizada en Microsoft Edge DevTools

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

Introducción

Al igual que una extensión normal, una extensión 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ásico con el que puede empezar.

Una extensión que extiende DevTools incluye además:

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

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

El ejemplo de extensión DevTools muestra una herramienta personalizada en DevTools, incluida una pestaña Personalizada en la barra de actividad y un panel 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 actividad.

Vea también:

Introducción a los 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 para mostrar en DevTools.
`panel.html`	Página web para mostrar en el panel personalizado en 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 para la página personalizada de DevTools.
`content_script.js`	Código que la extensión inserta en la página web inspeccionada. Agrega un agente de escucha de eventos de clic a la página que enviará un mensaje con la posición de clic del mouse. `devtools.js` escucha este mensaje y muestra la posición en el panel personalizado.
`icon.png`	Icono que se va a mostrar en la pestaña de la herramienta en la barra actividad de DevTools y en el menú Más herramientas .
`README.md`	Información básica para los desarrolladores sobre cómo usar el ejemplo.

A continuación se detallan los detalles.

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 personalizado, 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 DevTools

content_script.js detecta 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 retransmite esta información al devtools.js archivo, donde los datos se muestran en DevTools en la herramienta Personalizada y en la herramienta Consola .

Detecte que el usuario hace clic en una página web mediante un script de contenido. El script de contenido retransmite esta información al devtools.js archivo, donde los datos se muestran en la consola de DevTools y en la herramienta Personalizada de DevTools que es una extensión de Microsoft Edge.

Código para la herramienta Custom DevTools

El ejemplo 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 Custom DevTools.
Muestra la posición del clic del mouse en la herramienta Custom DevTools, 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 Decir hola en la herramienta Custom DevTools.

`manifest.json`

Información sobre la extensión: nombre, descripción, versión, versión del manifiesto y página HTML para 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`	Nombre de la extensión que aparecerá en `edge://extensions/`.
`description`	Descripción de la extensión que se mostrará bajo el nombre de la extensión.
`version`	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 la versión `3`. Para obtener más información sobre esta versión y las diferencias con la versión `2`, consulte Información general y escalas de tiempo para migrar al manifiesto V3.
`devtools_page`	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 se representa en DevTools.
`content_scripts`	Archivos JavaScript o CSS que se usarán cuando el usuario abra páginas web especificadas. Consulte Scripts de contenido en la documentación de Chrome.
`permissions`	El dispositivo local requiere permisos para ver su capacidad de memoria del sistema, ya que el script llama a la API para ello.

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 de manifest.json define qué permisos requiere la extensión 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`	Archivos javascript que se van a insertar.

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 en DevTools.

Este archivo es necesario. Esta es la página web que se va a 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.html se hace referencia a en la llamada al chrome.devtools.panels.create método en devtools.js. La panel.html página web contiene la interfaz de usuario del panel de la herramienta personalizada.

Los elementos anteriores muestran 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 lugar de la página inspeccionada, las coordenadas del clic del mouse se muestran en la herramienta personalizada 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 necesario.

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 agente de escucha), los availableMemoryCapacity elementos y 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 disponible y total 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
        });
    }
});

Llamada create 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 agentes de escucha 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 código directamente en la ventana inspeccionada mediante el chrome.devtools.inspectedWindow.eval() método .

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

Vea también:

devtools.js : archivo de origen en el repositorio.
API admitidas para 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 que se inserta en la página web inspeccionada (cualquier página web).

Este archivo hace lo siguiente:

Agrega un agente de escucha de eventos click a la página web inspeccionada, que envía un mensaje que contiene la posición del clic del mouse, 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 devtools.js mouse al archivo, donde las coordenadas se muestran tanto en la herramienta Consola como en la herramienta Personalizada en 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 : documentos de Chrome.

`icon.png`

Icono que se va a mostrar en la pestaña de la herramienta en la barra actividad de DevTools y en el menú Más herramientas .

icon.png es el icono que se va a mostrar en la pestaña de la herramienta en la barra de actividad 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-06-13

Adición de una herramienta personalizada en Microsoft Edge DevTools

Introducción

Introducción a los archivos

Interacción entre la página web y DevTools

Código para la herramienta Custom DevTools

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`