Adicionar uma ferramenta personalizada no Microsoft Edge DevTools

Este artigo descreve o código do exemplo DevTools Personalizado. Para instalar e executar primeiro o exemplo, veja Exemplo: Ferramenta DevTools Personalizada.

Introdução

Tal como uma extensão normal, uma extensão DevTools tem um ficheiro de manifesto. Isto é descrito em Começar a desenvolver uma extensão, que apresenta um exemplo de extensão básico com o qual pode começar.

Uma extensão que expande o DevTools inclui ainda:

Um ficheiro HTML composto a apresentar no painel da ferramenta em DevTools.
Um ficheiro HTML não composto que é executado quando o DevTools é aberto e que normalmente processa a comunicação entre a ferramenta DevTools personalizada e a página Web inspecionada.

Este exemplo de extensão DevTools comunica entre DevTools e a página Web inspecionada e chama APIs de DevTools.

O exemplo da Extensão DevTools apresenta uma ferramenta personalizada em DevTools, incluindo um separador Personalizado na Barra de Atividade e um painel ligado ao separador:

Guia personalizada

Um painel é uma página de ferramentas no Microsoft Edge DevTools, juntamente com o separador da ferramenta na Barra de Atividade.

Veja também:

Descrição geral dos ficheiros

O exemplo de extensão DevTools tem os seguintes ficheiros:

Arquivo	Descrição
`manifest.json`	Informações sobre a extensão: nome, descrição, versão, versão do manifesto e página HTML a mostrar em DevTools.
`panel.html`	Página Web a apresentar no painel personalizado em DevTools.
`devtools.html`	Um ficheiro HTML não composto que é executado quando o DevTools é aberto, para carregar os ficheiros JavaScript da extensão.
`devtools.js`	Lógica principal para a página DevTools personalizada.
`content_script.js`	Código que a extensão injeta na página Web inspecionada. Adiciona um serviço de escuta de eventos de clique à página que irá enviar uma mensagem com a posição de clique com o rato. `devtools.js` escuta esta mensagem e apresenta a posição no painel personalizado.
`icon.png`	Ícone a apresentar no separador da ferramenta na Barra de atividade de DevTools e no menu Mais ferramentas .
`README.md`	Informações básicas para programadores sobre como utilizar o exemplo.

Os detalhes encontram-se abaixo.

Interagir entre a página Web e o DevTools

São necessários vários ficheiros para ativar a interação entre a página Web inspecionada e as DevTools. Estes ficheiros são executados em diferentes contextos:

devtools.js é executado no contexto do painel de ferramentas personalizado, em DevTools.
content_script.js é um script de conteúdo, o que significa que é executado no contexto da página Web inspecionada. Da mesma forma que outros scripts são carregados pela página Web, um script de conteúdo tem acesso ao DOM e pode alterá-lo.

A página DevTools, a página inspecionada e o script de conteúdo encaixam-se numa extensão:

Diagrama a mostrar a anatomia de uma extensão DevTools

O content_script.js deteta onde o utilizador clica na página Web inspecionada:

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

O script de conteúdo reencaminha estas informações para o devtools.js ficheiro, onde os dados são apresentados em DevTools na ferramenta Personalizada e na ferramenta Consola .

Detetar o utilizador clica numa página Web com um script de conteúdo. O script de conteúdo reencaminha estas informações para o devtools.js ficheiro, onde os dados são apresentados na Consola de DevTools e na ferramenta Personalizada DevTools que é uma extensão do Microsoft Edge.

Code for Custom DevTools tool (Código para a ferramenta DevTools Personalizada)

O exemplo de DevTools Personalizado consiste nos seguintes ficheiros e código. O código que interage com a página Web inspecionada faz o seguinte:

Apresenta informações de memória na ferramenta DevTools Personalizada .
Apresenta a posição de clique com o rato na ferramenta Custom DevTools, quando a página Web é clicada.
Apresenta um alerta de saudação na página Web inspecionada, quando o botão Diga Olá é clicado na ferramenta Custom DevTools.

`manifest.json`

Informações sobre a extensão: nome, descrição, versão, versão do manifesto e página HTML a mostrar em DevTools.

O ficheiro de manifesto contém pares chave/valor. As chaves de nível superior são denominadas membros.

Este ficheiro é necessário para uma extensão. O manifesto contém as seguintes informações sobre a extensão:

Member	Descrição
`name`	O nome da extensão que será apresentada em `edge://extensions/`.
`description`	A descrição da extensão que será apresentada sob o nome da extensão.
`version`	A versão da extensão que será apresentada junto ao nome da extensão.
`manifest_version`	Determina o conjunto de funcionalidades que a extensão irá utilizar, como a modificação do pedido de rede. A versão atual é a versão `3`. Para saber mais sobre esta versão e as diferenças com a versão , veja Descrição geral e linhas cronológicas para migrar para o Manifesto V3.`2`
`devtools_page`	O caminho para um ficheiro HTML que é executado sempre que o DevTools é aberto e carrega os ficheiros JavaScript da extensão. Esta página não é composta em DevTools.
`content_scripts`	Os ficheiros JavaScript ou CSS a utilizar quando o utilizador abrir páginas Web especificadas. Veja Scripts de conteúdo nos documentos do Chrome.
`permissions`	O dispositivo local requer permissões para ver a capacidade de memória do sistema, uma vez que o script chama a API para tal.

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"
    ]
}

