Press "Enter" to skip to content

Escrevendo uma extensão para o Chrome

Apesar de ter quase todos os posts voltados a .NET, estudo outras tecnologias, e esses dias minha namorada reclamou daquelas URL´s invertidas, e já que ela usa Chrome, porque não aprender a criar uma extensão para o Chrome e já faço algo útil para ela? 😀

Para quem estava abdusido ou em coma nos últimos anos, o Chrome é o browser criado pelo Google, considero o melhor browser na atualidade, da um show em qualquer outro, e ele possui extensões, podemos criar ou pegar extensões na Web Store, com isso conseguimos adicionar mais funcionalidades ao browser.

Chega de blablabla e vamos ao que interessa!

Criar as extensões é simples, utilizei HTML + JavaScript, caso fosse necessário um layout mais bonitão, o esquema é CSS! Então tirando um arquivo de manifesto no formano JSON, é necessário ter domínio das tecnologias básicas de desenvolvimento para Web.

Começando a extensão, criei um arquivo chamado manifest.json onde vamos colocar as informações sobre a nossa extensão, os ícones utilizados, também podemos defnimir algumas permissões, nesse caso defini que posso acessar as tabs do Chrome, mais informações sobre as possibilidades de configuração do manifesto, segue o código do manifest.json.

{
    "name" : "Invert Link",
    "version" : "1.0",
    "description" : "Mostra um popup com o link invertido",
    "icons" : {
        "16" : "icon16.png",
	"48" : "icon48.png",
	"128" : "icon128.png"
    },
    "browser_action" : {
        "default_icon" : "icon16.png",
        "popup" : "popup.html"
    },
    "permissions" : [
		"tabs"
    ]
}

Para quem não conhece JSON veja mais aqui, o arquivo é simples, detalhe para a configuração do arquivo popup.html que será aberto quando o usuário clicar no botão da extensão.

Falando no arquivo popup.html vamos ao código, esse é realmente simples.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        html, body
        {
            width: 700px;
        }
    </style>
    <script src="invertlink.js" type='text/javascript'></script>
</head>
<body>
    <div id="linkinvertido"></div>
</body>
</html>

Agora falta o último arquivo, que é o invertlink.js que possui a lógica da nossa extensão, segue o código:

(function (window, document) {

    window.onload = function () {
        var resultado = document.getElementById("linkinvertido");

        chrome.tabs.getSelected(null, function (tab) {
            resultado.innerHTML = inverterLink(tab.url);
        });

        function inverterLink(link) {
            return link.split("").reverse().join("");
        }
    };

})(window, document);

O código também é simples, só criei um método que recebe uma string e inverte o texto, e utilizo o método da API do Chrome chrome.tabs.getSelected(), onde eu pego a tab ativa no momento, e depois tenho acesso a URL informada tab.url.

Para testar a extensão é simples, na janela de extensões do Chrome é só habilitar o modo desenvolvedor, e apontar para uma extensão em desenvolvimento.

Agora que está tudo pronto, é só testar e ver a URL invertida mostrada na janela da extensão.

Está ai, de uma forma simples e rápida é possível adicionar funcionalidades no Chrome, ainda não está na Chrome Store então se alguém quiser instalar o plugin é só baixar os arquivos =D.

Abraços e até o próximo post.

 

 

 

  • Rafael Zaccanini

    Isto é mto legal msm….há algum tempo atrás fiz um para acompanhamento de pedidos, onde era retornado via webservice um xml com informações sobre os pedidos e exibidos na extensão  !!

    Parabéns cara, isso é show e bastante útil 🙂

  • Eu tbm já  fiz uma, usei jQuery para escrever mais fácil 😛

  • Bacana o artigo, tinha dado uma olhada e pereceu bem simples de fazer. Ia perguntar se daria pra utilizar jquery mas um dos comentários abaixo já respondeu.

    Valeu por compartilhar,

    • Sim, é bem simples, vc tem que ter o script do jquery local, na mesma pasta que seu arquivo de extensão do chrome. Isso também serve para css e etc….

  • Anonymous

    Show cara!

  • Guilherme Velloso

    Muito legal!
    Estou a dias procurando por um tutorial ou fonte de como exibir notificações do facebook, tipo “Você tem (5) Notificações e (2) Mensagens “. E que a cada notificação uma notificação no desktop seja exibida, mas não encontrei nada parecido…nem mesmo como exibir as notificações de forma simples. Não sou programador, estou iniciando então está bem complicado..kkkk

  • Leandro

    era de se prever que o zé bosta tivesse deletado o arquivo de exemplo do sky drive. Mas foda-se….