Como criar extensões do Chrome a partir do zero

Se você deseja adicionar ou modificar algumas funcionalidades no Google Chrome, você precisa usar uma extensão. Embora você possa fazer o download de uma extensão na Chrome Web Store, mas às vezes precisa de uma funcionalidade específica que não pode ser encontrada em nenhuma extensão existente.

Bem, a boa notícia é que você pode criar sua própria extensão para adicionar ou modificar a funcionalidade necessária ou criar um novo complemento ou aplicativo para o Google Chrome, o que pode ser mais tarde distribuir para outros usuários usando a Chrome Web Store.

A seguir, vou mostrar a você maneira mais fácil de criar uma extensão. Se você tem algum conhecimento de desenvolvimento web (HTML, CSS e JS), você se sentirá em casa. Se não, primeiro observe esses canais para Aprenda os conceitos básicos de desenvolvimento web, então continue abaixo.

Pré-requisitos

Você precisa ter os seguintes requisitos concluídos antes de começar este tutorial.

1. Você deve estar familiarizado com HTML, CSS e JavaScript. [Verificar recursos]
2. Você deve ter um editor de código para escrever a extensão. [Comparar editores]
3. (Opcional) Se você deseja distribuir sua extensão para outros usuários, você deve ter um conta de desenvolvedor na Chrome Web Store. [Crie a sua conta aqui]

Nota: O Google pede que você pague uma pequena taxa para criar uma conta de desenvolvedor na Chrome Web Store.

Crie uma extensão

Neste tutorial, vou compartilhar o processo de criação de um extensão de tarefas para o Google Chrome. Será um utilitário (como mostrado abaixo) para demonstrar os componentes essenciais e as habilidades fornecidas às extensões.

1. Obtenha um modelo

O Google Chrome, como qualquer outra plataforma, exige extensões para ter uma estrutura definida, o que pode parecer complexo para iniciantes. É por isso que é bom obter um modelo padrão para uma extensão que forneça todas as necessidades.

Extensionizr é o melhor gerador de clichê para extensões cromadas. Ele permite que você escolha um dos tipos de extensão fornecidos - ação do navegador (uma ação para todas as páginas ou o navegador), ação da página (uma ação para a página atual) ou extensão oculta (uma ação de fundo que geralmente está escondida na interface frontal).

Além disso, fornece várias opções de ajuste fino para incluir / excluir complementos necessários, permissões, etc. Você precisa selecionar “Ação do navegador” como o tipo de extensão e “Sem fundo” como a página de plano de fundo deste tutorial.

Quando terminar de escolher as opções para criar sua extensão de amostra, clique no “Baixe!” botão em Extensionizr. Finalmente, extraia o arquivo (.zip) para um diretório e abra seu editor de código para começar a escrever a extensão.

2. Codifique a extensão

Depois de fazer o download e extrair o modelo, você verá uma estrutura de diretórios, conforme mostrado na captura de tela abaixo. O modelo é bem organizado, e você deve saber que o arquivo mais importante é “manifest.json“.

Vamos conhecer outros arquivos e pastas neste diretório também:

1. _locales: É usado para armazenar informações de idioma para um aplicativo multilíngüe.
2. css: Ele funciona para armazenar bibliotecas front-end de terceiros, como o Bootstrap 4.
3. ícones: Ele é projetado para ter ícones para sua extensão em tamanhos variados.
4. js: Isso é útil para economizar bibliotecas de back-end de terceiros como jQuery 3.
5. src: Ele armazena o código real que você escreverá para sua extensão.

manifest.json

Ele contém o metadados básicos sobre seu aplicativo, que define os detalhes do seu aplicativo para o navegador. Você pode editá-lo para definir o nome, a descrição, o site, o ícone etc. da extensão, além de detalhes específicos, como ações e permissões do navegador.

Por exemplo, no código abaixo, você perceberá que eu alterei o nome, descrição e homepage_url junto com default_title em browser_action. Além disso, eu adicionado “armazenamento” sob permissões como precisamos armazenar dados em nossa extensão.

 "name": "Todoizr - Tarefa simplificada", "versão": "0.0.1", "manifest_version": 2, "description": "Aplicativo de tarefas simples para todos.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" ícones / icon16.png "," 48 ":" ícones / icon48.png "," 128 ":" ícones / ícone128 .png "," default_locale ":" pt "," browser_action ": " default_icon ":" ícones / icon19.png "," default_title ":" Todoizr - tarefa simplificada "," default_popup ":" src / browser_action / browser_action.html "," permissions ": [" storage "] 

src \ browser_action

Este diretório conterá o código da ação do navegador. No nosso caso, nós vamos codifique a janela pop-up mostrado ao clicar no ícone da extensão no navegador. Nossa extensão permitirá que os usuários adicionem e visualizem itens de tarefas no pop-up.

Nota: Você sempre pode iniciar o código clonando este repositório.

Código inicial do modelo

Embora este diretório tivesse apenas um arquivo HTML com todo o código, decidi dividi-lo em três arquivos separados para melhor clareza. Dito isto, o arquivo HTML chamado “browser_action.html” agora tem o seguinte código:

Além disso, o arquivo de estilo chamado “browser_action.css” tem o conteúdo abaixo enquanto o arquivo JavaScript chamado “browser_action.js” está em branco por enquanto.

 #mainPopup padding: 10px; altura: 200 px; largura: 400px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  h1 tamanho da fonte: 2em;  

Projetar a interface do pop-up

Depois de configurar o projeto inicial, vamos primeiro projetar a interface do popup. eu tenho configurar a interface com uma abordagem minimalista, mostrando o nome no topo seguido por um formulário para adicionar itens de tarefas e uma área abaixo para visualizar os itens adicionados. É inspirado pelo design simplista de “Estilo de formulário 5“.

No código abaixo, adicionei dois divs - um para exibir o formulário para adicionar um item de tarefa e outro para exibir a lista de itens de tarefas já adicionados. Dito isto, o novo código para “browser_action.html” é o seguinte:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

E o arquivo de estilo “browser_action.css” agora tem o seguinte código:

 @import url ("./form_style_5.css"); #mainPopup height: 200px; largura: 300px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  / * Formulário de item pendente * / .form-style-5 margin: auto; preenchimento: 0px 20px;  .form-style-5: primeiro filho background: none;  .form-style-5 h1 cor: # 308ce3; tamanho da fonte: 20px; texto-alinhar: centro;  .form-style-5 input [type = "text"] largura: auto; flutuar: esquerda; margin-bottom: não definido;  .form-style-5 input [type = "button"] background: # 308ce3; largura: auto; flutuar: certo; preenchimento: 7px; fronteira: nenhuma; raio de fronteira: 4 px; tamanho da fonte: 14px;  .form-style-5 input [type = "button"]: hover fundo: # 3868d5;  / * Lista de itens de tarefas * / .form-style-5: last-child height: inherit; margem inferior: 5 px;  .form-style-5 ul preenchimento: 20px;  .form-style-5 ul li tamanho da fonte: 14px;  

Por fim, o arquivo de estilo de terceiros “form_style_5.css” tem o conteúdo abaixo. É simplesmente retirado do seu site para inspirar o design da nossa extensão..

 / * Form Style 5 da Sanwebe.com * / / * https://www.sanwebe.com/2014/08/csshtht-forms-designs * / .form-style-5 max-width: 500px; preenchimento: 10 px 20 px; plano de fundo: # f4f7f8; margem: 10px auto; preenchimento: 20px; plano de fundo: # f4f7f8; raio de fronteira: 8 px; família de fontes: Georgia, "Times New Roman", Times, serif;  .form-style-5 fieldset border: nenhum;  .form-style-5 legend tamanho da fonte: 1.4em; margem inferior: 10px; rótulo .form-style-5 display: block; margem inferior: 8px;  .form-style-5 input [type = "text"], .form-style-5 input [type = "date"], .form-style-5 input [type = "datetime"], .form-style -5 entrada [type = "email"], entrada .form-style-5 [type = "number"], entrada .form-style-5 [type = "search"], entrada .form-style-5 [type = "time"], .form-style-5 input [type = "url"], .form-style-5 textarea, .form-style-5 selecione font-family: Georgia, "Times New Roman", Times serif; fundo: rgba (255,255,255, 0,1); fronteira: nenhuma; raio de fronteira: 4 px; tamanho da fonte: 16px; margem: 0; esboço: 0; preenchimento: 7px; largura: 100%; dimensionamento de caixa: caixa de borda; -webkit-box-sizing: caixa de borda; -moz-box-size: border-box; background-color: # e8eeef; cor: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0,03) inserido; box-shadow: 0 1px 0 rgba (0,0,0,0.03) inserção; margem inferior: 30px;  .form-style-5 input [type = "text"]: foco, entrada .form-style-5 [type = "date"]: foco, entrada .form-style-5 [type = "datetime"]: focus, .form-style-5 input [type = "email"]: foco, entrada .form-style-5 [type = "number"]: foco, entrada .form-style-5 [type = "search"] : foco, .form-style-5 input [type = "time"]: foco, .form-style-5 input [type = "url"]: foco, .form-style-5 textarea: foco, .form- style-5 select: focus fundo: # d2d9dd;  .form-style-5 selecione -webkit-appearance: menulist-button; altura: 35px;  .form-style-5 .number background: # 1abc9c; cor: #fff; altura: 30px; largura: 30px; display: bloco inline; tamanho da fonte: 0.8em; margem direita: 4 px; altura da linha: 30px; texto-alinhar: centro; text-shadow: 0 1px 0 rgba (255,255,255,0,2); border-radius: 15px 15px 15px 0px;  .form-style-5 input [type = "submit"], .form-style-5 input [type = "botão"] position: relative; display: bloco; preenchimento: 19px 39px 18px 39px; cor: #FFF; margem: 0 auto; fundo: # 1abc9c; tamanho da fonte: 18px; texto-alinhar: centro; estilo de fonte: normal; largura: 100%; borda: 1px sólido # 16a085; largura da borda: 1px 1px 3px; margem inferior: 10px;  .form-style-5 input [type = "submit"]: passe, .form-style-5 input [type = "button"]: hover fundo: # 109177;  

