Como fazer uma extensão simples do Chrome
Fazer uma extensão do Chrome é um processo bastante simples. Quando terminar, você poderá usá-lo em seu computador para aprimorar o funcionamento do navegador.
Existem alguns componentes básicos que o navegador requer antes que a extensão possa ser totalmente operacional. Veremos tudo isso abaixo, incluindo como fazer com que sua extensão personalizada funcione no Chrome sem a necessidade de carregá-la ou compartilhá-la com outras pessoas.
Construir uma extensão complexa do Chrome é um processo muito mais detalhado do que você verá abaixo, mas o processo geral é o mesmo. Continue lendo para saber como fazer uma extensão do Chrome que você pode começar a usar hoje.
Dica(Tip) : para ver como sua própria extensão pode ser incrível, confira essas incríveis extensões do Chrome(these amazing Chrome extensions) .
Como fazer uma extensão do Chrome
Usando este guia, você criará uma extensão simples do Chrome que lista alguns de seus sites favoritos. É totalmente personalizável e muito fácil de atualizar.
Aqui está o que fazer:
- Crie uma pasta que conterá todos os arquivos que compõem a extensão.
- Crie os arquivos base que esta extensão requer: manifest.json , popup.html , background.html , styles.css .
- Abra o popup.html(popup.html) em um editor de texto e cole todos os itens a seguir, certificando-se de salvá-lo quando terminar.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Favorite Sites</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <ul id="myUL"> <li><a href="https://helpdeskgeek.com/" target="_blank">Help Desk Geek</a></li> <li><a href="https://www.online-tech-tips.com/" target="_blank">Online Tech Tips</a></li> <li><a href="https://thebackroomtech.com/" target="_blank">The Back Room Tech</a></li> </ul> </body> </html>
Sinta(Feel) -se à vontade para editar os links e o texto do link ou, se quiser tornar a extensão do Chrome exatamente como somos, mantenha tudo igual.
- Abra manifest.json no editor de texto e copie/cole o seguinte:
{
“update_url”: “https://clients2.google.com/service/update2/crx”,
“manifest_version”: 2,
“name”: “Sites favoritos”, ( “name”: “Favorite Sites”,)
“description”: “Todos os meus sites favoritos.”, ( “description”: “All my favorite websites.”,)
“version”: “1.0”,
“icons”: {
“16”: “icon.png”,
“32”: “icon.png”,
“48”: “icon.png”,
“128”: “icon.png”
},
“fundo”: { ( “background”: { )
“página”:”fundo.html” ( “page”:”background.html”)
},
“browser_action” : {
“default_icon” : “icon.png”,
“default_title” : “Sites favoritos”, ( “default_title” : “Favorite Sites”,)
“default_popup”: “popup.html”
}
}
As áreas comestíveis deste código incluem name , description e default_title .
- Abra styles.css e cole o código a seguir. Isso é o que decora o menu pop-up para torná-lo muito mais atraente e ainda mais fácil de usar.
#myUL {
tipo de estilo de lista: nenhum; (list-style-type: none;)
preenchimento: 0; ( padding: 0;)
margem: 0; ( margin: 0;)
largura: 300px; ( width: 300px;)
}
#myUL li a {
border: 1px solid #ddd;
margem superior: -1px; ( margin-top: -1px;)
background-color: #f6f6f6;
preenchimento: 12px; ( padding: 12px;)
decoração de texto: nenhuma; ( text-decoration: none;)
tamanho da fonte: 18px; ( font-size: 18px;)
cor preta; ( color: black;)
exibição: bloco; ( display: block;)
família de fontes: 'Noto Sans', sem serifa; ( font-family: ‘Noto Sans’, sans-serif;)
}
#myUL li a:hover:not(.header) {
background-color: #eee;
}
There’s a lot you can change in the CSS file. Play around with these options after making your Chrome extension to customize it to your liking.
- Create an icon for the extension and name it icon.png. Place it in your Chrome extension folder. As you can see in the code above, you can make a separate icon for those sizes: 16×16 pixels, 32×32, and so on.
Tip: Google has more information on creating Chrome extensions. There are other examples and advanced options that go beyond the simple steps we’ve shown here.
How to Add a Custom Extension to Chrome
Agora que você criou a extensão do Chrome , é hora de adicioná-la ao navegador para que você possa realmente usar todos os arquivos que acabou de criar. A instalação de uma extensão personalizada envolve um procedimento diferente de como você instalaria uma extensão normal do Chrome(how you’d install a normal Chrome extension) .
- No menu do Chrome, vá para Mais ferramentas(More tools ) > Extensões(Extensions) . Ou digite chrome://extensions/ na barra de endereço.
- Selecione o botão ao lado do modo Desenvolvedor(Developer mode) se ainda não estiver selecionado. Isso ativará um modo especial que permite importar suas próprias extensões do Chrome .
- Use o botão Carregar descompactado(Load unpacked ) na parte superior dessa página para selecionar a pasta que você criou durante a Etapa 1(Step 1) acima.
- Aceite(Accept) quaisquer prompts se você os vir. Caso contrário, sua extensão personalizada do Chrome aparecerá junto com quaisquer outras que você tenha no canto superior direito do navegador.
Editando sua extensão do Chrome
Agora que sua extensão do Chrome pode ser usada, você pode fazer alterações para torná-la sua.
O arquivo styles.css controla como a extensão aparece, para que você possa ajustar o estilo geral da lista e alterar a cor ou o tipo da fonte. W3Schools é um dos melhores recursos para aprender sobre todas as coisas diferentes que você pode fazer com CSS .
Para mudar a ordem em que os sites são listados, adicionar ou mais sites ou remover sites existentes, edite o arquivo popup.html. Apenas certifique-se de manter suas edições apenas no URL e no nome. Todos os outros caracteres, como <li> e <html> , são obrigatórios e não devem ser alterados. O Tutorial HTML no W3Schools(HTML Tutorial on W3Schools) é um bom lugar para aprender mais sobre essa linguagem.
Related posts
Como baixar o instalador offline do Google Chrome (autônomo)
Como instalar e desinstalar extensões do Chrome
Como salvar guias no navegador Chrome
Como fazer o Chrome usar menos RAM e CPU
Como bloquear sites no Google Chrome
Como corrigir “DNS_probe_finished_bad_config” no Chrome
Como silenciar uma guia do navegador no Chrome, Safari, Firefox e muito mais
Como manter seu PC com Windows acordado sem tocar no mouse
Como realizar um teste de estresse da CPU
Como excluir favoritos no Chrome
Como adicionar música ao Google Slides
Como parar as notificações do Chrome e outros aborrecimentos do Chrome
Como corrigir a mensagem "Baixando o script de proxy" do Chrome
Alterar a localização da pasta de downloads no Google Chrome
Instalando plug-ins do GIMP: um guia de instruções
Como atualizar o Raspberry Pi
Revisão do Livro - O Guia Geek How-To para Windows 8
7 dicas técnicas de otimização de SEO para qualquer site
Como alterar a página inicial no Chrome e em qualquer navegador da Web
Adicionar o botão da barra de ferramentas de favoritos ao Google Chrome