Criar um tutorial de extensão, parte 1

  • Artigo

O objetivo deste tutorial é criar uma extensão do Microsoft Edge, começando com um diretório vazio. Você está construindo uma extensão que aparece na imagem da NASA do dia. Neste tutorial, você aprenderá a criar uma extensão por:

  • Criando um manifest.json arquivo.
  • Adicionando ícones.
  • Abrindo uma caixa de diálogo pop-up padrão.

Antes de começar

Para testar a extensão concluída que você está criando neste tutorial, baixe o código-fonte do microsoftEdge-Extensions repo > extension-getting-started-part1. O código-fonte foi atualizado do Manifesto V2 para o Manifesto V3.

Etapa 1: Criar um arquivo manifest.json

Cada pacote de extensão deve ter um manifest.json arquivo na raiz. O manifesto fornece detalhes de sua extensão, a versão do pacote de extensão, o nome e a descrição da extensão e assim por diante.

O código a seguir descreve as informações básicas necessárias em seu manifest.json arquivo:

{
    "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."
}

Etapa 2: Adicionar ícones

Comece criando o icons diretório em seu projeto para armazenar os arquivos de imagem de ícone. Os ícones são usados para a imagem em segundo plano do botão selecionado pelos usuários para iniciar a extensão.

Ícone na barra de ferramentas para abrir sua extensão

Para ícones:

  • Recomendamos usar PNG o formato, mas você também pode usar BMP, GIFou JPEGICO formatos.
  • Recomendamos usar imagens que são 128 x 128 px, que são redimensionadas pelo navegador, se necessário.

Os diretórios do projeto devem ser semelhantes à seguinte estrutura:

└── part1
    ├── manifest.json
    └── icons
        ├── nasapod16x16.png
        ├── nasapod32x32.png
        ├── nasapod48x48.png
        └── nasapod128x128.png

Em seguida, adicione os ícones ao manifest.json arquivo. Atualize seu manifest.json arquivo com as informações de ícones para que ele corresponda ao código a seguir. Os png arquivos listados no código a seguir estão disponíveis no arquivo de download mencionado anteriormente neste artigo.

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

Etapa 3: Abrir uma caixa de diálogo pop-up padrão

Agora, crie um HTML arquivo para ser executado quando o usuário iniciar sua extensão. Crie o arquivo HTML nomeado popup.html em um diretório chamado popup. Quando os usuários selecionam o ícone para iniciar a extensão, popup/popup.html é exibido como uma caixa de diálogo modal.

Adicione o código da listagem a seguir para popup.html exibir a imagem das estrelas:

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>NASA picture of the day</title>
    </head>
    <body>
        <div>
            <img src="/images/stars.jpeg" alt="Display the stars image" />
        </div>
    </body>
</html>

Verifique se você adiciona o arquivo images/stars.jpeg de imagem à pasta imagens. Os diretórios do projeto devem ser semelhantes à seguinte estrutura:

└── part1
    ├── manifest.json
    ├── icons
    │   ├── nasapod16x16.png
    │   ├── nasapod32x32.png
    │   ├── nasapod48x48.png
    │   └── nasapod128x128.png
    ├── images
    │   └── stars.jpeg
    └── popup
        └── popup.html

Por fim, registre o pop-up em manifest.json em browser_action (no Manifesto V2) ou em action (no Manifesto V3), conforme mostrado no seguinte código:

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

Próximas etapas

Isso é tudo o que você precisa para desenvolver uma extensão de trabalho. Agora, continue a sideload e teste sua extensão. Para obter mais informações, consulte Sideload uma extensão.