Adicionar uma ferramenta personalizada no Microsoft Edge DevTools

Este artigo descreve o código do exemplo de DevTools Personalizado. Para primeiro instalar e executar o exemplo, consulte Exemplo: ferramenta DevTools personalizada.

Introdução

Como uma extensão normal, uma extensão DevTools tem um arquivo de manifesto. Isso é descrito em Comece a desenvolver uma extensão, que apresenta um exemplo básico de extensão com o qual você pode começar.

Uma extensão que estende o DevTools também inclui:

Um arquivo HTML renderizado a ser exibido no painel da ferramenta no DevTools.
Um arquivo HTML não renderizado que é executado quando o DevTools é aberto e que normalmente lida com a comunicação entre a ferramenta DevTools personalizada e a página da Web inspecionada.

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

O exemplo de Extensão do DevTools exibe uma ferramenta personalizada no DevTools, incluindo uma guia Personalizada na Barra de Atividades e um painel conectado à guia:

Guia personalizada

Um painel é uma página de ferramenta no Microsoft Edge DevTools, juntamente com a guia da ferramenta na Barra de Atividades.

Veja também:

Visão geral dos arquivos

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

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 ser mostrada no DevTools.
`panel.html`	Página da Web a ser exibida no painel personalizado no DevTools.
`devtools.html`	Um arquivo HTML não renderizado que é executado quando o DevTools é aberto para carregar os arquivos JavaScript da extensão.
`devtools.js`	Lógica principal da página personalizada do DevTools.
`content_script.js`	Código que a extensão injeta na página da Web inspecionada. Adiciona um ouvinte de evento de clique à página que enviará uma mensagem com a posição de clique do mouse. `devtools.js` Ouve essa mensagem e exibe a posição no painel personalizado.
`icon.png`	Ícone a ser exibido na guia da ferramenta, na barra de atividades do DevTools e no menu Mais ferramentas .
`README.md`	Informações básicas para desenvolvedores sobre como usar o exemplo.

Os detalhes estão abaixo.

Interagir entre a página da Web e o DevTools

Vários arquivos são necessários para permitir a interação entre a página da Web inspecionada e o DevTools. Esses arquivos são executados em contextos diferentes:

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

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

Diagrama mostrando a anatomia de uma extensão do DevTools

O content_script.js detecta onde o usuário clica na página da 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 retransmite essas informações para o devtools.js arquivo, onde os dados são exibidos no DevTools na ferramenta Personalizado e na ferramenta Console .

Detecte os cliques do usuário em uma página da Web usando um script de conteúdo. O script de conteúdo retransmite essas informações para o devtools.js arquivo, onde os dados são exibidos no Console do DevTools e na ferramenta Personalizada do DevTools que é uma extensão do Microsoft Edge.

Código para a ferramenta DevTools Personalizada

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

Exibe informações de memória na ferramenta DevTools Personalizado .
Exibe a posição do clique do mouse na ferramenta DevTools Personalizado , quando a página da Web é clicada.
Exibe um alerta de saudação na página da Web inspecionada, quando o botão Dizer Olá é clicado na ferramenta DevTools Personalizada .

`manifest.json`

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

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

Esse arquivo é 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á exibida em `edge://extensions/`.
`description`	A descrição da extensão que será exibida sob o nome da extensão.
`version`	A versão da extensão que aparecerá ao lado do nome da extensão.
`manifest_version`	Determina o conjunto de recursos que a extensão usará, como a modificação da solicitação 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 `2`, consulte Linha do tempo para migrar para o Manifesto V3.
`devtools_page`	O caminho para um arquivo HTML que é executado sempre que o DevTools é aberto e carrega os arquivos JavaScript da extensão. Esta página não é renderizada no DevTools.
`content_scripts`	Os arquivos JavaScript ou CSS a serem usados quando o usuário abre páginas da Web especificadas. Consulte Scripts de conteúdo nos documentos do Chrome.
`permissions`	O dispositivo local requer permissões para exibir sua capacidade de memória do sistema, pois o script chama a API para isso.

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 define manifest.json quais permissões a extensão requer do usuário. Algumas permissões são necessárias para usar determinadas APIs de extensão. A system-memory permissão é necessária para usar as APIs de extensão. APIs específicas têm permissões associadas.

Chaves dentro do content_scripts membro:

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

Veja também:

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

`panel.html`

Página da Web a ser exibida no painel personalizado no DevTools.

Esse arquivo é obrigatório. Essa é a página da Web a ser exibida no painel personalizado no 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 da Web contém a interface do usuário do painel da ferramenta personalizada.

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

Quando o usuário clica sayHello no botão na extensão DevTools, um alerta é exibido na janela inspecionada.

Quando o usuário clica em qualquer lugar da página inspecionada, as coordenadas de clique do mouse são exibidas na ferramenta personalizada do DevTools.

Veja também:

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

`devtools.html`

Um arquivo HTML não renderizado que é executado quando o DevTools é aberto. Esse arquivo é obrigatório.

O nome devtools.html do arquivo deve corresponder ao valor do devtools_page membro no arquivo 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 - arquivo de origem no repositório.

`devtools.js`

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

Cria uma nova guia e painel de ferramentas personalizadas no DevTools usando .chrome.devtools.panels.create()
Quando a ferramenta é exibida (panel.onShown ouvinte), os availableMemoryCapacity elementos e totalMemoryCapacity são recuperados do DOM.
Define um temporizador para executar o código a cada segundo depois que o painel é mostrado.
Quando o temporizador é acionado, o chrome.system.memory.getInfo método é usado para recuperar a capacidade de memória total e disponível do dispositivo e esses valores são exibidos 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 create chamada do método :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 se comunicar com a página da Web inspecionada, devtools.js adiciona ouvintes de eventos ao sayHello botão e youClickedOn rótulo definidos no panel.html arquivo.

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

Quando o usuário clica em qualquer lugar na janela inspecionada, as extensões DevTools recebem uma mensagem com request.click == true e as informações de posição do mouse.

Veja também:

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

`content_script.js`

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

Esse arquivo faz o seguinte:

Adiciona um ouvinte de evento de clique à página da Web inspecionada, que envia uma mensagem contendo a posição de clique do mouse, chamando chrome.runtime.sendMessage.
Escuta o evento de clique de página por meio de um ouvinte de eventos.

O script de conteúdo retransmite as coordenadas de clique do mouse para o devtools.js arquivo, onde as coordenadas são exibidas nas ferramentas Console e Personalizadas no DevTools.

Um script de conteúdo é executado no contexto da página da Web inspecionada. Da mesma forma que outros scripts são carregados pela página da 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 - arquivo de origem no repositório.
Scripts de conteúdo - Documentos do Chrome.

`icon.png`

Ícone a ser exibido na guia da ferramenta, na barra de atividades do DevTools e no menu Mais ferramentas .

icon.png é o ícone a ser exibido na guia da ferramenta na barra de atividades do DevTools e no menu Mais ferramentas :

Veja também:

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

Confira também

Documentos de extensões do Chrome:

Arquivos de origem no repositório:

Comentários

Esta página foi útil?

Last updated on 2026-08-13

Adicionar uma ferramenta personalizada no Microsoft Edge DevTools

Introdução

Visão geral dos arquivos

Interagir entre a página da Web e o DevTools

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`