Share via

Criar um tutorial de extensão, parte 2

  • Artigo

Para ver a fonte de pacote de extensão concluída para esta parte do tutorial, acesse MicrosoftEdge-Extensions repo > extension-getting-started-part2.

O código-fonte foi atualizado do Manifesto V2 para o Manifesto V3.

Este tutorial aborda as seguintes tecnologias de extensão:

  • Injetando bibliotecas JavaScript em uma extensão.
  • Expondo ativos de extensão às guias do navegador.
  • Incluindo páginas de conteúdo em guias de navegador existentes.
  • Fazer com que as páginas de conteúdo ouçam mensagens de pop-ups e respondam.

Você aprenderá a atualizar seu menu pop-up para substituir sua imagem de estrelas estáticas por um título e um botão HTML padrão. Esse botão, quando selecionado, passa essa imagem de estrelas para a página de conteúdo. Essa imagem agora está inserida na extensão e inserida na guia navegador ativo. Aqui estão as etapas.

Essas etapas exigem que você conclua as etapas para as etapas iniciais do pacote de extensão. Para o tutorial, acesse MicrosoftEdge-Extensions repo > extension-getting-started-part1.

Etapa 1: atualizar pop-up.html para incluir um botão

Na pasta pop-up em que você criou o popup.html arquivo a partir da parte inicial do tutorial, você adicionará a marcação que exibe um título com um botão. Posteriormente, você programará esse botão em uma etapa diferente, mas por enquanto inclui uma referência a um arquivo popup.jsJavaScript vazio.

Veja abaixo um arquivo HTML atualizado por exemplo:

<html>
    <head>
        <meta charset="utf-8" />
        <style>
            body {
                width: 500px;
            }
            button {
                background-color: #336dab;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h1>Display the NASA picture of the day</h1>
        <h2>(select the image to remove)</h2>
        <button id="sendmessageid">Display</button>
        <script src="popup.js"></script>
    </body>
</html>

Depois de atualizar e abrir a extensão, um pop-up será aberto com um botão de exibição.

popup.html exibição depois de selecionar o ícone Extensão

Etapa 2: atualizar popup.html para exibir a imagem na parte superior da guia do navegador

Depois de adicionar o botão, a próxima tarefa é fazer com que ele traga o images/stars.jpeg arquivo de imagem na parte superior da página da guia ativa.

Cada página de guia (e extensão) é executada em seu próprio thread. Crie um script de conteúdo que seja injetado na página de guias. Em seguida, envie uma mensagem do pop-up para esse script de conteúdo em execução na página de guias. O script de conteúdo receberá a mensagem, que descreve qual imagem deve ser exibida.

Etapa 3: criar o JavaScript pop-up para enviar uma mensagem

Crie o popup/popup.js arquivo e adicione o código para enviar uma mensagem ao script de conteúdo ainda não criado que você deve criar e injetar momentaneamente na guia do navegador. Para fazer isso, o código a seguir adiciona um onclick evento ao botão de exibição pop-up:

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
  sendMessageId.onclick = function() {
    // do something
  };
}

onclick No evento, localize a guia navegador atual. Em seguida, use a chrome.tabs.sendmessage API de Extensão para enviar uma mensagem para essa guia.

Nessa mensagem, você deve incluir a URL na imagem que deseja exibir. Certifique-se de enviar uma ID exclusiva para atribuir à imagem inserida.

Para enviar uma ID exclusiva para atribuir à imagem inserida, algumas abordagens diferentes são possíveis:

  • Abordagem 1: deixe a inserção de conteúdo JavaScript gerar essa ID de imagem. Não usaremos essa abordagem aqui, por razões que se tornam aparentes mais tarde.
  • Abordagem 2: gere essa ID exclusiva aqui no e, em popup.jsseguida, passe essa ID para o script de conteúdo ainda não criado. Usaremos essa abordagem.

O código a seguir descreve o código atualizado em popup/popup.js. Você também passa a ID da guia atual, que é usada posteriormente neste artigo:

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
    sendMessageId.onclick = function() {
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {
                    url: chrome.runtime.getURL("images/stars.jpeg"),
                    imageDivId: `${guidGenerator()}`,
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
            function guidGenerator() {
                const S4 = function () {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                };
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            }
        });
    };
}

Etapa 4: disponibilizá-lo stars.jpeg em qualquer guia do navegador

Para disponibilizar images/stars.jpeg em qualquer guia do navegador, você deve usar a chrome.runtime.getURL API.

Observação: se você estiver usando o Manifesto V2, em vez disso, use chrome.extension.getURL. Esse prefixo extra é retornado com getURL a imagem anexada e se parece com o seguinte: httpextension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg

O motivo é que você está injetando a imagem usando o src atributo do img elemento na página de conteúdo. A página de conteúdo está em execução em um thread exclusivo que não é o mesmo que o thread que executa a Extensão. Você deve expor o arquivo de imagem estático como um ativo Web para que ele funcione corretamente.

Adicione outra entrada no manifest.json arquivo para declarar que a imagem está disponível para todas as guias do navegador. Essa entrada é a seguinte (você deve vê-la no arquivo completo manifest.json abaixo ao adicionar a declaração de script de conteúdo que está chegando):

"web_accessible_resources": [
    {
      "resources": ["images/*.jpeg"],
      "matches": ["<all_urls>"]
    }
  ]

Você já escreveu o código em seu popup.js arquivo para enviar uma mensagem para a página de conteúdo inserida na página da guia ativa atual, mas você não criou e injetou essa página de conteúdo. Faça isso agora.

Etapa 5: atualizar seu manifest.json para novo conteúdo e acesso à Web

A atualização manifest.json que inclui o e web_accessible_resources é a content-scripts seguinte:

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["lib/jquery.min.js","content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

O matches atributo é definido como <all_urls>, o que significa que todos os arquivos em são injetados em content_scripts todas as páginas da guia do navegador quando cada guia é carregada. Os tipos de arquivos permitidos que podem ser injetados são JavaScript e CSS. Você também adicionou lib\jquery.min.js. Você pode incluir isso no download mencionado na parte superior da seção.

Adicionar jQuery

Nos scripts de conteúdo que você está injetando, planeje o uso de jQuery ($). Você adicionou uma versão minificada do jQuery e a colocou em seu pacote de extensão como lib\jquery.min.js. Esses scripts de conteúdo são executados em áreas restritas individuais, o que significa que o jQuery injetado na popup.js página não é compartilhado com o conteúdo.

Entendendo o Thread

Tenha em mente que, mesmo que a guia do navegador tenha JavaScript em execução na página da Web carregada, qualquer conteúdo injetado não terá acesso a esse JavaScript. O JavaScript injetado só tem acesso ao DOM real carregado nessa guia do navegador.

Etapa 6: Adicionar o ouvinte de mensagens de script de conteúdo

Aqui está o content-scripts\content.js arquivo que é injetado em cada página de guia do navegador com base em sua manifest.jsoncontent-scripts seção:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    $("body").prepend(
        `<img  src="${request.url}" id="${request.imageDivId}"
               class="slide-image" /> `
    );
    $("head").prepend(
        `<style>
          .slide-image {
              height: auto;
              width: 100vw;
          }
        </style>`
    );
    $(`#${request.imageDivId}`).click(function() {
        $(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
    });
    sendResponse({ fromcontent: "This message is from content.js" });
});

Observe que todo o JavaScript acima faz é registrar um listener usando o chrome.runtime.onMessage.addListener método de API de Extensão. Esse ouvinte aguarda mensagens como a que você enviou do popup.js descrito anteriormente com o método de API de chrome.tabs.sendMessage Extensão.

O primeiro parâmetro do addListener método é uma função cujo primeiro parâmetro, a solicitação, são os detalhes da mensagem que está sendo passada. Lembre-se, de popup.js, quando você usou o sendMessage método, esses atributos do primeiro parâmetro são url e imageDivId.

Quando um evento é processado pelo ouvinte, a função que é o primeiro parâmetro é executada. O primeiro parâmetro dessa função é um objeto que tem atributos conforme atribuído por sendMessage. Essa função simplesmente processa as três linhas de script jQuery.

  • A primeira linha de script acrescenta um img elemento logo abaixo da body guia do navegador que tem a slide-image classe atribuída, bem como a imageDivId ID desse elemento de imagem.

  • A segunda linha de script insere dinamicamente no cabeçalho DOM uma <seção de estilo> que você deve atribuir como uma slide-image classe ao seu img elemento.

  • A terceira linha de script adiciona um click evento que abrange toda a imagem, permitindo que o usuário selecione em qualquer lugar da imagem e essa imagem seja removida da página (juntamente com ela é ouvinte de eventos).

  1. Adicionar funcionalidade para remover a imagem exibida quando selecionado

Agora, quando você navega até qualquer página e seleciona o ícone Extensão , o menu pop-up é exibido da seguinte maneira:

popup.html exibição depois de selecionar o ícone Extensão

Ao selecionar o Display botão, você obtém o que está abaixo. Se você selecionar em qualquer lugar da imagem, esse stars.jpeg elemento de imagem será removido e as páginas da guia retornarão ao que foi exibido originalmente:

A imagem exibida no navegador

Parabéns! Você criou uma Extensão que envia com êxito uma mensagem do ícone de extensão pop-up e inseriu dinamicamente o JavaScript em execução como conteúdo na guia navegador. O conteúdo injetado define o elemento de imagem para exibir seu arquivo de estrelas .jpeg estáticas.