InícioPortalCalendárioFAQBuscarMembrosGruposRegistrar-seConectar-se
Últimos assuntos
» Que presente você daria a pessoa acima?
Dom Set 18, 2016 11:25 pm por Sasuke

» [tutorial] minecraft: computercraft - 1º parte
Qui Dez 17, 2015 9:07 am por kodo no kami

» cade todo mundo?
Dom Nov 01, 2015 11:59 am por Sasuke

» O Melhor Anime/Mangá
Qui Maio 28, 2015 8:17 am por kodo no kami

» [artigo] o que é deepweb
Qui Maio 21, 2015 5:47 am por kodo no kami

» Come ou vomita
Ter Maio 19, 2015 2:17 am por Hellman's

» Oque á de baixo da mesa?
Ter Maio 19, 2015 2:16 am por Hellman's

» Chroma Squad- A new heroes
Seg Maio 18, 2015 12:30 am por Mestre

» [tutorial] desligando o pc de forma automatica
Sex Maio 15, 2015 6:18 am por kodo no kami

Tools

musica no perfil nome ninja

Buscar
 
 

Resultados por:
 

 


Rechercher Busca avançada
Parceiros
Fórum grátis

Compartilhe | 
 

 [tutorial] criar extensao do chrome

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
kodo no kami
Admin
Admin
avatar

Mensagens : 60
Pontos : 140
Reputação : 4
Data de inscrição : 09/03/2015
Idade : 25
Localização : mov eax,315; push eax; call kodo

MensagemAssunto: [tutorial] criar extensao do chrome   Dom Mar 15, 2015 5:06 pm

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)




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"]
}


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



bom galera e isso ^^

by kodo no kami




Citação :
Conheça o sistema e manipule ele, se limite ao sistema e seja manipulado por ele ~kodo no kami

Voltar ao Topo Ir em baixo
Ver perfil do usuário
 
[tutorial] criar extensao do chrome
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Fazendo seu aplicador de Static Grass - Tutorial em português
» Tutorial, como potar vídeos a partir do youtube !
» Tutorial diorama carro !
» Tutorial de moldagem em borracha de silicone
» Minicraft 727-200 Iraqi Airways FINALIZADO!

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: Outros :: Informatica :: Programação / Webdesign-
Ir para: