terça-feira, 29 de junho de 2010

Criando uma extensão do Google Chrome para o seu blogue

02:28 Pedro Churro Sem comentários

Aposto que quando os meus leitores viram a minha extensão do Google Chrome no post anterior, muitos ficaram com curiosidade em saber como fazia, é que, uma EXTENSÃO DO GOOGLE CHROME!? =O
E então, estou fazendo aqui um favor aos curiosos ensinando a fazer uma extensão para o seu blogue igualzinho ao meu.

1º de tudo,crie uma pasta com um nome qualquer, é nessa pasta que vamos guardar todos os nossos ficheiros.
Depois, abra o bloco de notas e cole o seguinte código:

{
"name": "O meu blogue",
"version": "1.0",
"description": "A extensão do meu blogue.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"http://meublogue.blogspot.com/feeds/posts/default"
]
}
As mudanças:
Na parte a vermelho, substitua pelo nome do seu blogue;
Na parte a laranja, insira a descrição da extensão do seu blogue (recomendo não usar palavras com acentos,pois a google trocará todos os caracteres por '?')
Na parte a azul, insira o endereço do seu blogue(URL).
Guarde esse ficheiro como manifest.json (ao guardar não se esqueça de por:
"Guardar com o tipo: todos os ficheiros") na mesma pasta dos arquivos.
Agora,vamos criar o ficheiro popup.html (com o bloco de notas), que vai conter o seguinte código:

<style>


body {

min-width:357px;
overflow-x:hidden;
font-family:Arial;

}
</style>
<body>
<h6>Posts recentes</h6>
<script>


function rp(json) {

document.write('<ul>');



for (var i = 0; i < numposts; i++) {

document.write('<li>');

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;



if (i == json.feed.entry.length) break;



for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}



posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";



if ("content" in entry) {

var postcontent = entry.content.$t;

} else if ("summary" in entry) {

var postcontent = entry.summary.$t;

} else

var postcontent = "";

var re = /<\S[^>]*>/g;

postcontent = postcontent.replace(re, "");

document.write(posttitle);



if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);



if (showpostsummary == true) {

if (postcontent.length < numchars) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);

}

}

document.write('</li>');

}

document.write('</ul>');



}

</script>



<script>

var numposts = 7;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

</script>



<script src="http://meublogue.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>





<Script Language='Javascript'>

<!-- HTML Encryption provided by iWEBTOOL.com -->

<!--

document.write(unescape('%3C%70%20%61%6C%69%67%6E%3D%22%72%69%67%68%74%22%3E%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6F%6E%74%2D%73%69%7A%65%3A%20%78%2D%73%6D%61%6C%6C%22%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%72%61%73%63%75%6E%68%6F%73%2D%62%6C%6F%67%67%65%72%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%32%30%31%30%2F%30%33%2F%70%6F%73%74%73%2D%72%65%63%65%6E%74%65%73%2D%6E%6F%2D%62%6C%6F%67%67%65%72%62%6C%6F%67%73%70%6F%74%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%57%69%64%67%65%74%20%50%6F%73%74%73%20%52%65%63%65%6E%74%65%73%3C%2F%61%3E%3C%2F%73%70%61%6E%3E%3C%2F%70%3E'));

//-->

</Script>
<div id='outras'>
<h6>Outras Postagens</h6>

<div id="random-posts"><script type="text/javascript">

quantidade = 5;

</script>



<script type='text/javascript'>

//<![CDATA[



// JavaScript Document

function getRandomPosts(json) {

var maxEntries = window.parent.quantidade;

var numPosts = json.feed.openSearch$totalResults.$t;

var indexPosts = new Array();

for (var i = 0; i < numPosts; ++i) {

indexPosts[i] = i;

}

indexPosts.sort(function() {return 0.5 - Math.random()});

if (maxEntries > numPosts) {

maxEntries = numPosts;

}

var container = document.getElementById('random-posts');

var ul = document.createElement('ul');

for (i = 0; i < maxEntries; ++i) {

var entry = json.feed.entry[indexPosts[i]];

var li = document.createElement('li');

var a = document.createElement('a');

a.title = entry.title.$t;

for (var j = 0; j < entry.link.length; ++j) {

if (entry.link[j].rel == 'alternate') {

a.href = entry.link[j].href;

break;

}

}

a.appendChild(document.createTextNode(entry.title.$t));

li.appendChild(a);

ul.appendChild(li);

}

container.appendChild(ul);

document.write('')

}//]]>

