Exemplo: página Web de pop-up do visualizador de imagens

Este exemplo é uma extensão do browser, sem JavaScript, que apresenta a stars.jpeg imagem numa pequena página Web num pop-up em qualquer separador do Microsoft Edge:

Clonar o repositório de MicrosoftEdge-Extensions

Pode utilizar várias ferramentas para clonar um repositório do GitHub. Pode transferir um diretório selecionado ou clonar todo o repositório.

Clone o repositório MicrosoftEdge-Extensions para a unidade local e, em seguida, mude para um ramo de trabalho, da seguinte forma.

linha de comandos do git bash

1. Numa linha de comandos, introduza git para marcar se o git está instalado.

2. Se ainda não tiver terminado, transfira o git e instale-o.

3. Se ainda não tiver terminado, inicie uma linha de comandos onde o git está instalado.

4. Mude para o diretório para o qual pretende clonar o repositório MicrosoftEdge-Extensions . Por exemplo:

   cd C:/Users/localAccount/GitHub/
   

5. No Microsoft Edge, aceda ao repositório MicrosoftEdge-Extensions .

6. Clique na seta para baixo no lado direito do botão verde Código e, em seguida, na secção Clonar com o URL da Web , clique no botão Copiar URL para a área de transferência junto a https://github.com/microsoft/MicrosoftEdge-Extensions.git.

7. Na janela da linha de comandos, introduza o comando:

   git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git
   

   O /MicrosoftEdge-Extensions/ diretório é adicionado no diretório que especificou.

Criar um ramo de trabalho e mudar para o mesmo

1. Verifique a lista de diretórios:

   ls
   

   O /MicrosoftEdge-Extensions/ diretório está listado.

2. Mude para o novo diretório:

   cd MicrosoftEdge-Extensions
   

3. Criar um ramo de trabalho:

   git branch test
   

4. Mude para o ramo de trabalho:

   git switch test
   

   Devolve: Switched to branch 'test'

Agora, pode modificar o código no ramo de trabalho, sem alterar o código que está no ramo "main" do repositório. Mais tarde, poderá querer mudar para o ramo "main" ou criar um ramo diferente com base no ramo "main".

GitHub Desktop

1. Se ainda não tiver terminado, instale o Ambiente de Trabalho do GitHub: aceda a https://github.com/apps/desktope, em seguida, clique no botão Transferir agora .

2. Aceda ao repositório MicrosoftEdge-Extensions .

3. Clique no botão Código e, em seguida, selecione Abrir com o GitHub Desktop.

   É aberta uma caixa de diálogo a indicar que este site está a tentar abrir GitHubDesktop.exe.

4. Clique no botão Abrir .

   O GitHub Desktop é aberto, com o repositório MicrosoftEdge-Extensions selecionado na lista pendente superior esquerda.

   Em alternativa, no GitHub Desktop, é aberta a caixa de diálogo Clonar um repositório :

   

5. Especifique o caminho da unidade local no qual colocar o diretório de repositório clonado; por exemplo: C:\Users\accountname\GitHub\.

6. Clique no botão Clonar .

Criar um ramo de trabalho e mudar para o mesmo

1. No GitHub Desktop, certifique-se de que, no canto superior esquerdo do ambiente de trabalho do GitHub, o Repositório atual é MicrosoftEdge-Extensions.

   Na lista pendente Ramo atual, diz main.

2. Na lista pendente Ramo atual , clique no separador Ramos e, em seguida, clique no botão Novo ramo .

   É aberta a caixa de diálogo Criar um ramo .

3. Na caixa de texto Nome , introduza um nome de ramo, como teste, e, em seguida, clique no botão Criar ramo .

   No meio superior e inferior esquerdo do GitHub Desktop, é apresentado o ramo atual, como o teste.

Agora, pode modificar o código no ramo de trabalho, sem alterar o código que está no ramo "main" do repositório. Mais tarde, poderá querer mudar para o ramo "main" ou criar um ramo diferente com base no ramo "main".

Instalar o exemplo localmente

Em vez de instalar o exemplo a partir da Loja, irá instalar o exemplo localmente, para que possa modificá-lo e testar rapidamente as alterações. Por vezes, instalar localmente chama-se sideloading de uma extensão.

