You are currently viewing Como Criar uma Extensรฃo do Chrome

Como Criar uma Extensรฃo do Chrome

Vocรช jรก ficou preso em uma tarefa repetitiva e quis muito poder automatizar seu processo?ย 

Vocรช estรก cansado de perder seu tempo procurando a extensรฃo certa, sempre encontrando uma pรกgina de resultados vazia?ย 

Felizmente, se vocรช รฉ usuรกrio do Chrome, vocรช pode criar uma extensรฃo do navegador em apenas oito passos simples.

Como a gente sabe disso? Criamos nossa prรณpria extensรฃo do Chrome para a Ubersuggest para deixar nossos sistemas de pesquisa de palavras-chave mais afiados.

Nesse post, vamos te mostrar como criar uma extensรฃo do Chrome para te ajudar a inovar nas suas tarefas e voltar para o seu trabalho produtivo.ย 

O que รฉ uma extensรฃo do Chrome?

Extensรตes do Google Chrome sรฃo programas que vocรช pode instalar no seu navegador Chrome para mudar algumas funcionalidades.ย 

Essas extensรตes podem te ajudar a automatizar algumas funรงรตes do seu navegador, modificar comportamentos existentes e melhorar a conveniรชncia do seu software. Existem atรฉ mesmo extensรตes do Chrome que podem melhorar seu SEO.

Extensรตes do Chrome sรฃo desenvolvidas com scripts HTML, JavaScript e CSS e sรฃo basicamente pequenos sites cujo upload รฉ feito para a loja do Chrome.

A รบnica diferenรงa entre uma extensรฃo do Chrome e um site normal รฉ que as extensรตes contรชm um arquivo manifest, que dรก a elas uma funรงรฃo especรญfica para executar.

Outra forma de enxergar as extensรตes รฉ como um cรณdigo que muda a sua experiรชncia no navegador.

Por exemplo, a extensรฃo do Grammarly te permite editar e modificar seu texto conforme vocรช o escreve. A extensรฃo do LastPass te permite manter seu gerenciador de senhas dentro do seu navegador.ย 

Aqui estรฃo as nossas 13 extensรตes preferidas do Google Chrome para vocรช dar uma olhada.

O Que as Extensรตes do Chromes Podem Fazer?

Uma extensรฃo personalizada pode realizar uma รบnica tarefa. Essa tarefa deve ser definida de forma restrita e fรกcil de entender para funcionar de forma adequada.ย 

Vocรช pode incluir mais de um componente ou funcionalidade, desde que todos direcionem a extensรฃo para um objetivo รบnico.

Extensรตes do Chrome funcionam atravรฉs de aรงรตes da pรกgina ou aรงรตes do navegador.ย 

Uma aรงรฃo da pรกgina รฉ uma aรงรฃo especรญfica para determinadas pรกginas.

Uma aรงรฃo do navegador รฉ relevante independente de onde vocรช estiver nele.ย 

Da mesma maneira, suas interfaces de usuรกrio precisam ser otimizadas e simples. Isso pode variar de um รญcone รบnico, como o do Gmail, ou vocรช pode substituir uma pรกgina inteira para a sua interface.

Seu produto final vai ser um pacote .crx zipado que os usuรกrios vรฃo baixar e instalar.ย 

Por Que eu Deveria Criar Uma Extensรฃo do Chrome?

O Google Chrome รฉ o navegador mais usado do mundo. De acordo com o W3Counter, o Chrome tem uma fatia de mercado de 65,3%.

Vocรช tambรฉm deveria criar uma extensรฃo do Chrome se vocรช quer incluir uma aรงรฃo simples na sua experiรชncia de navegaรงรฃo.

A vantagem das extensรตes do Chrome em relaรงรฃo a aplicaรงรตes comuns รฉ que elas costumam ser mais fรกceis de se desenvolver e manter. Uma vez que as extensรตes do Chrome sรฃo construรญdas em torno de uma รบnica funรงรฃo, sua criaรงรฃo demanda menos tempo e habilidade.

Criar uma extensรฃo costuma levar bem menos tempo do que uma pรกgina web do zero.ย 

Se vocรช quer um jeito simples e eficiente de modificar seu navegador, criar uma extensรฃo รฉ o melhor caminho.ย 

Extensรตes do Chrome tambรฉm podem melhorar seu trรกfego web, como vocรช pode ver no vรญdeo abaixo.

Quais Sรฃo as Caracterรญsticas de Uma Extensรฃo do Chrome de Sucesso?

Uma Extensรฃo do Chrome de sucesso vai simplificar uma tarefa ou funcionalidade e aumentar sua produtividade.ย 

Vamos imaginar que vocรช crie sites de e-commerce e estรก pesquisando lojas concorrentes. Se vocรช instalar a extensรฃo Koala Inspector, vocรช vai conseguir ver se o Shopify criou algum dos sites em que vocรช entrou. Vocรช tambรฉm pode ver qual tema foi usado, se foi feita alguma atualizaรงรฃo e as estatรญsticas dos produtos.

Outro exemplo, o Eliminador de Feed de Notรญcias para Facebook, pode te ajudar a melhorar sua produtividade bloqueando seu feed de notรญcias para vocรช se concentrar nas suas tarefas. ร‰ uma funรงรฃo simples, porรฉm eficaz, que pode te ajudar a melhorar seu fluxo de trabalho diรกrio.ย 

Ambas as extensรตes executam uma funcionalidade simples que melhoram a experiรชncia do usuรกrio. Quando vocรช estiver desenvolvendo a sua extensรฃo do Chrome, tenha em mente a simplicidade. Esse รฉ o segredo para uma extensรฃo de sucesso.

Seu Guia Passo-a-Passo Para Criar uma Extensรฃo do Chrome

Chegou a hora de criar sua extensรฃo do Chrome.

ร‰ importante lembrar que vocรช precisa fazer isso no Google Chrome. Pode parecer รณbvio, mas nem todo mundo usa o Chrome como navegador padrรฃo.

Se vocรช nรฃo รฉ um usuรกrio regular do Chrome, nรฃo se esqueรงa de instalรก-lo antes de comeรงar essas etapas.ย 

Alรฉm disso, nรฃo deixe de conferir seu trabalho com frequรชncia conforme vocรช vai avanรงando no processo. ร‰ muito mais fรกcil corrigir erros de cรณdigo na hora do que depois de terminar.ย 

Criando uma Extensรฃo do Chrome Passo 1: Defina o Que a Sua Extensรฃo Precisa

O primeiro passo ao criar a sua extensรฃo do Chrome รฉ decidir por uma funcionalidade.

O que ela vai ser? Como ela vai ser?

Se vocรช quer criar uma extensรฃo para as suas campanhas do Google AdWords, essa รฉ a hora de decidir como ela vai funcionar.

Todas as extensรตes precisam de um รญcone para ser colocado na loja do Google Chrome. Vocรช vai precisar criar ou obter um รญcone antes de comeรงar.ย 

Quando vocรช souber o que a sua extensรฃo vai fazer e qual vocรช quer que seja sua aparรชncia, vocรช pode comeรงar a construรญ-la.ย 

Aqui embaixo, vamos te mostrar como criar uma extensรฃo que vai te permitir mudar a cor de fundo da sua pรกgina atual.ย 

Criando uma Extensรฃo do Chrome Passo 2: Crie um Diretรณrio Para a Sua Extensรฃo

Para comeรงar a criar a sua extensรฃo do Chrome, vocรช vai precisar criar um novo diretรณrio para hospedar todos os arquivos da sua extensรฃo.ย 

Isso รฉ importante porque, para o Chrome carregar seu plugin, ele precisa estar direcionado para uma pasta contendo os arquivos da sua extensรฃo.

Vocรช pode adicionar a esse diretรณrio todos os arquivos que vocรช vai precisar para sua extensรฃo.

Criando uma Extensรฃo do Chrome Passo 3: Crie o Arquivo Manifest da Sua Extensรฃo

A prรณxima etapa รฉ criar o arquivo manifest da sua extensรฃo.

Esse arquivo vai dizer ao Chrome como carregar a extensรฃo adequadamente.

Crie um arquivo chamado manifest.json e adicione-o ao seu diretรณrio.

Em seguida, adicione o cรณdigo necessรกrio ao seu arquivo manifest.ย 

Para o nosso objetivo aqui, o cรณdigo vai ser o seguinte:

โ€œnameโ€: โ€œGetting Started Exampleโ€,

โ€œdescriptionโ€: โ€œBuild an Extension!โ€,

โ€œversionโ€: โ€œ1.0โ€,

โ€œmanifest_versionโ€: 3

Criando uma Extensรฃo do Chrome Passo 4: Suba Sua Extensรฃo Para o Chrome e Confira se Hรก Erros

Agora รฉ hora de testar sua extensรฃo e ver se o Chrome vai rodรก-la.ย 

Siga os seguintes passos:

  1. Vรก em chrome://extensions no seu navegador Google Chrome
  2. Marque a caixa Modo de programador na parte superior direita
  3. Clique em โ€œCarregar Expandidaโ€ para abrir uma caixa de diรกlogo de seleรงรฃo de pastas
  4. Selecione o diretรณrio da sua extensรฃo
 Extensรฃo do Chrome

Se a sua extensรฃo for vรกlida, ela vai carregar imediatamente.

Se for invรกlida, vocรช vai ver uma mensagem de erro no topo da sua pรกgina. Se for esse o caso, procure por erros, corrija-os e tente carregar a extensรฃo de novo.

Os erros mais comuns que as pessoas cometem aqui sรฃo erros de sintaxe. Revise todas as suas vรญrgulas e colchetes e tenha certeza que eles estรฃo formatados corretamente.ย 

Tenha certeza tambรฉm que a caixa Habilitada ao lado da sua extensรฃo estรก marcada, para que vocรช consiga vรช-la em aรงรฃo.ย 

Criando uma Extensรฃo do Chrome Passo 5: Desenvolva Seu Script em Backgroundย 

Em seguida, vocรช vai precisar rodar um script em background para dizer ร  extensรฃo o que fazer.

Primeiro, crie um arquivo chamado background.js dentro do diretรณrio da sua extensรฃo.

Em seguida, adicione seu script.

Para nossa extensรฃo de mudanรงa de cor, vamos usar o seguinte script:

โ€œnameโ€: โ€œGetting Started Exampleโ€,

โ€œdescriptionโ€: โ€œBuild an Extension!โ€,

โ€œversionโ€: โ€œ1.0โ€,

โ€œmanifest_versionโ€: 3,

โ€œbackgroundโ€:

โ€œservice_workerโ€: โ€œbackground.jsโ€

Esse arquivo vai alertar o Chrome que ele precisa fazer uma anรกlise para obter mais instruรงรตes.

A extensรฃo que estamos criando tambรฉm vai precisar de um evento de escura para runtime.onInstalled dentro do script em background.

Dentro da escuta onInstall, a extensรฃo vai determinar um valor na API de armazenamento. Isso permite que vรกrios componentes da extensรฃo rodem e editem esse valor.ย 

let color = โ€˜#3aa757โ€™;

chrome.runtime.onInstalled.addListener(() =>

chrome.storage.sync.set( color );

console.log(โ€˜Default background color set to %cgreenโ€™, `color: $color`);

);

A maioria das APIs vรฃo precisar estar registradas no campo โ€œpermissรตesโ€ do seu arquivo manifest. Assim:

โ€œnameโ€: โ€œGetting Started Exampleโ€,

โ€œdescriptionโ€: โ€œBuild an Extension!โ€,

โ€œversionโ€: โ€œ1.0โ€,

โ€œmanifest_versionโ€: 3,

โ€œbackgroundโ€:

โ€œservice_workerโ€: โ€œbackground.jsโ€

,

โ€œpermissionsโ€: [โ€œstorageโ€]

Em seguida, volte ร  pรกgina de gerenciamento da sua extensรฃo e clique em Recarregar.

Vocรช vai ver um novo campo escrito Inspecionar visualizaรงรตes. Vai vir junto um link azul dizendo pรกgina de fundo.

example of chrome extension builder interface

Clique no link e vocรช vai ver o console log do script de background, onde vai estar escrito โ€œCor de fundo padrรฃo verdeโ€.

Scripts de conteรบdo tambรฉm podem ser adicionados para rodar scripts pรกgina-a-pรกgina.

Scripts de conteรบdo devem ser adicionados diretamente ao seu arquivo manifest.

Criando uma Extensรฃo do Chrome Passo 6: Crie Sua Interface de Usuรกrio

Sua extensรฃo pode ter diversas interfaces de usuรกrios, de pop-ups a tooltips, entre outras.

Para comeรงar a desenvolver sua interface, vocรช precisa registrar uma aรงรฃo do navegador no seu arquivo manifest.

Para o nosso exemplo, vamos usar um pop-up. O cรณdigo fica assim:

