Como escrever e criar uma extensão básica do Chrome

Cum se scrie și se creează o extensie Chrome de bază
⏱️ 4 min read

O Chrome é facilmente o navegador da web mais popular do planeta. De acordo com a pesquisa de participação de mercado de navegadores de desktop da Statcounter, o Chrome leva para casa um colossais 65% do mercado em navegadores de desktop no final de 2017.

Com esse tipo de poder de definição de mercado, projetar para o Chrome se tornou uma prioridade. O mesmo vale para extensões: o Chrome oferece a maior base de usuários para extensões de longe, com dezenas de milhares de extensões, temas e aplicativos preenchendo a Chrome Web Store.

Se você quiser lucrar com a tendência, pode construir sua própria extensão básica do Chrome. Você só precisará de algumas habilidades básicas de desenvolvimento web (HTML, CSS e Javascript), bem como uma colher de chá de JSON para juntar tudo isso.

Estaremos revisando a estrutura mais básica necessária para construir uma extensão básica do Chrome nesta postagem. Para obter uma visão aprofundada das possibilidades disponíveis, verifique Guia de extensão do desenvolvedor do Chrome.

Como Corrigir O Erro “Este Acess...
Como Corrigir O Erro “Este Acessório Pode Não Ser Compatível” No IPhone

Escrevendo uma extensão básica do Chrome: destino do manifesto

Para este tutorial, construiremos uma extensão básica do Chrome que exibe uma mensagem pop-up simples quando clicada. Precisaremos de alguns arquivos importantes: um ícone (“icon.png”), um arquivo HTML (“popup.html”) e o manifesto muito importante (“manifest.json”). Todos esses arquivos ficarão dentro de um diretório com o nome de sua extensão. Neste caso, é denominado “Hello World”.

Uma extensão do Chrome é definida por seu manifesto. Este snippet de JSON mostra ao Chrome como interpretar a extensão, quais arquivos carregar e como interagir com o usuário.

O arquivo de manifesto de nossa extensão básica tem a seguinte aparência:

Este arquivo de manifesto colocará um ícone na barra de ferramentas do usuário que, ao ser clicado, carrega o conteúdo do arquivo denominado “popup.html”. O seguinte é o essencial no resto do conteúdo:

  • manifest_version informa ao Chrome com qual versão da marcação de manifesto você está trabalhando. Para extensões modernas, você precisará definir isso para 2.
  • name exibe o nome que a extensão mostrará na Chrome Store e “chrome: // extensions”.
  • description mostra o texto descritivo exibido em “chrome: // extensions.”
  • browser action carrega o ícone na barra de ferramentas. Também permite que a extensão responda à entrada do usuário exibindo uma dica de ferramenta, pop-up ou emblema. Confira um lista completa de tudo o que “browser_action” pode fazer.
  • default_icon mostra o caminho para o ícone do diretório da extensão.
  • default_popup mostra o caminho para o arquivo que será carregado quando o ícone da extensão for clicado.
  • permissions limita a região funcional da extensão. activeTab é o mais comum, permitindo que o ramal acesse a guia mais frontal. O Google fornece uma lista de todas as permissões que uma extensão pode solicitar.

Se você quiser se aprofundar em tudo que o manifesto de uma extensão do Chrome pode declarar, confira Documentos do Google sobre manifestos de extensão.

Escrevendo uma extensão básica do Chrome: pop-ups

Agora que escrevemos nosso manifesto, podemos descobrir o que nossa extensão exibirá. Isso depende do nosso arquivo “popup.html”, que será exibido quando a extensão for carregada. Aqui está o que usaremos para este projeto:

Como você pode ver, isso renderizará algum texto estilizado com CSS. Se você deseja adicionar Javascript ou CSS externo à sua extensão, isso requer a declaração dos scripts no manifesto, sob o content_scripts chave. Depois de ter isso referenciado no manifesto, você pode carregar esses scripts como faria normalmente.

Escrevendo uma extensão básica do Chrome: Carregando no Chrome

Depois de escrever o código básico para nossa extensão e encontrar um ícone adequado, podemos carregá-lo no Chrome.

1. Navegue até “chrome: // extensions” e ative o “Modo de desenvolvedor” marcando a caixa de seleção no canto superior direito.

build-a-chrome-extension-load-extension-1

2. Clique no botão “Carregar extensão descompactada…” e selecione o diretório da extensão.

build-a-chrome-extension-load-extension-2

3. Assim que a extensão for carregada, você verá seu ícone na barra de menu.

build-a-chrome-extension-load-extension-3

4. Clique na extensão para ver seu efeito (muito simples).

build-a-chrome-extension-load-extension-4

Conclusão: Expandindo sua extensão do Chrome

Assim que terminar de usar sua extensão e estiver pronto para publicar, você precisará criar uma conta de desenvolvedor Chrome. Esse não é um processo exatamente simples, mas o Google oferece complete as instruções para publicar sua extensão do Chrome aqui.

Obviamente, há muito mais que você pode fazer com sua extensão do Chrome, mas isso está um pouco além do escopo deste post. Se você quiser saber mais sobre tudo o que as extensões do Chrome podem fazer, consulte o Guia de extensão do desenvolvedor do Chrome.

Join our Newsletter and receive offers and updates! ✅

0 0 votes
Article Rating
Avatar of Routech

Routech

Routech is a website that provides technology news, reviews and tips. It covers a wide range of topics including smartphones, laptops, tablets, gaming, gadgets, software, internet and more. The website is updated daily with new articles and videos, and also has a forum where users can discuss technology-related topics.

Você pode gostar...

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x