Como criar uma extensão do Chrome

Como Criar Uma Extensao Do Chrome



“Dentro de nossa vida atual, estamos mais ansiosos para usar aplicativos de mídia social e o mecanismo de pesquisa do Google para nossos fins de entretenimento e pesquisa, ou seja, pesquisar algum tópico educacional por meio do mecanismo de pesquisa “Google” e obter conhecimento geral também. Para usar o mecanismo de pesquisa do Google para pesquisar algo, devemos ter algum navegador já instalado em nossos telefones celulares, laptops ou computadores pessoais. Um dos navegadores mais usados ​​e eficientes do século atual é o navegador “Google Chrome” que veio com muitas boas funcionalidades junto com o utilitário de extensão. A “Extensão” é o plugin encontrado em qualquer navegador para restringir ou permitir sites e diferentes funções. Essas extensões geralmente não vêm embutidas; você deve adicionar cada extensão ao seu navegador separadamente sempre que necessário. Se você é um pouco especialista em tecnologia, talvez conheça o uso de arquivos JSON de manifesto para criar e adicionar uma extensão em algumas etapas. Portanto, este artigo abordará todas essas etapas para criar uma nova extensão no navegador Google Chrome.

Antes de dar uma olhada no método para criar uma extensão, você precisa garantir que seu navegador Google Chrome já esteja iniciado e que o mecanismo de pesquisa “Google” não contenha nenhum plano de fundo. Você pode ver que a imagem anexada abaixo não tem plano de fundo para o mecanismo de pesquisa 'Google.com', ou seja, apenas plano de fundo branco.









Adicionar pasta de extensão



Abra sua ferramenta Visual Studio Code rapidamente nos aplicativos do seu sistema Windows. Pode levar até 1 minuto para abrir corretamente o Visual Studio Code e habilitá-lo para nosso uso. Depois que ele foi iniciado corretamente e está pronto para utilização, adicionamos a pasta já gerada “Extensão” através da lista de menu “Arquivo” na barra de tarefas superior mostrada abaixo. Após criar a pasta “Extensão”, adicionamos outra pasta chamada “imagem” nela que contém as imagens a serem usadas como ícone da extensão no navegador. Junto com isso, adicionamos um arquivo “manifest.json” e um arquivo javascript chamado “script.js” para criar uma nova extensão e adicioná-la ao navegador. Vamos começar a partir do arquivo manifest.json clicando duas vezes nele para começar a trabalhar em JSON para criar e usar uma extensão para alterar o plano de fundo do “Google”.





Criar arquivo de manifesto



Dentro do arquivo manifest.json, você deve adicionar o código “JSON” mostrado abaixo. Este código é o script de configuração real para criar e adicionar uma extensão ao nosso navegador Google Chrome. Este código JSON foi iniciado com a inicialização da variável manifest version como “2” e o nome de uma extensão a ser criada, ou seja, “Change Background”. Depois disso, adicionamos a breve descrição da nossa extensão dentro da variável “description”.

Junto com isso, adicionamos a versão de uma extensão como “1.0”. Após todas as configurações básicas para a “extensão” serem criadas, precisamos adicionar o caminho para o ícone da imagem a ser usado como ícone para as extensões. A variável “browser” foi definida para definir o ícone de extensão para a barra de tarefas superior do navegador Google Chrome, ou seja, onde todas as extensões são exibidas após habilitá-las para uso futuro em determinados ou todos os sites. Depois disso, adicionamos o caminho para três arquivos de imagem de tamanhos diferentes para que o navegador possa usar arquivos diferentes a cada vez.

Junto com isso, a variável “page_action” foi usada para exibir qual imagem deve ser exibida após clicar no ícone “extensões” na barra de tarefas superior do Google Chrome. A variável “Default_icon” foi usada dentro dela, juntamente com seus três diferentes valores de caminho para as imagens a serem usadas como ícones em cada recarga. Três arquivos de imagem diferentes são utilizados para esta finalidade. A última variável content_scripts recebe um total de 2 novas variáveis, ou seja, correspondências e CSS. A variável “matches” contém o caminho para o site a ser alterado após a criação do uso desta nova extensão. Junto com isso, a variável “CSS” contém o nome de um arquivo CSS a ser usado para o estilo do Google.com após a solicitação da extensão, ou seja, o estilo do Google.com após cada recarga ao ativar a extensão. Agora que este código está completo e pronto para uso, basta salvá-lo rapidamente e passar para o arquivo “main.css”.

Dentro do arquivo CSS main.css, adicionamos um estilo para a nossa extensão de arquivo de manifesto a ser criada. O estilo seria aplicado usando a tag html “body”, ou seja, para ser aplicado em toda a área “body” do arquivo de manifesto. Estamos configurando o novo plano de fundo do Google.com usando o “URL” de um arquivo de imagem do mecanismo de pesquisa. Agora, salve seu código antes de qualquer coisa.

Depois de completar os códigos necessários, ou seja, manifest.json e arquivo main.css, temos que abrir o utilitário Extensions no navegador Google Chrome através da URL chrome://extensions” na nova guia. A área do utilitário Extensões é aberta. A partir de seu modo de desenvolvedor, você precisa carregar a pasta “Extension” descompactada do seu sistema local para torná-la uma extensão através do botão “load unpackaged” exibido na imagem abaixo. A extensão foi adicionada de forma eficaz ao navegador Chrome, conforme exibido. Remova os erros para que funcione totalmente.

No ícone “extensão”, escolha a extensão “Alterar plano de fundo” para exibi-la na barra de tarefas, ou seja, a extensão do ícone “C”.

Depois de recarregar o Google.com, seu plano de fundo foi atualizado usando esta extensão.

Conclusão

A partir da explicação do uso dos navegadores no sistema Windows, também discutimos a importância das extensões em qualquer navegador. Após a breve explicação das extensões, explicamos o método para usar o arquivo JSON manifesto para criar uma extensão para o navegador Google Chrome e como usá-lo para alterar o plano de fundo do mecanismo de pesquisa “Google.com”. Depois de carregar a extensão no Google chrome, estamos usando-a no Google.com para alterar seu plano de fundo.