<!DOCTYPE html>

<html>

<head>

<link rel=โ€stylesheetโ€ href=โ€button.cssโ€>

</head>

<body>

<button id=โ€changeColorโ€></button>

</body>

</html>

Vocรช vai precisar declarar esse cรณdigo no seu arquivo manifest para ele funcionar.

Para fazer isso, adicione uma aรงรฃo ao seu arquivo manifest e configurar popup.html como o default_popup da aรงรฃo.

Seu script deve ficar assim:

โ€œnameโ€: โ€œGetting Started Exampleโ€,

โ€œdescriptionโ€: โ€œBuild an Extension!โ€,

โ€œversionโ€: โ€œ1.0โ€,

โ€œmanifest_versionโ€: 3,

โ€œbackgroundโ€:

โ€œservice_workerโ€: โ€œbackground.jsโ€

,

โ€œpermissionsโ€: [โ€œstorageโ€],

โ€œactionโ€:

โ€œdefault_popupโ€: โ€œpopup.htmlโ€

Esse pop-up especรญfico faz referรชncia a um script de CSS, entรฃo vocรช vai precisar adicionar outro arquivo ao seu diretรณrio. Nomeie-o corretamente e adicione o seguinte:

button

height: 30px;

width: 30px;

outline: none;

margin: 10px;

border: none;

border-radius: 2px;

button.current

box-shadow: 0 0 0 2px white,

0 0 0 4px black;

Para o nosso exemplo, vocรช tambรฉm vai querer adicionar cor aos seus botรตes deย  popup. Mais adiante, essa cor tambรฉm vai ser usada como fundo da sua pรกgina.ย 

Crie e adicione ao diretรณrio um arquivo de nome popup.js com o seguinte cรณdigo:

// Initialize button with userโ€™s preferred color

let changeColor = document.getElementById(โ€œchangeColorโ€);

chrome.storage.sync.get(โ€œcolorโ€, ( color ) =>

changeColor.style.backgroundColor = color;

);

Ele vai pegar o botรฃo do popup.html e fazer a requisiรงรฃo do valor da cor. Inclua uma tag de script ao popup.js no popup.html assim:

<!DOCTYPE html>

<html>

<head>

<link rel=โ€stylesheetโ€ href=โ€button.cssโ€>

</head>

<body>

<button id=โ€changeColorโ€></button>

<script src=โ€popup.jsโ€></script>

</body>

</html>

A partir daรญ, vocรช pode adicionar badges para mostrar o estado da sua extensรฃo. Por exemplo, um badge pode dizer a um usuรกrio se a extensรฃo estรก ativada ou nรฃo, ligada ou nรฃo.

an icon showing on funtionality and a water drop below it

รcones da barra de ferramentas devem ser colocados em aรงรฃo no campo รญcones_padrรฃo.

Coloque as imagens que vocรช deseja no diretรณrio e diga ร  extensรฃo como usar essas imagens.ย 

โ€œnameโ€: โ€œGetting Started Exampleโ€,

โ€œdescriptionโ€: โ€œBuild an Extension!โ€,

โ€œversionโ€: โ€œ1.0โ€,

โ€œmanifest_versionโ€: 3,

โ€œbackgroundโ€:

โ€œservice_workerโ€: โ€œbackground.jsโ€

,

โ€œpermissionsโ€: [โ€œstorageโ€],

โ€œactionโ€:

โ€œdefault_popupโ€: โ€œpopup.htmlโ€,

โ€œdefault_iconโ€:

โ€œ16โ€: โ€œ/images/get_started16.pngโ€,

โ€œ32โ€: โ€œ/images/get_started32.pngโ€,

โ€œ48โ€: โ€œ/images/get_started48.pngโ€,

โ€œ128โ€: โ€œ/images/get_started128.pngโ€

Para imagens, as dimensรตes recomendadas sรฃo de 16ร—16 e 32ร—32. Todos os รญcones devem ser quadrados, senรฃo podem acabar distorcidos.ย 

Se vocรช nรฃo escolher um รญcone, o Chrome vai adicionar um รญcone padrรฃo para vocรช.ย 

Quando vocรช criar a interface da sua extensรฃo do Chrome, mantenha-a simples e otimizada para o usuรกrio.

O Google diz que todas as interfaces de extensรฃo devem contribuir para a experiรชncia de navegaรงรฃo, e nรฃo ser uma distraรงรฃo.

