Crie sua Própria Extensão de Navegador pt 1

Por

Aqui iremos construir uma pequena extensão que poderá ser aplicada em seu navegador, utilizaremos o Chrome como referência. É uma programação extremamente simples, basicamente teremos que usar hablidades de JavaScript, CSS e HTML. Também iremos usar um arquivo manifest escrito em JSON. Vamos lá…

Escolha seu editor de preferência, crie uma pasta de nome color-changer para os arquivos, e crie o arquivo manifest.json, ele será responsável por desde indexar os arquivos utilizados na extensão até as permissões utilizadas.

{
    "manifest_version": 2, 
    "name": "Color Changer",
    "author": "Rafael WMS",
    "version": "1.0",
    "description": "Muda as cores do corpo da págna.",
    "permissions": [
      "https://rafaelwms.com.br/*",
      "activeTab",
      "tabs"
    ],     
    "browser_action": {
      "default_icon": {
        "20": "images/color-changer20.png",
        "40": "images/color-changer40.png"
      },
      "default_title": "Color Changer",
      "default_popup": "popup.html"
    },
    "icons": {
        "25": "images/color-changer25.png",
        "48": "images/color-changer48.png"
      }
}

Vamos dissecar o manifest:

  • nome: o nome da extensão
  • autor: o autor da extensão
  • versão: o número da versão de extensão
  • descrição: uma descrição da extensão exibida na seção Sobre o menu de extensão no Microsoft Edge
  • permissões:uma matriz de strings solicitando permissões para a extensão. Para esta extensão, estamos solicitando permissões para ver as abas ativas (“activeTabs”).
  • browser_action:coloca um ícone na barra de ferramentas do seu navegador, à direita da barra de endereços
    • default_icon: especifica qual ícone é usado na barra de ferramentas.
    • default_title: o texto exibido quando um usuário paira sobre o ícone na barra de ferramentas
    • default_popup: O caminho para o arquivo HTML para o popup.
  • icons: especifica os ícones para sua extenção com pares de tamanho de imagem de valor-chave e caminho de imagem em relação ao diretório raiz da extensão.px

Criando o Popup

Para esta extensão, criaremos um popup para interação, conforme abaixo:


Para fazer isso, crie um arquivo chamado “popup.html” na raiz da sua pasta “color-changer” e cole o seguinte código:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
  </head>
  <body >
    <div id="maindiv"> 
      <h1>Minha primeira Extensão</h1>    
      <p>Color Changer</p>
      <input id="dark" type="button" value="Black" class="button" />
      <input id="cornsilk" type="button" value="Amarelado" class="button" />  
    </div>
    <script src="js/popup.js"></script> 
  </body>
</html>

Em popup.html, criamos um título, um parágrafo e dois botões (Black e Amarelado).
Agora crie uma pasta chamada css e crie um arquivo chamado styles.css. Adicione os estilos abaixo:

h1 {
    font-weight: 600;
    font-size: .9em;
}

p {
    font-weight: 500;
    font-size: .8em;
    margin-bottom: 10px;  
}

#maindiv{
    width: max-content;
    padding: 1em;
    font-family: 'Courier New', Courier, monospace;    
}

#dark{
    background-color: black;
    color: white;
}

#cornsilk{
    background-color: cornsilk;
    color: black;
}

.button{
    min-width: 75px;
    border-radius: 5%;
}

Este CSS dá à nossa extensão alguns estilos básicos. Fique à vontade para adicionar mais estilos para personalizar sua extensão.

Em seguida, precisamos criar o arquivo JavaScript que interage com o popup. Crie uma pasta js e um arquivo chamado popup.js dentro. Atualize popup.js com o código abaixo:

// Obtém os ID's do nosso "popup.html"
const btnDark = document.getElementById('dark');
const btnCornsilk = document.getElementById('cornsilk');

// Aqui vamos atribuir a mudança de cor do elemento "Body" ao clique dos botões:
 
// dark
btnDark.onclick = () => {
  chrome.tabs.insertCSS({code: "body { background: black !important; }"});
};

// cornsilk
btnCornsilk.onclick = () => {
  chrome.tabs.insertCSS({code: "body { background: cornsilk !important; }"});
};

Em popup.js, a API de guias nos permite interagir com as guias do navegador e injetar script e estilos no conteúdo de sua página. Usando o método tabs.insertCSS(), injetamos o CSS especificado na página que altera  para uma cor diferente quando o botão especificado é clicado.

Agora que temos a funcionalidade popup básica, vamos adicionar ícones à extensão.

Colocando ícones na Extensão

Os ícones são usados para representar a extensão na barra de ferramentas do navegador, no menu de extensões e em outros lugares. Os ícones necessários para esta extensão estão aqui no GitHub: imagens.

Depois de baixar os ícones, salve-os em uma pasta de images dentro da pasta color-changer.

O ícone que aparece na barra de ferramentas é definido usando dentro da chave browser_action, que já adicionamos ao nosso arquivo manifesto em uma seção anterior, default_icon.

A chave define quais ícones devem ser usados nos menus de configurações extensões. Abaixo, estamos especificando vários ícones com tamanhos diferentes para explicar diferentes resoluções de tela. O nome dos ícones, 25 e 48 são as dimensões x e y dos ícones, medidos em pixels.icons

Você notará ícones chamados inactive##.png incluídos na pasta de imagens, não se preocupe, iremos utilizá-los na parte dois desse tema.

Testando a extensão

Agora que adicionamos a interface do usuário e criamos ícones, vamos testar a extensão. Caminhe pelas etapas para adicionar uma extensão (Google Chrome, Microsoft Edge). Então, volte para este guia.

Depois de adicionar sua extensão, navegue para qualquer página. Clique no nosso ícone no navegador, clique em um dos botões e.. A cor do corpo da página também deve mudar de cor. NOTA: Algumas páginas estão protegidas de injeção de CSS, nestas não irá funcionar.

O nosso site em seu tema padrão, quando foi escrito esse post.
Nosso site, após clicarmos no botão Dark de nossa extensão.
Nosso site, após clicarmos no botão Amarelado de nossa extensão.

Legal, temos nossa primeira extensão funcionando!! Na parte dois, colocaremos novos comportamentos à nossa extensão… Um grande abraço e até lá!!!

Se você curtiu esse post, dá uma forcinha pro nosso canal no YouTube, inscreva-se lá!!! Valeu!!!