Como fazer uma extensão simples do Chrome

Fazer uma extensão do Chrome é um processo bastante simples. Quando terminar, você poderá usá-lo em seu computador para aprimorar o funcionamento do navegador.

Existem alguns componentes básicos que o navegador requer antes que a extensão possa ser totalmente operacional. Veremos tudo isso abaixo, incluindo como fazer com que sua extensão personalizada funcione no Chrome sem a necessidade de carregá-la ou compartilhá-la com outras pessoas.

Construir uma extensão complexa do Chrome é um processo muito mais detalhado do que você verá abaixo, mas o processo geral é o mesmo. Continue lendo para saber como fazer uma extensão do Chrome que você pode começar a usar hoje.

Dica(Tip) : para ver como sua própria extensão pode ser incrível, confira essas incríveis extensões do Chrome(these amazing Chrome extensions) .

Como fazer uma extensão do Chrome

Usando este guia, você criará uma extensão simples do Chrome que lista alguns de seus sites favoritos. É totalmente personalizável e muito fácil de atualizar.

Aqui está o que fazer:

  • Crie uma pasta que conterá todos os arquivos que compõem a extensão.
  • Crie os arquivos base que esta extensão requer: manifest.json , popup.html , background.html , styles.css .
  • Abra o popup.html(popup.html) em um editor de texto e cole todos os itens a seguir, certificando-se de salvá-lo quando terminar.
<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Favorite Sites</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
<body>
   <ul id="myUL">
      <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li>
      <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li>
      <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li>
   </ul>
</body>
</html>

Sinta(Feel) -se à vontade para editar os links e o texto do link ou, se quiser tornar a extensão do Chrome exatamente como somos, mantenha tudo igual.

  • Abra manifest.json no editor de texto e copie/cole o seguinte:

{
“update_url”: “https://clients2.google.com/service/update2/crx”,

“manifest_version”: 2,
“name”: “Sites favoritos”, ( “name”: “Favorite Sites”,)
“description”: “Todos os meus sites favoritos.”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},

   “fundo”: {  (   “background”: { )
        “página”:”fundo.html” (        “page”:”background.html”)
},

    “browser_action” : {
        “default_icon” : “icon.png”,
        “default_title” : “Sites favoritos”, (        “default_title” : “Favorite Sites”,)
        “default_popup”: “popup.html”
    }
}

As áreas comestíveis deste código incluem name , description e default_title .

  • Abra styles.css e cole o código a seguir. Isso é o que decora o menu pop-up para torná-lo muito mais atraente e ainda mais fácil de usar.

#myUL {
tipo de estilo de lista: nenhum; (list-style-type: none;)
   preenchimento: 0; (   padding: 0;)
   margem: 0; (   margin: 0;)
   largura: 300px; (   width: 300px;)
}

#myUL li a {
  border: 1px solid #ddd;
  margem superior: -1px; (  margin-top: -1px;)
  background-color: #f6f6f6;
  preenchimento: 12px; (  padding: 12px;)
  decoração de texto: nenhuma; (  text-decoration: none;)
  tamanho da fonte: 18px; (  font-size: 18px;)
  cor preta; (  color: black;)
  exibição: bloco; (  display: block;)
  família de fontes: 'Noto Sans', sem serifa; (  font-family: ‘Noto Sans’, sans-serif;)
}

#myUL li a:hover:not(.header) {
   background-color: #eee;
}

There’s a lot you can change in the CSS file. Play around with these options after making your Chrome extension to customize it to your liking.

  • Create an icon for the extension and name it icon.png. Place it in your Chrome extension folder. As you can see in the code above, you can make a separate icon for those sizes: 16×16 pixels, 32×32, and so on.

Tip: Google has more information on creating Chrome extensions. There are other examples and advanced options that go beyond the simple steps we’ve shown here.

How to Add a Custom Extension to Chrome

Agora que você criou a extensão do Chrome , é hora de adicioná-la ao navegador para que você possa realmente usar todos os arquivos que acabou de criar. A instalação de uma extensão personalizada envolve um procedimento diferente de como você instalaria uma extensão normal do Chrome(how you’d install a normal Chrome extension) .

  • No menu do Chrome, vá para Mais ferramentas(More tools ) > Extensões(Extensions) . Ou digite chrome://extensions/ na barra de endereço.
  • Selecione o botão ao lado do modo Desenvolvedor(Developer mode) se ainda não estiver selecionado. Isso ativará um modo especial que permite importar suas próprias extensões do Chrome .

  • Use o botão Carregar descompactado(Load unpacked ) na parte superior dessa página para selecionar a pasta que você criou durante a Etapa 1(Step 1) acima.

  • Aceite(Accept) quaisquer prompts se você os vir. Caso contrário, sua extensão personalizada do Chrome aparecerá junto com quaisquer outras que você tenha no canto superior direito do navegador.

Editando sua extensão do Chrome

Agora que sua extensão do Chrome pode ser usada, você pode fazer alterações para torná-la sua. 

O arquivo styles.css controla como a extensão aparece, para que você possa ajustar o estilo geral da lista e alterar a cor ou o tipo da fonte. W3Schools é um dos melhores recursos para aprender sobre todas as coisas diferentes que você pode fazer com CSS .

Para mudar a ordem em que os sites são listados, adicionar ou mais sites ou remover sites existentes, edite o arquivo popup.html. Apenas certifique-se de manter suas edições apenas no URL e no nome. Todos os outros caracteres, como <li> e <html> , são obrigatórios e não devem ser alterados. O Tutorial HTML no W3Schools(HTML Tutorial on W3Schools) é um bom lugar para aprender mais sobre essa linguagem.



Violeta Cordeiro

About the author

Eu sou um programador de computador, e tenho sido há mais de 15 anos. Minhas habilidades estão no desenvolvimento e manutenção de aplicativos de software, além de fornecer suporte técnico para esses aplicativos. Também ensinei programação de computadores para alunos do ensino médio e atualmente sou instrutor profissional.


Related posts