Se você é um usuário do Chrome, é provável que esteja usando uma ou mais extensões. Seja para bloquear anúncios ou para adicionar recursos, as extensões adicionam bastante utilidade ao navegador. Então, não seria legal se você pudesse criar sua própria extensão do Chrome? Isso é exatamente o que eu vou mostrar aqui.
Consulte também o nosso artigo Os melhores Chromebooks com tela sensível ao toque
Como mantenho sites para clientes, gosto de saber como cada site funciona em relação ao carregamento da página. Como o Google agora usa tempos de carregamento em seus cálculos de SEO, saber o quão rápido ou lento uma página é carregada é uma métrica importante na otimização de um site. Isso é ainda mais verdadeiro ao otimizar um site para celular. Ele deve ser leve, rápido e carregado, sem erros, para obter uma pontuação alta no Google.
Adicione a isso, o fato de uma pessoa empreendedora do SitePoint também usar o mesmo site que eu para verificar a velocidade da página, o GTmetrix, e desenvolveu uma extensão do Chrome para verificá-la, pensei em fazer o mesmo e orientá-lo.
Extensões do Chrome
As extensões do Chrome são mini programas que adicionam recursos ao navegador principal. Eles podem ser tão diretos quanto o que criaremos ou tão complicados quanto gerenciadores de senhas seguros ou emuladores de script. Escritos em idiomas compatíveis, como HTML, CSS e JavaScript, são arquivos independentes que ficam ao lado do navegador.
Por necessidade, a maioria das extensões são simples execuções de clique no ícone que executam uma determinada ação. Essa ação pode literalmente ser qualquer coisa que você queira que o Chrome faça.
Crie sua própria extensão do Chrome
Com um pouco de pesquisa, você pode ajustar sua extensão para fazer o que quiser, mas eu gosto da ideia de uma verificação de velocidade de um botão.
Normalmente, quando você verifica a velocidade do site, cole o URL da página em que está no GTmetrix, Pingdom ou qualquer outro local e clique em Analyze. Leva apenas alguns segundos, mas não seria legal se você pudesse selecionar um ícone no navegador e fazer isso por você? Após trabalhar neste tutorial, você poderá fazer exatamente isso.
Você precisará criar uma pasta no seu computador para manter tudo dentro. Crie três arquivos vazios, manifest.json, popup.html e popup.js. Clique com o botão direito dentro da sua nova pasta e selecione Novo e arquivo de texto. Abra cada um dos seus três arquivos no seu editor de texto de sua escolha. Verifique se o popup.html está salvo como um arquivo HTML e o popup.js está salvo como um arquivo JavaScript. Faça o download deste ícone de amostra do Google também apenas para os fins deste tutorial.
Selecione manifest.json e cole o seguinte:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Use o GTmetrix para analisar a velocidade de carregamento da página de um site", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "permissões":}
Como você pode ver, atribuímos a ela um título e uma descrição básica. Também chamamos uma ação do navegador que inclui o ícone que baixamos do Google que aparecerá na barra do navegador e em popup.html. Popup.html é o que é chamado quando você seleciona o ícone de extensão no navegador.
Abra o popup.html e cole o seguinte.
Analisador de velocidade de página usando GTMetrix
Popup.html é o que é chamado quando você seleciona o ícone de extensão no navegador. Nós demos um nome a ele, rotulamos o pop-up e adicionamos um botão. Selecionar o botão chamará popup.js, que é o arquivo que concluiremos em seguida.
Abra o popup.js e cole o seguinte:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('clique', função () {chrome.tabs.getSelected (null, function (tab) {d = documento; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( Você pode usar o seguinte comando: 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, falso);}, falso);
Não pretendo saber JavaScript, e é por isso que foi útil o SitePoint já ter o arquivo no lugar. Tudo o que sei é que ele diz ao GTmetrix para analisar a página na guia atual do Chrome. Onde diz 'chrome.tabs.getSelected', a extensão pega o URL da guia ativa e o insere no formulário da web. Isso é tanto quanto eu posso ir.
Testando sua extensão do Chrome
Agora que temos a estrutura básica em vigor, precisamos testar para ver como ela funciona.
- Abra o Chrome, selecione Mais ferramentas e extensões.
- Marque a caixa ao lado do modo Desenvolvedor para habilitá-lo.
- Selecione Carregar extensão descompactada e navegue até o arquivo que você criou para esta extensão.
- Selecione OK para carregar a extensão e ela deve aparecer na sua lista de extensões.
- Marque a caixa ao lado de Ativado na lista e o ícone deve aparecer no seu navegador.
- Selecione o ícone no navegador para que o pop-up apareça.
- Selecione o botão, verifique esta página agora!
Você deve ver a página sendo verificada e um relatório de desempenho do GTmetrix. Como você pode ver no meu próprio site na imagem principal, tenho um pouco de trabalho a fazer para acelerar meu novo design!
Levando extensões adiante
Criar sua própria extensão do Chrome não é tão difícil quanto pode parecer. Embora certamente tenha ajudado a começar sabendo um pouco de código, existem centenas de recursos online que mostrarão isso. Além disso, o Google possui um enorme repositório de informações, tutoriais e orientações que ajudarão. Usei esta página do site do desenvolvedor do Google para me ajudar com esta extensão. A página mostra todas as partes da criação da extensão e fornece o ícone que usamos anteriormente.
Com bastante pesquisa, você pode criar extensões que fazem praticamente tudo o que o navegador é capaz. Algumas das melhores extensões na loja do Chrome são de indivíduos e não de empresas, provando que você realmente pode criar suas próprias.
Todos os créditos a John Sonmez no SitePoint pelo guia original. Ele fez o trabalho duro, eu apenas o reorganizei um pouco e o atualizei um pouco.
Você criou sua própria extensão do Chrome? Deseja promover ou compartilhar? Deixe-nos saber abaixo se você faz!
