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:

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

Veja também:

• Exemplo: página da Web pop-up do visualizador de imagens
• Visão geral do DevTools

Visão geral dos arquivos

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

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:

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:

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:

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:

1. Cria uma nova guia e painel de ferramentas personalizadas no DevTools usando .chrome.devtools.panels.create()

2. Quando a ferramenta é exibida (panel.onShown ouvinte), os availableMemoryCapacity elementos e totalMemoryCapacity são recuperados do DOM.

3. Define um temporizador para executar o código a cada segundo depois que o painel é mostrado.

4. 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

• Exemplo: Ferramenta DevTools personalizada
• Visão geral do DevTools
• Linha do tempo para migrar para o Manifesto V3
• APIs com suporte para extensões do Microsoft Edge
• Comece a desenvolver uma extensão
• Exemplo: página da Web pop-up do visualizador de imagens

Documentos de extensões do Chrome:

• Scripts de conteúdo
• Referência da API de extensões
  • chrome.devtools.panels
    • create()

Arquivos de origem no repositório:

• content_script.js
• devtools.html
• devtools.js
• icon.png
• manifest.json
• panel.html