1. No Microsoft Edge, clique no botão Extensões ( junto à Barra de endereço, se este ícone for apresentado. Em alternativa, selecione Definições e muito mais () >Extensões. O pop-up Extensions (Extensões ) é aberto:

   

2. Clique em Gerir extensões. A página Gestão de extensões é aberta num novo separador:

   

3. Ative o botão de alternar Modo de programador .

4. Ao instalar a extensão pela primeira vez, clique no botão Carregar desembalado (). É aberta a caixa de diálogo Selecionar o diretório de extensão .

5. Selecione o diretório que contém os ficheiros de origem da extensão, como manifest.json.

   Caminho de exemplo:

   C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

6. Clique no botão Selecionar Pasta .

   A caixa de diálogo Selecionar o diretório de extensão é fechada.

   A extensão é instalada no browser, semelhante a uma extensão instalada a partir do arquivo:

   

Executar o exemplo

1. Aceda a uma página Web, como a aplicação TODO, numa nova janela ou separador. Para este exemplo, este passo é opcional e é apenas para corresponder às capturas de ecrã; este exemplo não requer a abertura de uma página Web.

2. Atualize a página Web. Por vezes, isto é necessário depois de recarregar uma extensão.

3. No Microsoft Edge à direita da Barra de endereço, se este ícone for apresentado, clique no botão Extensões (). Em alternativa, selecione Definições e muito mais () >Extensões.

   O pop-up Extensions (Extensões ) é aberto:

   

4. Clique no ícone ou nome da extensão (página Web pop-up do visualizador de imagens).

   A extensão é aberta e o ícone da extensão é adicionado junto ao ícone Barra de endereço e Extensões (). A extensão apresenta popup.html, contendo stars.jpeg, num pop-up:

   

5. Clique no botão da extensão junto à Barra de endereço. A janela de pop-up é fechada.

Veja também:

• Fazer sideload de uma extensão para a instalar e testar localmente

Estudar a amostra

Nas secções seguintes, vai estudar o exemplo. Depois disso, para desenvolver a sua própria extensão do Microsoft Edge, pode copiar e modificar o diretório do exemplo e instalar e testar a extensão resultante.

Ficheiros e diretórios

O exemplo tem a seguinte estrutura de diretório:

Caminho de exemplo para o exemplo:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-viewer-popup-webpage

Diretórios e ficheiros no /picture-viewer-popup-webpage/ diretório:

/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
manifest.json

• O /icons/ diretório contém versões de um .png ficheiro que é utilizado para representar a extensão perto da Barra de endereço do browser.
• O /images/ diretório contém stars.jpeg, que é apresentado no pop-up da extensão.
• O /popup/ diretório contém popup.html, que define o conteúdo da página Web que é apresentado no pop-up da extensão.
• manifest.json contém informações básicas sobre a extensão.

O ficheiro de manifesto (manifest.json)

Cada pacote de extensão tem de ter um manifest.json ficheiro na raiz. O manifesto fornece detalhes sobre a extensão, a versão do pacote de extensão e o nome e descrição da extensão.

manifest.json contém as seguintes linhas:

{
  "name": "Picture viewer pop-up webpage",
  "version": "0.0.0.1",
  "manifest_version": 3,
  "description": "A browser extension that displays an image in a pop-up webpage.",
  "icons": {
      "16": "icons/extension-icon16x16.png",
      "32": "icons/extension-icon32x32.png",
      "48": "icons/extension-icon48x48.png",
      "128": "icons/extension-icon128x128.png"
  },
  "action": {
      "default_popup": "popup/popup.html"
  }
}

Ícones para iniciar a extensão

O /icons/ diretório contém os ficheiros de imagem do ícone. Os ícones são utilizados como a imagem de fundo do botão em que clica para iniciar a extensão:

Quando a extensão está em execução, é apresentado um dos ícones na barra de ferramentas, junto à Barra de endereço:

Para fechar a extensão, clique no ícone da extensão na barra de ferramentas ou clique no botão Extensões ().

Recomendações para ícones:

• Utilize PNG o formato, mas também pode utilizar BMPformatos , GIFICO ou JPEG .
• Se fornecer um único ficheiro de ícone, utilize 128 x 128 px, que podem ser redimensionados pelo browser, se necessário.

A caixa de diálogo de pop-up (popup.html)

popup.html no /popup/ diretório é executado quando inicia a extensão. Quando clica no ícone para iniciar a extensão, este ficheiro é apresentado como uma caixa de diálogo modal.

popup.html contém o seguinte código, para apresentar um título e a imagem de estrelas:

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Picture viewer pop-up webpage</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Stars" />
        </div>
    </body>
</html>

A página Web de pop-up (popup.html) está registada como em "default_popup"manifest.json, na action secção de teclas:

manifest.json (porção)

{
    "action": {
        "default_popup": "popup/popup.html"
    }
}

Próximas etapas

Para desenvolver a sua própria extensão do Microsoft Edge, pode copiar e modificar o diretório do exemplo e instalar e testar a extensão resultante.

Depois de executar e testar este exemplo de extensão, pode continuar para Exemplo: Insertor de imagens com o script de conteúdo, que insere dinamicamente JavaScript em execução como conteúdo no separador do browser.

Confira também

• Fazer sideload de uma extensão para a instalar e testar localmente
• Exemplo: Insertor de imagens com o script de conteúdo

GitHub:

• Repositório MicrosoftEdge-Extensions .
  • /picture-viewer-popup-webpage/ - código fonte deste exemplo.