Extensões entre navegadores são fáceis de escrever, graças à iniciativa WebExtension e às principais tecnologias da Web. Usando um formato comum, você pode escrever extensões que funcionam em qualquer lugar, sem a necessidade de direcionar navegadores específicos.
Descubra como codificar e testar sua primeira extensão para fazer alterações personalizadas em qualquer página da web.
O que são WebExtensões?
WebExtensions são extensões entre navegadores que usam APIs da web para aprimorar a funcionalidade padrão dos navegadores da web. As extensões são distribuídas como código-fonte e usam a pilha principal de tecnologia da web: HTML, CSS e JavaScript.
Embora as extensões já existam há quase 30 anos, os navegadores tradicionalmente usam abordagens diferentes para suportá-las. Isso significava que uma extensão do Chrome não era compatível com o navegador Firefox e vice-versa. Graças aos esforços de padronização – e à consolidação de muitos navegadores em torno do mecanismo Chromium – isso agora é um problema menor. Desde 2021, a iniciativa WebExtensions tem como objetivo formalizar o ecossistema. Em circunstâncias ideais, isso permite que os desenvolvedores escrevam uma extensão uma vez e a disponibilizem para todos os navegadores.
Continue lendo para descobrir como desenvolver extensões modernas para vários navegadores usando a plataforma web; é mais fácil do que você pensa!
Embora WebExtensions pretenda ser neutro em termos de navegador, o Firefox é o navegador mais fácil de desenvolvê-los, pois permite carregar uma extensão temporariamente. No outro extremo da escala, o Safari exige uma assinatura paga de desenvolvedor.
Escrevendo um arquivo de manifesto
A única coisa que toda extensão precisa é de um arquivo de manifesto para descrever sua estrutura geral. Aqui está um exemplo:
{ "manifest_version": 3, "name": "my first extension", "version": "1.0", "icons": { "16": "app/images/icon16.png", "48": "app/images/icon48.png", "128": "app/images/icon128.png" }, "permissions": [ "webNavigation", "storage" ], } Este arquivo está no formato JSON, o que significa que você pode usar qualquer uma das muitas ferramentas disponíveis para editá-lo ou visualizá-lo.
Apenas três chaves são necessárias: name, versione manifest_version. O nome e as chaves de versão são específicos do seu aplicativo, e os valores reais não importam muito para este tutorial. O Chrome se recusará a carregar sua extensão se a versão for inválida, portanto, certifique-se de que sejam números inteiros separados por pontos de 1 a 4, como “0” ou “0.0.1”.
O manifest_version é um ponto delicado: embora outros navegadores possam suportar as versões 1 e 2, o Chrome se recusará a carregar uma extensão, a menos que use a versão 3. Usar esta versão cede um pouco de controle, mas se você quiser suporte ao Chrome, você terá que segui-lo.
Além disso, um arquivo manifesto pode usar muitas outras chaves para descrever a natureza da sua extensão. Estes incluem author, descriptione iconsque podem ser úteis para anunciar sua extensão em uma loja. O commands tecla permite definir atalhos de teclado.
Uma das chaves de manifesto mais úteis é content_scriptsque permite que sua extensão carregue arquivos JavaScript ou CSS e os aplique a uma página da web:
"content_scripts": [{ "matches": ["https://en.wikipedia.org/wiki/*"], "js": ["script.js"], "css": ["style.css"] }] Cada objeto em content_scripts deve conter um matches key, que define os URLs em que sua extensão é executada. O js e css As teclas permitem listar scripts ou folhas de estilo que a extensão deve carregar quando você visualiza uma página correspondente.
Escrevendo seu código de extensão
Este exemplo simples imitará o Tampermonkey, uma extensão popular que permite personalizar páginas da web. Usando o Tampermonkey, você pode fazer coisas como consertar o feed do Reddit para evitar a visualização “Melhor”.
Com um arquivo de manifesto e um pouco de JavaScript, você pode escrever facilmente uma extensão web simples. Este exemplo alterará sua visão das páginas da Wikipedia, mas o mundo realmente é sua ostra aqui; tudo o que você pode fazer com uma página da web está disponível.
{ "manifest_version": 3, "name": "tweakipedia", "description": "Tweak Wikipedia pages to our liking", "version": "1.0", "content_scripts": [{ "matches": ["https://en.wikipedia.org/wiki/*"], "js": ["tweakipedia.js"], "css": ["tweakipedia.css"] }] } Começarei de forma simples, com um pouco de CSS para alterar algumas coisas de acordo com minha preferência pessoal. Por um lado, não gosto do aviso “são necessárias mais citações”; como leitor casual, apenas adiciona ruído. Então vou esconder isso identificando a classe do elemento e definindo seu display para none:
.box-More_citations_needed { display: none; } Se você não se sente caridoso, também pode ocultar o aviso de arrecadação de fundos:
.cn-fundraising { display: none; } A seguir, acho os marcadores de notas de rodapé um pouco perturbadores, então vou diminuí-los um pouco, modificando sua cor:
sup a { color: rgb(51, 102, 204, 0.5); } Observe que esta é a cor padrão com um canal alfa de 50%, o que significa que é semitransparente. Isso ajuda a diminuir o peso dessas marcas.
Levando esse conceito um passo adiante, gostaria de ocultar (ou modificar) outros elementos, mas apenas sob demanda e com uma forma de desfazer facilmente a alteração. Isso requer um pouco de JavaScript – mas só um pouquinho!
toggle_on_key("Escape", "sup a,.mw-editsection,.vector-page-toolbar"); function toggle_on_key(key, sels) { document.addEventListener("keydown", function (ev) { if (ev.key === key) { document.querySelectorAll(sels).forEach(function (node) { node.style.display = node.style.display === "none" ? "" : "none"; }); } }); } Eu criei uma função de conveniência para ocultar/revelar determinados elementos quando uma determinada tecla é pressionada. O manipulador de eventos simplesmente procura uma chave correspondente, depois encontra todos os elementos que correspondem a um seletor e os oculta ou revela dependendo de sua visibilidade atual. Isso usa exatamente a mesma propriedade CSS (display) da folha de estilos; ele apenas usa JavaScript para aplicá-lo dinamicamente.
Instalando e usando sua extensão
Com tudo pronto, é hora de instalar sua extensão e testá-la.
No Firefox, vá para about:debugging, selecione “Este Firefox” no menu esquerdo e clique no botão “Carregar complemento temporário”. Selecione qualquer um dos seus arquivos (seu manifesto ou qualquer arquivo de script) e abra-o.
No Chrome, vá para chrome://extensions/, ative o modo de desenvolvedor usando o botão de alternância no canto superior direito e clique no botão “Carregar descompactado” no canto superior esquerdo. Selecione o diretório que contém os arquivos da sua extensão.
Você deverá conseguir ver a extensão funcionando em qualquer página da Wikipedia. Deve mudar a aparência de uma página a partir disto:
Quando a extensão estiver instalada e habilitada, a página da Wikipédia deverá ter a seguinte aparência, com a notificação em destaque oculta e os links das notas de rodapé em uma cor mais clara: