11 KiB

Raw Permalink Blame History

Projeto de Extensão de Navegador Parte 1: Tudo sobre Navegadores

Esboço por Wassim Chegham

Questionário Pré-Aula

Introdução

Extensões de navegador adicionam funcionalidades extras a um navegador. Mas antes de criar uma, é importante aprender um pouco sobre como os navegadores funcionam.

Sobre o navegador

Nesta série de lições, vais aprender a criar uma extensão de navegador que funcionará nos navegadores Chrome, Firefox e Edge. Nesta parte, vais descobrir como os navegadores funcionam e estruturar os elementos da extensão de navegador.

Mas o que é exatamente um navegador? É uma aplicação de software que permite a um utilizador final aceder a conteúdos de um servidor e exibi-los em páginas web.

✅ Um pouco de história: o primeiro navegador chamava-se 'WorldWideWeb' e foi criado por Sir Timothy Berners-Lee em 1990.

Alguns navegadores antigos, via Karen McGrane

Quando um utilizador se conecta à internet usando um endereço URL (Uniform Resource Locator), geralmente através do protocolo Hypertext Transfer Protocol com um endereço http ou https, o navegador comunica-se com um servidor web e obtém uma página web.

Neste ponto, o motor de renderização do navegador exibe a página no dispositivo do utilizador, que pode ser um telemóvel, computador de secretária ou portátil.

Os navegadores também têm a capacidade de armazenar conteúdo em cache para que não seja necessário recuperá-lo do servidor sempre. Podem registar o histórico de navegação de um utilizador, armazenar 'cookies', que são pequenos pedaços de dados que contêm informações usadas para guardar a atividade do utilizador, entre outras funcionalidades.

Algo muito importante a lembrar sobre os navegadores é que eles não são todos iguais! Cada navegador tem os seus pontos fortes e fracos, e um programador web profissional precisa de entender como fazer com que as páginas web funcionem bem em diferentes navegadores. Isso inclui lidar com ecrãs pequenos, como os de telemóveis, bem como com utilizadores que estão offline.

Um site muito útil que deves marcar como favorito no navegador que preferires usar é o caniuse.com. Quando estiveres a criar páginas web, é muito útil usar as listas de tecnologias suportadas do caniuse para melhor atender os teus utilizadores.

✅ Como podes saber quais navegadores são mais populares entre os utilizadores do teu site? Verifica as tuas análises - podes instalar vários pacotes de análise como parte do teu processo de desenvolvimento web, e eles dir-te-ão quais navegadores são mais usados pelos utilizadores.

Extensões de navegador

Por que motivo quererias criar uma extensão de navegador? É algo prático para anexar ao teu navegador quando precisas de acesso rápido a tarefas que costumas repetir. Por exemplo, se precisas frequentemente de verificar cores nas várias páginas web que visitas, podes instalar uma extensão de navegador para selecionar cores. Se tens dificuldade em lembrar-te de palavras-passe, podes usar uma extensão de navegador para gestão de palavras-passe.

As extensões de navegador também são divertidas de desenvolver. Geralmente, gerem um número limitado de tarefas que executam bem.

✅ Quais são as tuas extensões de navegador favoritas? Que tarefas realizam?

Instalar extensões

Antes de começares a criar, dá uma olhada no processo de construção e implementação de uma extensão de navegador. Embora cada navegador varie um pouco na forma como gerem esta tarefa, o processo é semelhante no Chrome e Firefox a este exemplo no Edge:

Nota: Certifica-te de que ativaste o modo de programador e permitiste extensões de outras lojas.

Essencialmente, o processo será:

cria a tua extensão usando npm run build
navega no navegador até ao painel de extensões usando o botão "Definições e mais" (o ícone ...) no canto superior direito
se for uma nova instalação, escolhe load unpacked para carregar uma nova extensão a partir da sua pasta de construção (no nosso caso é /dist)
ou, clica em reload se estiveres a recarregar uma extensão já instalada

✅ Estas instruções referem-se a extensões que crias tu mesmo; para instalar extensões que foram lançadas na loja de extensões do navegador associado a cada navegador, deves navegar até essas lojas e instalar a extensão da tua escolha.

Começa agora

Vais criar uma extensão de navegador que exibe a pegada de carbono da tua região, mostrando o consumo de energia da tua região e a fonte dessa energia. A extensão terá um formulário que recolhe uma chave de API para que possas aceder à API do CO2 Signal.

Vais precisar de:

uma chave de API; insere o teu email na caixa desta página e será enviada uma para ti
o código da tua região correspondente ao Electricity Map (em Boston, por exemplo, uso 'US-NEISO').
o código inicial. Faz o download da pasta start; vais completar o código nesta pasta.
NPM - NPM é uma ferramenta de gestão de pacotes; instala-a localmente e os pacotes listados no teu ficheiro package.json serão instalados para uso nos teus recursos web

✅ Aprende mais sobre gestão de pacotes neste excelente módulo do Learn

Tira um momento para explorar a base de código:

✅ Assim que tiveres a tua chave de API e o código da região prontos, guarda-os numa nota para uso futuro.

Cria o HTML para a extensão

Esta extensão tem duas vistas. Uma para recolher a chave de API e o código da região:

E a segunda para exibir o consumo de carbono da região:

Vamos começar por criar o HTML para o formulário e estilizar com CSS.

Na pasta /dist, vais criar um formulário e uma área de resultados. No ficheiro index.html, preenche a área do formulário delineada:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

Este é o formulário onde as tuas informações guardadas serão inseridas e armazenadas no armazenamento local.

Em seguida, cria a área de resultados; abaixo da última tag do formulário, adiciona algumas divs:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

Neste ponto, podes tentar uma construção. Certifica-te de instalar as dependências do pacote desta extensão:

npm install

Este comando usará o npm, o Node Package Manager, para instalar o webpack para o processo de construção da tua extensão. O webpack é um empacotador que lida com a compilação do código. Podes ver o resultado deste processo olhando para /dist/main.js - verás que o código foi empacotado.

Por agora, a extensão deve ser construída e, se a implementares no Edge como uma extensão, verás um formulário exibido de forma organizada.

Parabéns, deste os primeiros passos para criar uma extensão de navegador. Nas próximas lições, vais torná-la mais funcional e útil.

🚀 Desafio

Dá uma olhada numa loja de extensões de navegador e instala uma no teu navegador. Podes examinar os seus ficheiros de formas interessantes. O que descobres?

Questionário Pós-Aula

Questionário pós-aula

Revisão e Autoestudo

Nesta lição aprendeste um pouco sobre a história do navegador web; aproveita esta oportunidade para aprender sobre como os inventores da World Wide Web imaginaram o seu uso, lendo mais sobre a sua história. Alguns sites úteis incluem:

A História dos Navegadores Web

História da Web

Uma entrevista com Tim Berners-Lee

Tarefa

Redefine o estilo da tua extensão

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, é importante ter em conta que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autoritária. Para informações críticas, recomenda-se a tradução profissional realizada por humanos. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes da utilização desta tradução.

11 KiB Raw Permalink Blame History