Esse fim de semana estava navegando na internet baixando musicas, etc e me deparei mais uma vez com aqueles famosos protetores de link's que invertem a url. Pensei em fazer uma aplicação rápida em Delphi mesmo para inverter a url previamente invertida pelo protetor, porem com isso eu teria que toda vez abrir o programa copiar a url, colar no programa, clicar em inverter, copiar o resultado e colar na url do navegador.
Achei que continuaria dando muito trabalho e pela extensão posso ter vários benefícios como inverter diretamente da url atual do navegador, navegar diretamente na url invertida e o principal estudar a criação de uma extensão para o navegador.
Bom chega de conversa vamos codificar:
1º Para criarmos umas uma extensão crie uma pasta chamada Revert Link em algum lugar de seu computador, eu particularmente criei em "C:\Projetos\Chrome Extensions\Revert Link"
2º Crie um arquivo de texto chamado manifest.json este arquivo que contem as instruções e configurações de nossa extensão como icone, descrição, recursos que poderá utilizar, etc.
3º Vamos escrever nosso arquivo como abaixo:
{
"name": "Revert Link",
"version": "1.0",
"description": "Revert Url from pages in the current url address bar!",
"permissions": ["tabs"],
"browser_action": { "default_icon": "icon.png", "popup": "revertLink.html" },
"icons":{ "128":"icon_128.png" }
}
Como já deve ter notado pela extensão do arquivo que nele precisamos utilizar notação json e as partes que acredito que precisem de explicação são os parâmetros: permissions e browser_action sendo que o primeiro define quais recursos do browser sua extensão poderá utilizar e no nosso caso precisamos acessar as funções de abas do chrome (tabs), já o segundo parâmetro podemos configurar as ações que serão implementadas por nossa extensão sendo assim implementaremos a ação popup que ao clicar em nossa extensão sera exibido um poput com a página revertLink.html que criaremos em seguida.
4º Vamos criar nossa página revertLink.html com o seguinte conteúdo:
<!doctype html>
<!--
* Copyright (c) 2011 Diego M. Garcia. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file.
* The author can be reached at http://www.dmgarcia.com.br
-->
<html>
<head> </head>
<script language="javascript">
function reverterLink(theForm){
chrome.tabs.getSelected(null, function(tab) {
var newUrl = "";
for (i = tab.url.length; i >= 0; i--){
newUrl = newUrl + tab.url.charAt(i);
}
resField = theForm.elements["revertLinkResult"];
resField.value = newUrl;
console.log("current url:"+tab.url); //Registra no console de debug do chrome
console.log("new url:"+newUrl);
});
}
function navigateTo(theForm){
resField = theForm.elements["revertLinkResult"];
if (resField.value != ""){
chrome.tabs.create({url:resField.value},null);
}
}
</script>
<body style="overflow:hidden; min-width:350px; background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#DDD));">
<div id="mainCtnr">
<form name="revertLink" id="reverseLinkForm" action="#">
<img src="logo.png" style="border:none; width:300px; height:100px;" />
<br />
<input type="button" name="submit" value="Reverter Link Atual" onclick="reverterLink(this.form);" />
<input name="revertLinkResult" type="text" value="" style="min-width:350px" />
<input type="button" name="navigate" value="Ir para página" onclick="navigateTo(this.form);" />
<br />
<br />
</form>
<a href="#" name="navigateToAuthorSite" onclick="chrome.tabs.create({url:'http://www.dmgarcia.com.br'});">por: Diego M. Garcia </a>
</div>
</body>
</html>
Como vocês podem ver o html é bem simples com duas funções em javascript uma delas utilizamos para pegar a url da aba atual reverter o link com um for e colocar o resultado no input text de resultado, a outra utilizamos para navegar para o site previamente invertido.
Para saber mais quais funções do chrome estão disponíveis para utilização dentro da extensão acesse http://code.google.com/chrome/extensions/docs.html
5º Agora precisamos colocar nossos icones e imagens no mesmo diretório, no meu caso utilizei três imagens duas para icones e uma para logo utilizado pelo html.
6º É hora de carregar nossa extensão no chrome vá na ferramenta do chrome opção Ferramentas->Extensões, expanda a opção Modo do Desenvolvedor clique em carregar Extensão em Desenvolvimento e selecione a pasta onde você criou sua extensão, se você fez tudo corretamente sua extensão aparecera ao lado da barra de endereços do chrome.
7º Caso você queira distribuir sua extensão basta então clicar em Compactar Extensão, selecionar a pasta da extensão e automaticamente sera gerado um arquivo com a extensão crx que você pode publicar em seu blog ou no Chrome Web Store.
Uma dica para quando você estiver desenvolvendo extensões é de clicar com o botão direito de sua extensão e selecionar a opção Inspecionar pop-up para entrar no painel de depuração de sua extensão.
O código desta extensão pode ser baixado clicando aqui. E a extensão pronta para ser instalada pode ser baixada aqui.
Bom espero que tenham gostado e qualquer duvida ou sugestão postem aqui.
Grande abraço,
Diego M. Garcia
Claro e objetivo. Valeu pelo artigo, me ajudou muito.
ResponderExcluirAbraços.
Valeu Carlos Abraço.
ResponderExcluirpor favor me ajude, eu tava fazendo um tema para o google chrome, ai nao entendi mt e falei pra um amigo fazer, ele fez tudo certinho, mais não consigo fazer a parte da extesão desenvolvimento
ResponderExcluiro que eu faço ?
Camila o que você não consegue fazer ? Detalhe mais para que eu possa entender e te ajudar.
ResponderExcluirAbraço,
Diego Garcia.