Escreva a lógica do popup

Quando terminarmos com o front-end da extensão, vamos agora escrever a lógica para o seu funcionamento. Precisamos da nossa extensão para poder adicionar itens de tarefas e também exibi-los na janela pop-up. Então, adicionaremos um ouvinte de clique de botão para adicionar o texto de entrada como um item de tarefa e um ouvinte de carregamento de página para mostrar esses itens.

No código abaixo, vamos usar duas funções - sync.get () e sync.set (), que fazem parte “chrome.storage“. Precisamos do segundo para salvar os itens a fazer no armazenamento e o primeiro para recuperá-los e mostrá-los.

Dito isto, abaixo está o código final do “browser_action.js” Arquivo. Como você pode ver abaixo, o código é altamente comentado para ajudá-lo a entender sua finalidade.

 function loadItems () / * Primeiro get () os dados do armazenamento * / chrome.storage.sync.get (['todo'], função (resultado) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * Analisa e pega a matriz como ela é salva como uma string * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) para (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Carregue a extensão

Depois de escrever sua extensão, é hora de testá-lo por meio do recurso do Google Chrome, que oferece para carregar extensões sem armazenamento e descompactadas. Mas primeiro, você deve ativar o modo de desenvolvedor no seu navegador: clique no opções botão > escolher “Mais ferramentas” > Extensões, e depois alternar “Modo de desenvolvedor“.

Agora você verá mais botões sob a barra de pesquisa. Aqui clique no “Carregar descompactado” botão. Ele pedirá o diretório - procure e selecione o diretório de sua extensão, e ele irá carregar a extensão. Se você editar ou atualizar o código da sua extensão, poderá clicar no recarregar o botão para carregar as últimas alterações.

No nosso exemplo, você verá o ícone da extensão ao lado do ícone do perfil, porque adicionamos uma ação do navegador em nossa extensão de amostra. Você pode clicar nesse ícone para adicionar e ver itens de tarefas em nossa extensão como essa é a ação especificada.

Distribuir uma extensão

Embora seja fácil de fazer upload de uma extensão na Chrome Web Store, o processo é muito longo para cobrir todos os detalhes. Em suma, você cria uma conta de desenvolvedor, empacota sua extensão e, em seguida, a envia junto com seus detalhes de conteúdo (como nome, ícone, capturas de tela, etc.); conforme listado em seu guia passo-a-passo.

Qual o proximo? Ler e codificar

Como você pode esperar, o objetivo deste tutorial é começar com o desenvolvimento da extensão para o Google Chrome. Eu tentei cobrir os conceitos básicos; Contudo, você precisa saber muito mais para fazer um desenvolvimento sério de extensão.

Dito isto, abaixo estão alguns dos meus recursos favoritos para aprender a desenvolver extensões para o Google Chrome e outros navegadores baseados no Chromium:

1. Todas as habilidades, componentes e recursos das extensões.
2. Exemplo de extensões da equipe por trás do Google Chrome.

Se você passou por esses recursos e está pronto para algum desafio, tente adicionar os recursos abaixo na extensão que você acabou de desenvolver:

1. Uma opção para excluir os itens de tarefas salvos.
2. Um recurso para mostrar notificações quando terminar de adicionar um item.

Isso é tudo sobre como desenvolver sua primeira extensão para o navegador mais popular. Qual extensão você criou?? Você entrou em um problema? Por favor, deixe-me saber sua história escrevendo um comentário abaixo ou me mandando uma mensagem em @aksinghnet.

Por último, mas não menos importante, observe que você pode experimentar o Todoizr (a extensão que criamos) na Chrome Web Store e verificar seu código completo neste repositório.