O permissions membro do manifesto em manifest.json define as permissões que a extensão necessita do utilizador. Algumas permissões são necessárias para utilizar determinadas APIs de extensão. A system-memory permissão é necessária para utilizar as APIs de extensão. As APIs específicas têm permissões associadas.

Chaves dentro do content_scripts membro:

Chave	Valor
`matches`	Especifica em que páginas este script de conteúdo será injetado.
`run_at`	Indica quando o browser injeta o script na página.
`js`	Os ficheiros javascript a serem injetados.

Veja também:

manifest.json - ficheiro de origem no repositório.
Referência da API de Extensões

`panel.html`

Página Web a apresentar no painel personalizado em DevTools.

Este ficheiro é obrigatório. Esta é a página Web a apresentar no painel personalizado em 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 é referenciado na chamada de chrome.devtools.panels.create método em devtools.js. A panel.html página Web contém a interface de utilizador do painel da ferramenta personalizada.

Os elementos acima demonstram a interação entre a página inspecionada e o painel DevTools.

Quando o utilizador clica no sayHello botão na extensão DevTools, é apresentado um alerta na janela inspecionada.

Quando o utilizador clica em qualquer parte da página inspecionada, as coordenadas de clique com o rato são apresentadas na ferramenta personalizada DevTools.

Veja também:

panel.html - ficheiro de origem no repositório.

`devtools.html`

Um ficheiro HTML não composto que é executado quando o DevTools é aberto. Este ficheiro é obrigatório.

O nome devtools.html do ficheiro tem de corresponder ao valor do devtools_page membro no ficheiro de manifesto.

devtools.html contém um <script> elemento que carrega devtools.js:

devtools.html:

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

Veja também:

devtools.html - ficheiro de origem no repositório.

`devtools.js`

devtools.js contém a lógica principal para a página DevTools personalizada. devtools.js faz o seguinte:

Cria um novo separador e painel ferramenta personalizada no DevTools com chrome.devtools.panels.create().
Quando a ferramenta é apresentada (panel.onShown serviço de escuta), os availableMemoryCapacity elementos e totalMemoryCapacity são obtidos a partir do DOM.
Define um temporizador para executar código a cada segundo após a apresentação do painel.
Quando o temporizador é acionado, o chrome.system.memory.getInfo método é utilizado para obter a capacidade de memória total e disponível do dispositivo e estes valores são apresentados nos elementos DOM correspondentes.

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
        });
    }
});

A chamada do create método em devtools.js:

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

O create método tem a seguinte assinatura:

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 comunicar com a página Web inspecionada, devtools.js adiciona serviços de escuta de eventos ao sayHello botão e youClickedOn etiqueta definidos no panel.html ficheiro.

Quando o utilizador clica no botão, devtools.js executa o sayHello código diretamente na janela inspecionada, utilizando o chrome.devtools.inspectedWindow.eval() método .

Quando o utilizador clica em qualquer parte da janela inspecionada, as extensões DevTools recebem uma mensagem com request.click == true as informações e a posição do rato.

Veja também:

devtools.js - ficheiro de origem no repositório.
APIs suportadas para extensões do Microsoft Edge
- chrome.devtools.panels
  - create()

`content_script.js`

Código que a ferramenta DevTools personalizada injeta na página Web inspecionada. Contém JavaScript que é injetado na página Web inspecionada (qualquer página Web).

Este ficheiro faz o seguinte:

Adiciona um serviço de escuta de eventos de clique à página Web inspecionada, que envia uma mensagem que contém a posição de clique do rato, ao chamar chrome.runtime.sendMessage.
Escuta o evento de clique da página através de um serviço de escuta de eventos.

O script de conteúdo reencaminha as coordenadas de clique com o rato para o devtools.js ficheiro, onde as coordenadas são apresentadas na ferramenta Consola e na ferramenta Personalizada em DevTools.

Um script de conteúdo é executado no contexto da página Web inspecionada. Da mesma forma que outros scripts são carregados pela página Web, um script de conteúdo tem acesso ao DOM e pode alterá-lo.

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);
    }
  );
});

Veja também:

content_script.js - ficheiro de origem no repositório.
Scripts de conteúdo – documentos do Chrome.

`icon.png`

Ícone a apresentar no separador da ferramenta na Barra de atividade de DevTools e no menu Mais ferramentas .

icon.png é o ícone a apresentar no separador da ferramenta na Barra de atividade de DevTools e no menu Mais ferramentas :

Veja também:

icon.png - ficheiro de origem no repositório.

Confira também

Documentos das Extensões do Chrome:

Ficheiros de origem no repositório:

Comentários

Esta página foi útil?

Last updated on 2026-06-13

Adicionar uma ferramenta personalizada no Microsoft Edge DevTools

Introdução

Descrição geral dos ficheiros

Interagir entre a página Web e o DevTools

Code for Custom DevTools tool (Código para a ferramenta DevTools Personalizada)

manifest.json

panel.html

devtools.html

devtools.js

content_script.js

icon.png

Confira também

Comentários

Recursos adicionais

`manifest.json`

`panel.html`

`devtools.html`

`devtools.js`

`content_script.js`

`icon.png`