Como criar uma extensão do Chrome

“Dentro da nossa vida atual, estamos mais ansiosos para usar aplicativos de mídia social e o mecanismo de pesquisa do Google para fins de entretenimento e pesquisa, eu.e., Pesquise algum tópico educacional por meio do mecanismo de pesquisa “Google” e obtenha 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 utilizados e eficientes do século de hoje é o navegador "Google Chrome", que criou muitas boas funcionalidades junto com a utilidade da extensão. A "extensão" é o plug -in encontrado em qualquer navegador para restringir ou permitir sites e diferentes funções. Essas extensões geralmente não são embutidas; Você deve adicionar cada extensão ao seu navegador separadamente sempre que necessário. Se você é um pouco especialista em tecnologia, pode saber o uso de arquivos JSON manifestos para criar e adicionar uma extensão em algumas etapas. Portanto, este artigo cobrirá todas essas etapas para criar uma nova extensão no navegador do Google Chrome.

Antes de dar uma olhada no método para criar uma extensão, você precisa garantir que seu navegador do Google Chrome já esteja lançado e 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, "eu.e., apenas um fundo branco.”

Adicione a pasta de extensão

Abra sua ferramenta de código do Visual Studio rapidamente nos aplicativos do seu sistema Windows. Pode levar até 1 minuto para abrir corretamente o código do Visual Studio e ativá -lo para o nosso uso. Depois de ser lançado corretamente e está pronto para a utilização, adicionamos a pasta já gerada "Extensão" nele através da lista de menus "Arquivo" na barra de tarefa superior mostrada abaixo. Depois de criar a pasta "extensão", adicionamos outra pasta chamada "imagem" que contém as imagens a serem usadas como um ícone para a extensão no navegador. Junto com isso, adicionamos um “manifesto.arquivo 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 manifesto.JSON FILE clicando duas vezes nele para começar a trabalhar em JSON para criar e usar uma extensão para alterar o fundo do "Google".

Criar arquivo de manifesto

Dentro do manifesto.Arquivo JSON, você deve adicionar o código "JSON" mostrado. Este código é o script de configuração real para criar e adicionar uma extensão ao nosso navegador do Google Chrome. Este código JSON foi iniciado com a inicialização da versão de manifesto variável como "2" e o nome de uma extensão a ser criada, i i.e., "Mude o fundo". Depois disso, adicionamos a breve descrição para nossa extensão na variável "Descrição".

Junto com isso, adicionamos a versão de uma extensão como “1.0 ”. Depois que todas as configurações básicas para a “extensão” são criadas, precisamos adicionar o caminho ao ícone da imagem para ser usado como um ícone para as extensões. A variável "navegador" foi definida para definir o ícone de extensão para a barra de tarefas superior do navegador do Google Chrome, i i.e., onde todas as extensões são exibidas após habilitá -las para uso futuro em particular ou em todos os sites. Depois disso, adicionamos o caminho a 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" da barra de tarefas superior do Google Chrome. A variável "default_icon" foi usada nela, juntamente com seus três valores diferentes de caminho para as imagens a serem usadas como ícones em cada recarga. Três arquivos de imagem diferentes são utilizados para esse fim. A última variável content_scripts leva um total de 2 novas variáveis ​​nele, eu.e., Matches e CSS. A variável "Matches" contém o caminho para o site a ser alterado após o uso dessa nova extensão ser criada. Junto com isso, a variável "CSS" contém o nome de um arquivo CSS a ser usado para o estilo do Google.com depois de se candidatar à extensão, eu.e., modelando o google.com após cada recarregar para ativar a extensão. Agora que este código está completo e pronto para uso, basta salvá -lo rapidamente e seguir em direção ao “principal.Arquivo CSS ”.

Dentro do principal.Arquivo CSS CSS, estamos adicionando estilo para nossa extensão de arquivo manifesto a ser criado. O estilo seria aplicado usando a tag HTML "Body", eu.e., a ser aplicado na área completa do “corpo” do arquivo manifesto. Estamos definindo o novo fundo para o Google.com o uso do "URL" de um arquivo de imagem do mecanismo de pesquisa. Agora, salve seu código antes de qualquer coisa.

Depois de concluir os códigos necessários, eu.e., manifesto.JSON E PRINCIPAL.Arquivo CSS, temos que abrir o utilitário de extensões no navegador do Google Chrome através do URL Chrome: // Extensões ”na nova guia. A área de utilidade de extensões é aberta. No modo de desenvolvedor, você precisa carregar a pasta "extensão" descompactada do sistema local para torná -lo uma extensão através do botão "Carregar despacotado" exibido na imagem abaixo. A extensão foi adicionada eficazmente ao navegador Chrome, como exibido. Remova os erros para fazê -lo funcionar completamente.

No ícone de "extensão", escolha a extensão "Alterar fundo" para exibi -lo na barra de tarefas, eu.e., A extensão do ícone "C".

Depois de recarregar o Google.com, seus antecedentes foram atualizados 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 do Google Chrome e como usá -lo para mudar de fundo para o “Google.com ”mecanismo de pesquisa. Depois de carregar a extensão no Google Chrome, nós o usamos no Google.com mudar seu fundo.