Antes de continuar, recarregue sua extensรฃo e confira se estรก tudo certo.

Criando uma Extensรฃo do Chrome Passo 7: Adicione Um Pouco de Lรณgica

A lรณgica aprofunda a interaรงรฃo com a sua interface de usuรกrio.

Adicione scripts de lรณgica a quaisquer opรงรตes de interface de usuรกrio que vocรช tenha incluรญdo.

A lรณgica vai dizer ร  sua extensรฃo para realizar determinadas aรงรตes, como o que fazer quando se clica em um botรฃo.

Por exemplo, se vocรช usou o script popup.js, vocรช deve incluir sua lรณgica ao final.

Para o nosso exemplo, vocรช pode usar o seguinte script:

// When the button is clicked, inject setPageBackgroundColor into current page

changeColor.addEventListener(โ€œclickโ€, async () =>

ย ย let [tab] = await chrome.tabs.query( active: true, currentWindow: true );

ย ย chrome.scripting.executeScript(

ย ย ย ย target: tabId: tab.id ,

ย ย ย ย function: setPageBackgroundColor,

ย ย );

);

// The body of this function will be executed as a content script inside the

// current page

function setPageBackgroundColor()

ย ย chrome.storage.sync.get(โ€œcolorโ€, ( color ) =>

ย ย ย ย document.body.style.backgroundColor = color;

ย ย );

function setPageBackgroundColor()

chrome.storage.sync.get(โ€œcolorโ€, ( color ) =>

document.body.style.backgroundColor = color;

);

Esse cรณdigo gera um script de conteรบdo programaticamente injetado. Isso faz com que a cor de fundo da pรกgina seja a mesma do botรฃo que vocรช adicionou anteriormente.ย 

Aqui, sua extensรฃo jรก deve estar totalmente funcional. Quaisquer novas adiรงรตes serรฃo apenas frufrus.

Criando uma Extensรฃo do Chrome Passo 8: Teste Sua Extensรฃo

Da mesma forma que os testes A/B no marketing, รฉ importante sempre testar sua extensรฃo para ter certeza de que estรก tudo funcionando.ย 

Teste-a vocรช mesmo ou peรงa para outra pessoa testar.

Se vocรช pedir para outra pessoa testar, faรงa-o sem dar nenhuma instruรงรฃo para garantir que ela รฉ intuitiva de usar.

Faรงa as mudanรงas necessรกrias e depois teste sua extensรฃo de novo.

Mesmo depois de lanรงar sua extensรฃo, vocรช pode otimizรก-la e melhorรก-la continuamente. Foi o que a gente fez com a extensรฃo do Ubersuggest do Chrome 2.0.

Quando vocรช estiver satisfeito, ela estarรก pronta para ser usada.

Eu Posso Praticar Criar uma Extensรฃo do Chrome?

Assim que vocรช subir sua extensรฃo para a loja do Chrome, ela vai estar no ar e pronta para uso.ย 

Se vocรช nรฃo quiser que sua extensรฃo seja acessรญvel para o pรบblico, vocรช sempre pode criar um repositรณrio do GitHub para as pessoas poderem clonar.

Para isso, vocรช vai precisar dar acesso ao seu cรณdigo-fonte ร s pessoas, entรฃo pense nisso antes de subir qualquer coisa para o GitHub.

Vocรช tambรฉm pode experimentar amostras de cรณdigo aberto antes de mergulhar na sua extensรฃo.ย 

Amostras de extensรตes do Chrome estรฃo disponรญveis no GitHub do Google.

Conclusรฃo

Criar uma extensรฃo do Google Chrome personalizada รฉ uma รณtima maneira de melhorar a funcionalidade do seu navegador e otimizar a experiรชnca dos usuรกrios.

Alรฉm disso, sua ferramenta pode gerar trรกfego para o seu site, entรฃo modificar essa experiรชncia pode resultar em novos leads para o seu negรณcio.

Lembre-se, algumas das extensรตes mais incrรญveis do Chrome foram desenvolvidas por pessoas como vocรช!

Pode ser uma curva de aprendizado chegar onde vocรช quer com a sua extensรฃo, mas vale a pena quando vocรช tem uma funcionalidade nova para exibir para os seus amigos โ€“ e clientes em potencial.ย 

Que tipo de extensรฃo do Chrome vocรช jรก criou?