Uma extensão que permite iniciar rapidamente os sites do Proton a partir de uma grade personalizável, com status de conexão e atalhos.
Primeiro de tudo, não sou afiliado à Proton AG. Mas se quiserem me contratar, é só ligar.
Esta extensão é um projeto independente, sem vínculos com a Proton AG ou seus produtos oficiais. Esta extensão é para acessar serviços Proton, apenas um pop-up com links para serviços Proton.
Observação: criei isso para ser usado como um modelo para qualquer pessoa criar uma extensão personalizada para acessar qualquer outro serviço web. Basta editar o config.json e colocar algumas imagens.
Por quê? Então, por que não! Mas não era só para salvar nos favoritos? Sim. No entanto, eu queria criá-lo.
Sim, coloquei capturas de tela do Brave Browser na Google Chrome Web Store ;-)
Instalação
Só para usar:
encontre na Chrome Web Store: https://chromewebstore.google.com/detail/proton-launcher-unofficia/ajniphjinhppblnkeolojgopecjlnecn
Para desenvolvedores:
Baixe ou clone este repositório: https://github.com/Esl1h/proton-launcher-extension
No seu Chrome/Brave, vá para chrome://extensions e habilite o modo desenvolvedor.
Clique em “Carregar descompactado” e selecione a pasta do projeto git.
project/
├── manifest.json # extension manifest file
│
├── background # service worker for events and integrations
│ └── background.js
│
├── config # configuration files
│ ├── apps.json
│ └── settings.json
│
├── popup # launcher interface
│ ├── popup.css
│ ├── popup.html
│ └── popup.js
│
├── assets
├── icons
│ ├── icon128.png
│ ├── icon16.png
│ └── icon48.png
└── proton-logo.svgEdite os arquivos em config/ para personalizar os aplicativos e preferências padrão. As configurações do usuário são salvas automaticamente.
Atalhos
Ctrl+Shift+L – Abra rapidamente o lançador
A arquitetura segue um padrão MVC simplificado, onde popup.html serve como interface visual, popup.js atua como controlador gerenciando lógica e estado de interação e background.js funciona como service worker para operações em segundo plano.
A estrutura de dados é minimalista: cada favorito é armazenado como um objeto, tudo mantido em uma matriz sob a chave de favoritos.
Manifest V3 define permissões (nenhuma neste meu caso!) e declara uma CSP (Política de Segurança de Conteúdo) restritiva, garantindo proteção contra XSS.
O manifest.json define permissões, ícones, scripts e o pop-up (popup.html + popup.js) exibido quando o usuário interage com o ícone de extensão. Resumindo: um manifest.json (modelo) obrigatório, o pop-up (CSS + HTML) e o núcleo — JavaScript simples (sem frameworks) que manipula o carregamento de links/ícones, validação de URL e renderização.
Há também um script em segundo plano (background.js) que funciona como um trabalhador persistente, mas executa uma inicialização limpa — a ideia é mantê-lo para uso futuro. A interface pop-up lê os aplicativos configurados (config/apps.json), os exibe em uma grade clicável e abre o link em uma nova aba (minha intenção era — ou é? — abrir o webapp/PWA).
aplicativos.json: Cada ícone tem um título, ícone, URL, posição e descrição. Optei por ocultar a descrição na exibição, mas a mantive no JSON.
configurações.json: Tamanho da grade, intervalo de atualização e um único tema chamado gradiente.
É isso. Não há muito a dizer sobre isso… foi um dos meus pequenos projetos de fim de semana.
Ele foi criado para ser simples, rápido, seguro e fácil… tanto para alterar quanto para usar como modelo inicial para criar algo maior.
Não está completo, a ideia (há um ícone de configuração na interface pop-up) seria uma página que você pode preencher com os links desejados (e opcionalmente um ícone se não quiser o favicon ou o padrão de alguma biblioteca de ícones js).
Packing (crx) e envio para Web Store
Ah, antes de terminar, para enviar a extensão para a Chrome Web Store, você precisa acessar o painel do desenvolvedor (custa US$ 5 para ativar) em https://chrome.google.com/webstore/devconsole/.
Crie um novo item, preencha todos os campos para requisitos, descrição e informações e carregue o arquivo .zip.
Para criar o arquivo .crx, vá diretamente ao navegador, abra o gerenciador de extensões e selecione a opção “pack extension” (após ativar o modo de desenvolvedor, é claro).