</script>

<script src="http://meublogue.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=getRandomPosts&max-results=999" type="text/javascript"></script>



<Script Language='Javascript'>

<!-- HTML Encryption provided by iWEBTOOL.com -->

<!--

document.write(unescape('%3C%70%20%61%6C%69%67%6E%3D%22%72%69%67%68%74%22%3E%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6F%6E%74%2D%73%69%7A%65%3A%20%78%2D%73%6D%61%6C%6C%22%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%72%61%73%63%75%6E%68%6F%73%2D%62%6C%6F%67%67%65%72%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%32%30%31%30%2F%30%34%2F%70%6F%73%74%73%2D%61%6C%65%61%74%6F%72%69%6F%73%2D%6E%6F%2D%62%6C%6F%67%67%65%72%62%6C%6F%67%73%70%6F%74%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%57%69%64%67%65%74%20%50%6F%73%74%73%20%41%6C%65%61%74%F3%72%69%6F%73%3C%2F%61%3E%3C%2F%73%70%61%6E%3E%3C%2F%70%3E'));

//-->

</Script>



</div>
</div>
</body>

Substitua  meublogue.blogspot.com por o endereço do seu blogue. Guarde na pasta dos mesmos arquivos.(não se esqueça da regra anterior: Guardar com o tipo: Todos os ficheiros)
Agora crie uma imagem .png (é obrigatório ser png) na mesma pasta dos arquivos.
Quando tiver criado todos os ficheiros na pasta ,zipe essa pasta (crie um ficheiro .zip com os ficheiros da pasta).
Agora é só publicar!
Entre em
  https://chrome.google.com/extensions/?htl=pt
e onde diz

 É programador?
Publicar as suas extensões
 Clique em Publicar as suas extensões. Se não tiver iniciado sessão no Google, será redereccionado para a página de login, que depois de fazer login vai ser redereccionado para a página das extensões =P.
Na página das, ou como se chama lá, na "Developer Dashbord" clique no botão que diz "Add new item"
Depois será levado para a página em que vai fazer upload da pasta .zip .
Clique em "Choose File" , escolha o ficheiro e clique em "Upload".
Espere que aquilo carregue...
E depois você pode fazer o que quizer. Em "Edit logo" você faz upload do logo que vai aparecer na página de download. Em "Languangue" você põe a sua língua. Em "detailed description" você põe uma descrição mais completa. Em "Link to website for your extension" você mete o endereço do seu blogue. Em "Link to support & FAQ for your extension" você mete a página de contacto do seu blogue. Em "Link to YouTube video or Google Docs Presentation" (opcional) você mete link do video (do YouTube) ou da apresentação (do Google Docs) que possa servir de introdução á sua extensão.
Em Upload screenshots  (GIF, JPEG, or PNG) (opcional) você mete fotos relacionadas á sua extensão, recomendo que meta o logo do seu blogue, o print do seu blogue e o print da extensão (você depois de tiver pronto instala e tira o print da extensão depois na "Developer Dashbord" você clica no "Edit" da sua extensão e faz upload do print).
E pronto, para guardar, clique em "Publish" e a sua extensão está pronta a ser instalada!
Espero que os curiosos tenham gostado deste tutorial (e os outros também =P) e que voltem sempre ao meu blogue!
PS.: Não se esqueça de comentar neste post enviando o link da sua extensão para eu ver e talvez instalar :D

Tags:

0 comentários:

Postar um comentário

Gostou? Tem alguma dúvida? Então comente! Respeitando as seguintes regras:
Pedidos de parceria faz-se na página de parcerias;
Não adiciono no MSN;
SPAM é totalmente proibido.
Nas dicas e nos tutoriais
Leia com atenção,não leia apenas o título;
Relatório de erros de códigos são bem-vindos;
Se precisa de atendimento avançado,entre em contato.

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | Edited by Pedro Churro | Free Samples