[tutorial] criar extensao do chrome

Postagem de conteúdo sobre outras linguagem web
Post Reply
User avatar
Kodo no Kami
Admin
Admin
Posts: 680
Joined: Fri Jan 02, 2015 1:56 pm
Contact:

[tutorial] criar extensao do chrome

Post by Kodo no Kami » Mon Mar 16, 2015 9:27 am

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)

Image

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

Code: Select all

{
	"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

Code: Select all

{
	"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

Code: Select all

{
	"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)

Code: Select all

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

Code: Select all

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

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

Code: Select all

{
	"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)

Code: Select all

{
	"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

Code: Select all

{
	"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

Code: Select all

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

Image

bom galera e isso ^^

by kodo no kami
Image

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

meu perfil yahoo

Post Reply

Return to “Outros”