#1Sáb 10 Ago - 16:16
[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
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
passamos como argumento o icone (vou usar a mesma imagem q usei na extensao anterior)
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
bom galera e isso ^^
by hfts315
[Tens de ter uma conta e sessão iniciada para poderes visualizar 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"
}
- Código:
{
"manifest_version" : 2 ,
"name" : "fts tutorial" ,
"version" : "1.0" ,
"description" : "tutorial by hfts315 XD" ,
"app" : {
"urls" : ["http://www.google.com.br"]
}
}
- 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"
}
}
}
- 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"
}
}
- 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 ^^"
}
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"
}
}
- 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"
}
}
- 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>
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
bom galera e isso ^^
by hfts315