Mods—Modificações? Se você gosta de jogos, sabe que não há nada como jogar um jogo modificado. É o seu jogo favorito, mas com poder, recursos e diversão extras. Agora, imagine trazer a mesma emoção à sua experiência de navegação na web. Isso é exatamente o que as extensões do navegador fazem: elas são como mods para o seu navegador, potencializando-o de maneiras que você nunca imaginou serem possíveis.

Com uma extensão do Chrome, você pode ajustar seu navegador para atender perfeitamente às suas necessidades, seja bloqueando URLs específicos, adicionando novos recursos ou até mesmo dando-lhe uma aparência completamente nova. E a melhor parte? Você mesmo pode construir essas extensões. Neste guia, orientarei você no processo passo a passo de criação de sua própria extensão do Chrome.

Começar a usar extensões da web é mais fácil do que você pensa! Se você conhece JavaScript, é muito fácil – apenas uma questão de aprender uma nova API. Afinal, ainda é JavaScript em sua essência.

Este artigo é um complemento para: Manual de extensões do Chrome: memória pesada para produção pronta

Índice

• Extensões da Web 101
• Detalhando o Manifesto:
• Construindo um downloader de imagens simples
• A função de download:
• Estamos prontos para testar nossa extensão
• Carregando a extensão
• Conclusão

Extensões da Web 101

As extensões da Web são como mods, mas para navegadores. Você pode personalizar completamente o comportamento do navegador – pense no AdBlock – ou sua aparência, como os temas do Mozilla.

Para começar, crie uma nova pasta!

Tudo que você precisa é de um manifest.json. É a função principal, mas para extensões da web. É o primeiro arquivo que o navegador procura!

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": [""],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

O manifesto contém todos os metadados da sua extensão. É como os navegadores entendem sua extensão e o que ela pode fazer.

Dividindo o Manifesto:

• "versão_manifesto": 3, Isso informa ao navegador a versão da API que você usará. Sendo a versão 2 a anterior, a versão 3 (V3) é a API mais recente. É mais seguro e com melhor desempenho, e a maioria dos navegadores, incluindo o Chrome, migrou apenas para a versão 3.

Uma diferença importante é a mudança de scripts de segundo plano persistentes para service workers. Os scripts em segundo plano na V2 eram executados durante toda a vida útil de uma extensão (enquanto o usuário estava navegando), daí o aspecto “persistente”. Na V3, eles só são executados quando necessário!

• Scripts de conteúdo: Os scripts de conteúdo são injetados na própria página da web. Em nossa pequena extensão, content.js será injetado em qualquer URL que corresponda a "matches": [""]. Portanto, quando você navegar para qualquer URL ou abrir uma nova guia, content.js será injetado na página e executado.

Os scripts de conteúdo, diferentemente dos scripts de segundo plano, têm acesso ao DOM.

Esta é a anatomia básica de um plugin simples. À medida que você cria mais projetos de extensão, você aprenderá sobre permissões e funcionalidades adicionais. Para uma introdução, esta análise simples é suficiente.

Construindo um downloader de imagens simples

Preparar?

Esta extensão é inspirada em um curso de visão computacional que fiz há algum tempo. Fomos obrigados a implementar uma ferramenta para baixar imagens da pesquisa do Google.

Observação: não sugiro ter esta extensão em execução o tempo todo, a menos que você queira baixar imagens sempre que navegar.

Na mesma pasta do seu manifest.json, crie content.js e cole o seguinte:

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count  }.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

Lembre-se, um script de conteúdo é injetado em uma página da web. Por exemplo, quando você navega para example.com, processAllImages será executado.

Tudo o que ele faz é pegar todos os elementos da imagem e passá-los para uma função de download:

const images = document.querySelectorAll('img');

A função de download:

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

Nota: isso só funcionará para imagens estáticas. Imagens dinâmicas e de carregamento lento podem estar corrompidas – isso é algo que você pode resolver em iterações futuras.

Estamos prontos para testar nossa extensão

Estou usando o Brave, que é baseado no Chrome, mas o processo é semelhante em todos os navegadores.

Para testar, você precisa ativar o modo de desenvolvedor no navegador escolhido.

Carregando a extensão

Esta extensão, inalterada, também deve funcionar no Mozilla, já que não dependemos do namespace do Chrome.

Corajoso:

              Digite brave://extensions/ na barra de endereço.        

              Ative o modo de desenvolvedor.      

              Carregue a extensão selecionando a pasta.
             

   Chrome e Edge: siga etapas semelhantes às do Brave.

         (chrome://extensions/ ou edge://extensions/)

Conclusão

Mods — Modificações são divertidas! Esta extensão pode ser simples, mas mostra os fundamentos para você começar. O MDN da Mozilla tem um recurso perfeito para aprofundar seu conhecimento sobre extensões da web (tanto extensões da web gerais quanto específicas do navegador).

Lembre-se: desative a extensão ou desinstale-a quando terminar para evitar downloads indesejados.

Ou melhor ainda…

Um desafio: descobrir uma maneira de receber informações (dica: clique, ícone e script de plano de fundo) e executar a função de imagens de processo somente quando o usuário clicar em um botão.