seja bem vindo ao forum eof, caso nao seja cadastrado se cadastre para poder visualizar todo o conteudo ^^

Você não está conectado. Conecte-se ou registre-se

 » Programação Web » Outros » [tutorial] criar extensao do chrome

[tutorial] criar extensao do chrome

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1 [tutorial] criar extensao do chrome em Sab Ago 10, 2013 3:58 pm

Kodo no Kami

avatar
master
master
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)

[Você precisa estar registrado e conectado para ver esta imagem.]


Criando o APP

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"]
}
[Você precisa estar registrado e conectado para ver 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

Testando e Compactando

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/)

Criando outro tipo de extensao

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 *-*

[Você precisa estar registrado e conectado para ver esta imagem.]

bom galera e isso ^^

by hfts315


_________________ASSINATURA_________________
[Você precisa estar registrado e conectado para ver esta imagem.]
[Você precisa estar registrado e conectado para ver esta imagem.]

Contato:
Spoiler:

Contato:
Facebook: [Você precisa estar registrado e conectado para ver este link.]
Skype: hackerfts315
http://endoffile.umforum.net

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum