[tutorial] criar extensao do chrome

bom galera nesse tutorial vou ensinar como criar extensao para o chrome, o navegador chrome permite criaçao de pelo menos 2 tipos de extensao, uma é o app q sao aquelas quando abre uma nova aba, e a outra sao as que fica em cima perto da url (deve existir outras alem dessas duas)

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]



para começar vamos criar a extensao app que é aquela que fica embaixo, primeiro criamos uma pasta (a pasta tem q ta vazia pq quando compactarmos ela vai compactar tudo q tiver dentro dela), depois crie um arquivo chamado "manifest.json" dentro dela, o arquivo manisfest sera o arquivo base ele que vai definir oq vai ser a extensao as permissoes, icones etc, nesse manifest temos q definir 4 atritubos padroes  q nao pode faltar q sao "manifest_version", "name", "version","description", no manifest_version agente coloca o numero 2, no name colocamos o nome da extensao no caso vou colocar "fts tutorial", na version colocamos a versao da extensao no caso eu coloquei "1.0", por fim o description q é nada mais nada menos q a descriçao do mesmo, abaixo podemos ver como e a estrutura do manifest.json

Código:

{
   "manifest_version" : 2 ,
   "name" : "fts tutorial" ,
   "version" : "1.0" ,
   "description" : "tutorial by hfts315 XD"
}

agora criamos um atributo chamado app e dentro dele criamos outro chamado "urls", no atributo urls colocamos a url onde vai ser redirecionado

Código:

{
   "manifest_version" : 2 ,
   "name" : "fts tutorial" ,
   "version" : "1.0" ,
   "description" : "tutorial by hfts315 XD" ,
   "app" : {
      "urls" : ["http://www.google.com.br"]
   }
}

colocamos outro atributo chamado launch dentro dele colocamos outro chamado "web_url" dentro dele colocamos denovo a url onde vai ser redirecionado

Código:

{
   "manifest_version" : 2 ,
   "name" : "fts tutorial" ,
   "version" : "1.0" ,
   "description" : "tutorial by hfts315 XD" ,
   "app" : {
      "urls" : ["http://www.google.com.br"],
      "launch" : {
         "web_url" : "http://www.google.com.br"
      }
   }
}

ta pronta a nossa extensao, mais antes vamos fazer uma pequena melhoria nela, colocar icones e ativar duas permissoes para evitar problemas, criamos outro atributo fora do app chamado "icons" dentro desse atributo criamos outro chamado "128" e colocamos o nome de uma imagem (a imagem tem q ter o tamanho 128x128 e tem q estar dentro da pasta)

Código:

{
   "manifest_version" : 2 ,
   "name" : "fts tutorial" ,
   "version" : "1.0" ,
   "description" : "tutorial by hfts315 XD" ,
   "app" : {
      "urls" : ["http://www.google.com.br"],
      "launch" : {
         "web_url" : "http://www.google.com.br"
      }
   },
   "icons" : {
      "128" : "fts.jpeg"
   }
}

agora as permissoes para isso criamos um atributo chamado "perimissions" e passamos para ele essas duas ["notifications","unlimitedStorage"]

Código:

{
   "manifest_version" : 2 ,
   "name" : "fts tutorial" ,
   "version" : "1.0" ,
   "description" : "tutorial by hfts315 XD" ,
   "app" : {
      "urls" : ["http://www.google.com.br"],
      "launch" : {
         "web_url" : "http://www.google.com.br"
      }
   },
   "icons" : {
      "128" : "fts.jpeg"
   },
   "permissions" : ["unlimitedStorage","notifications"]
}

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

a permissao e necessaria para poder manipular determinadas coisas como historio (history), cookie (cookies), abas (tabs) entre outras permiçoes sem elas nao poderia manipular os mesmos


para testar va em configuraçao (para isso aperte no ultimo icone do lado da url), aperte em configuraçoes, e depois extensao (ou va nessa url "chrome://extensions/", vai ter um botao chamado "Modo do desenvolvedor" se ele estiver desmarcado voce aperta nele, vai abrir dois botoes "carregar extensao expandida" e "compactar extensao", para instalar sua extensao sem ela esta compactada vc aperta no "carregar extensao expandida" e localize a pasta dela e pronto (no caso da extensao anterior basta abrir uma nova aba para visualizar ela)

para compactar basta apertar em "compactar extensao" localizar a pasta dela e pronto vai gerar uma arquivo compactado to tipo crx (para instalar ela compactada basta arrasta a mesma pra cima no navegador na aba chrome://extensions/)


para agente criar as extensao q fica perto da url e muito mais facil, para começar criamos outro pasta e outro arquvio manifest.json, agora criamos os atributos padroes

Código:

{
   "manifest_version" : 2,
   "name" : "fts tutorial 2",
   "version" : "1.0",
   "description" : "tutorial extensao 2 ^^"
}

agora usamos o atributo "browser_action" dentro dele usamos o atributo "default_icon"
passamos como argumento o icone (vou usar a mesma imagem q usei na extensao anterior)

Código:

{
   "manifest_version" : 2,
   "name" : "fts tutorial 2",
   "version" : "1.0",
   "description" : "tutorial extensao 2 ^^",
   "browser_action" : {
      "default_icon" : "fts.jpeg"
   }
}

agora vamos criar uma pagina html na pasta (no meu caso criei uma chamada fts.html), e colocamos um atributo chamado "default_popup" e atribuimos o nome da pagina

Código:

{
   "manifest_version" : 2,
   "name" : "fts tutorial 2",
   "version" : "1.0",
   "description" : "tutorial extensao 2 ^^",
   "browser_action" : {
      "default_icon" : "fts.jpeg",
      "default_popup" : "fts.html"
   }
}

meu html foi bem simples

Código:

<html>
<head>
   <style type="text/css">
      body{width: 550px; height: 100px; background-color: black; color: red; text-align: center}
   </style>
</head>
<body>
   autor: <font color=blue>hfts315</font>
   <img src="http://i.imgur.com/qQzHp.png">
</body>
</html>


pronto terminamos agora so testar *-*

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

bom galera e isso ^^

by hfts315