Como criar sua própria extensão do Google Chrome

Você já se sentiu insatisfeito com os recursos que vêm com o seu navegador da web? Mesmo com horas vasculhando a Google Web Store, nem sempre é uma simples questão de clicar em “baixar” para aprimorar sua experiência de navegação na web.

É aqui que entram as extensões do navegador. Neste artigo, exploraremos o processo de criação de sua própria extensão DIY do Google Chrome a partir do zero.

O que é uma extensão do Google Chrome?

Moderno navegadores da web como o Google Chrome vêm com uma variedade de recursos que os tornam fáceis de usar e capazes de atender às necessidades da maioria dos usuários. No entanto, estender esses recursos de estoque pode trazer muitos benefícios diferentes. É por isso que os desenvolvedores de navegadores geralmente possibilitam a criação de extensões, complementos e plug-ins para eles.

O Google Chrome oferece esse recurso, tornando mais fácil para qualquer pessoa com experiência em desenvolvimento da Web criar suas próprias extensões do Chrome. Você pode fazer uma extensão usando HTML, JavaScript e CSS, assim como muitos sites.

Ao contrário de um site, as extensões podem ser executadas em segundo plano enquanto você navega, às vezes até interagindo com os sites que você visita.

O que nossa extensão do Google Chrome fará?

Vamos construir uma extensão simples do Chrome que permitirá que você visite o site Make Use Of e faça uma pesquisa aleatória com base nas categorias de artigos encontradas no site. Este é um projeto rápido e fácil, mas você ainda vai aprender muito.

Você vai aprender como

• Criar uma extensão do Google Chrome
• Inserir código personalizado em páginas da Web usando uma extensão do Chrome
• Crie listeners de eventos e simule cliques
• Gerar números aleatórios
• Trabalhar com arrays e variáveis

Construindo sua própria extensão do Chrome DIY

O Google tornou surpreendentemente fácil criar seu próprio Extensões do Chrome, então não demorará muito para que você tenha algo funcionando. Seguir as etapas abaixo levará apenas 10 a 15 minutos, mas recomendamos que você experimente seu próprio código também.

Etapa 1: Criando os arquivos

Você pode armazenar sua extensão em sua própria máquina local quando não planeja distribuí-la. Precisamos apenas criar quatro arquivos diferentes para criar nossa extensão; um arquivo HTML, um arquivo CSS, um arquivo JavaScript e um arquivo JSON.

Chamamos nossos arquivos de index.html, style.css, script.js e manifest.json. O arquivo de manifesto deve ter esse nome para funcionar corretamente, mas você pode dar aos outros os nomes que quiser, desde que altere seu código de acordo.

Você deve colocar esses arquivos na mesma pasta raiz.

Etapa 2: construir o arquivo de manifesto

O arquivo de manifesto vem com todas as extensões do Google Chrome. Ele fornece informações sobre a extensão para o Chrome, ao mesmo tempo em que estabelece algumas configurações básicas. Este arquivo deve conter um nome, número de versão, descrição e uma versão do manifesto. Também incluímos permissões e uma ação que carrega index.html como o pop-up que aparece para a extensão.

{
"nome": "Pesquisa Automatizada MakeUseOf.com",
"versão": "1.0.0",
"Descrição": "Uma ferramenta de busca para encontrar artigos interessantes",
"manifest_version": 3,
"autor": "Samuel Garbett",
"permissões": ["armazenar", "declarativoConteúdo", "guia ativa", "script"],
"host_permissions": [""],
"açao":{
"default_popup": "index.html",
"título_padrão": "Pesquisa automática MUO"
 }
}

Etapa 3: Construindo o HTML e CSS

Antes de começarmos a escrever nosso script, precisamos criar uma interface do usuário básica usando HTML e CSS. Você pode usar um Biblioteca CSS como Bootstrap para evitar criar o seu próprio, mas precisamos apenas de algumas regras para nossa extensão.

Nosso arquivo index.html apresenta tags html, head e body. A tag head contém um título de página e um link para nossa folha de estilo, enquanto o corpo abriga uma tag h1, um botão que leva você para MakeUseOf.com, e outro botão que usaremos como gatilho para um roteiro. Uma tag de script no final do documento inclui o script.js Arquivo.

<html>
<cabeça>
<título>Pesquisa automática MUO</title>
<metacharset="utf-8">
<link rel="folha de estilo" href="estilo.css">
</head>
<corpo>
<h1>Pesquisa automática MUO</h1>
<a href="https://www.makeuseof.com/" alvo="_em branco"><botão id="botão Um">Vá para MakeUseOf.com</button></uma>
<botão id="botãoDois">Iniciar pesquisa aleatória</button>
</body>
<script src="script.js"></script>
</html>

Nosso arquivo CSS é ainda mais simples que nosso HTML, alterando o estilo de apenas cinco elementos. Temos regras para nossas tags html e body, bem como para tags h1 e ambos os nossos botões.

