Formação
Módulo
Set up Microsoft Edge for learning and teaching - Training
Set up Microsoft Edge to support learning and teaching. Customize your browser using features like Favorites, Extensions and more so it supports security and productivity.
Este browser já não é suportado.
Atualize para o Microsoft Edge para tirar partido das mais recentes funcionalidades, atualizações de segurança e de suporte técnico.
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:
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.
Numa linha de comandos, introduza git
para marcar se o git está instalado.
Se ainda não tiver terminado, transfira o git e instale-o.
Se ainda não tiver terminado, inicie uma linha de comandos onde o git está instalado.
Mude para o diretório para o qual pretende clonar o repositório MicrosoftEdge-Extensions . Por exemplo:
cd C:/Users/localAccount/GitHub/
No Microsoft Edge, aceda ao repositório MicrosoftEdge-Extensions .
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
.
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.
Verifique a lista de diretórios:
ls
O /MicrosoftEdge-Extensions/
diretório está listado.
Mude para o novo diretório:
cd MicrosoftEdge-Extensions
Criar um ramo de trabalho:
git branch test
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".
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.
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:
Clique em Gerir extensões. A página Gestão de extensões é aberta num novo separador:
Ative o botão de alternar Modo de programador .
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 .
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
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:
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.
Atualize a página Web. Por vezes, isto é necessário depois de recarregar uma extensão.
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:
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:
Clique no botão da extensão junto à Barra de endereço. A janela de pop-up é fechada.
Veja também:
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.
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
/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./images/
diretório contém stars.jpeg
, que é apresentado no pop-up da extensã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.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"
}
}
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:
PNG
o formato, mas também pode utilizar BMP
formatos , GIF
ICO
ou JPEG
.
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"
}
}
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.
GitHub:
Formação
Módulo
Set up Microsoft Edge for learning and teaching - Training
Set up Microsoft Edge to support learning and teaching. Customize your browser using features like Favorites, Extensions and more so it supports security and productivity.
Documentação
Exemplo: Insertor de imagens com o script de conteúdo - Microsoft Edge Developer documentation
Utiliza JavaScript para inserir um ficheiro de imagem .jpeg dentro do elemento da página Web atual.
APIs suportadas para extensões do Microsoft Edge - Microsoft Edge Developer documentation
Lista de APIs suportadas a utilizar ao criar uma extensão do Microsoft Edge.
Formato de ficheiro de manifesto para extensões - Microsoft Edge Developer documentation
Saiba mais sobre o formato do ficheiro de manifesto num pacote de extensão.