html{
 largura: 400px;
}
corpo {
 família de fontes: Helvetica, sem serifa;
}
h1 {
 alinhamento de texto: centro;
}
#buttonUm {
 raio da borda: 0px;
 largura: 100%;
 preenchimento: 10px 0px;
}
#buttonDois {
 raio da borda: 0px;
 largura: 100%;
 preenchimento: 10px 0px;
 margem superior: 10px;
}

Etapa 4: Construindo o JavaScript

Como última etapa deste processo, é hora de construir nosso arquivo script.js.

A primeira função neste arquivo, chamada insertScript(), está no lugar para inserir a outra função (pesquisa automatica()) na página atual. Isso nos permite manipular a página e usar os recursos de pesquisa que já estão presentes no site MakeUseOf.com.

Isso é seguido por um ouvinte de eventos que espera até que o botão Iniciar Pesquisa Aleatória seja clicado antes de chamar a função que exploramos acima.

o pesquisa automatica() função é um pouco mais complicada. Ele começa com uma matriz contendo 20 das categorias no site da MUO, dando-nos uma boa amostra para extrair ao fazer nossas pesquisas aleatórias. A seguir, utilizamos o Math.random() função para gerar um número aleatório entre 0 e 19 para selecionar uma entrada do nosso array.

Com nosso termo de pesquisa em mãos, agora precisamos simular um clique de botão para abrir a barra de pesquisa MUO. Primeiro, usamos o console do desenvolvedor do Chrome para encontrar o ID do botão de pesquisa e, em seguida, adicionamos isso ao nosso código JavaScript com o clique() função.

Assim como o botão de pesquisa, também precisamos encontrar o ID da barra de pesquisa que aparece, permitindo inserir o termo de pesquisa aleatório que selecionamos. Com isso completo, basta enviar o formulário para fazer nossa busca.

// Esta função insere nossa função autoSearch no código da página
funçãoinsertScript() {
// Isso seleciona a guia focada para a operação e passa a função autoSearch
 chrome.tabs.query({ativo: verdadeiro, janela atual: verdadeiro}, abas => {
cromada.script.executeScript({alvo: {tabId: guias[0].Eu iria}, função: pesquisa automatica})
 })
// Isso fecha o pop-up da extensão para selecionar a barra de pesquisa do site
janela.perto();
}
// Este é um ouvinte de eventos que detecta cliques em nosso "Começar Aleatório Procurar" botão
document.getElementById('botãoDois').addEventListener('clique', insertScript)
// Esta função seleciona um tópico aleatório de um array e 
funçãopesquisa automatica() {
// Este é um array para armazenar nossos termos de pesquisa
 const searchTerms = ["PC e celular", "Estilo de vida", "Hardware", "janelas", "Mac",
"Linux", "Android", "Maçã", "Internet", "Segurança",
"Programação", "Entretenimento", "Produtividade", "Carreira", "Criativo",
"Jogos", "Mídia social", "Lar inteligente", "faça você mesmo", "Análise"];
// Isso gera um número aleatório entre 0 e 19
deixar seletorNúmero = Matemática.andar(Matemática.aleatória() * 20);
// Isso usa o número aleatório para selecionar uma entrada do array
deixar seleção = searchTerms[selectorNumber];
// Isso simula um clique no ícone de pesquisa do site MUO
 document.getElementById("js-search").clique();
// Isso define a barra de pesquisa do site MUO como uma variável
var barra de pesquisa = documento.getElementById("js-search-input");
// Isso insere nosso termo de pesquisa aleatório na barra de pesquisa
 searchBar.value = searchBar.value + seleção;
// Isso finaliza o processo ativando o formulário do site
 document.getElementById("searchform2").enviar();
}

Etapa 5: adicionar seus arquivos ao Chrome://extensions

Em seguida, é hora de adicionar os arquivos que você acabou de criar na página de extensões do Chrome. Depois de fazer isso, a extensão estará acessível no Chrome e se atualizará sempre que você fizer alterações em seus arquivos.

Abra o Google Chrome, vá para chrome://extensions e certifique-se de que o controle deslizante do modo de desenvolvedor no canto superior direito esteja na posição ligada.

Clique Carregar descompactado no canto superior esquerdo, escolha a pasta em que você salvou seus arquivos de extensão e clique em Selecione a pasta.

Agora que sua extensão está carregada, você pode clicar no ícone da peça do quebra-cabeça no canto superior direito e fixar sua extensão na barra de tarefas principal para facilitar o acesso.

Agora você deve conseguir acessar a extensão concluída em seu navegador. Vale a pena ter em mente que esta extensão só funcionará no site MUO ou sites com o mesmo ID para o botão e a barra de pesquisa.

Criando uma extensão do Google Chrome

Este artigo apenas arranha a superfície dos possíveis recursos que você pode criar em sua própria extensão do Google Chrome. Vale a pena explorar suas próprias ideias depois de aprender o básico.

As extensões do Chrome podem ajudá-lo a melhorar sua navegação, mas tente ficar longe de algumas das extensões conhecidas do Chrome obscuras para uma navegação segura.

6 extensões obscuras do Google Chrome que você deve desinstalar o mais rápido possível

Leia a seguir

Sobre o autor