Mostrando postagens com marcador firefox. Mostrar todas as postagens
Mostrando postagens com marcador firefox. Mostrar todas as postagens

sexta-feira, 4 de abril de 2008

Brincando de extensões com o chrome do Firefox

Desenvolver extensões para o Firefox é algo muito divertido. Mas há certas questões que nos deixam de cabelo em pé. Basicamente por falta de exemplos e tutoriais simples. No caso, eu procurava duas coisas: Como acessar o elemento html que foi clicado com o botão direito do mouse, e como copiar um determinado trecho selecionado para a área de transferências (clipboard).

Nessas horas então, nada melhor que analisar os códigos contidos no Chrome do Firefox. Descompactando os arquivos browser.jar e toolkit.jar, localizados no diretório ${FIREFOX_HOME}/chrome, podemos verificar diversos bons exemplos.

No arquivo browser.js do pacote browser.jar por exemplo, pude verificar que para acessar o elemento clicado com o botão direito basta utilizar a notação document.popupNode. O exemplo abaixo mostra de maneira simples um Xul e um Js de um item no menu do botão direito cuja única função é exibir a tag html do elemento clicado com o botão direito.

Xul:
<popup id="contentAreaContextMenu">
<menuitem id="itemMenuExibirTag" label="Exibir tag" oncommand="exibirTag()"/>
</popup>
Js:
function exibirTag() {
alert( document.popupNode.tagName );
}
Já para implementar a função de copiar para a área de transferência, verifiquei no arquivo browser.xul do pacote browser.jar que os menus de copiar do próprio navegador chamavam a função goDoCommand com o parâmetro cmd_copy. Encontrei essa função no arquivo globalOverlay.js do pacote toolkit.jar. Havia nele um comentário informando que a função era apenas para manter compatibilidade com versões antigas, e realmente a única coisa que ela fazia era repassar a função para o método doCommand da classe CommandUpdater. Abaixo mostro um exemplo de item que seleciona todos os itens de uma página e copia o conteúdo para o clipboard:

Xul:
<popup id="contentAreaContextMenu">
<menuitem id="itemMenuCopiarPagina" label="Copiar pagina" oncommand="copiarPagina()"/>
</popup>
Js:
function copiarPagina() {
CommandUpdater.doCommand('cmd_selectAll');
CommandUpdater.doCommand('cmd_copy');
}

quarta-feira, 19 de março de 2008

GreaseMonkey para feed do InfoBlogs no GoogleReader

Quem assina o feed do InfoBlogs deve ter o mesmo problema que eu. O link deste feed não é para o post em si, ele é para uma cópia do post na página do próprio InfoBlogs. Particularmente acho isso irritante, pois só costumo entrar no blog do autor quando o post é interessante e desejo comentá-lo. Nesse caso, preciso aguardar o carregamento (que é bem lento) da página do InfoBlogs para só depois poder clicar e ver o post original, onde eu posso comentar.

Para resolver esse problema implementei um script no GreaseMonkey para remontar a página do GoogleReader com os links corretos. Para quem não sabe o GreaseMonkey é uma extensão do Firefox, o melhor navegador existente na atualidade, que permite ao usuário configurar scripts para serem rodados ao término do carregamento de uma determinada página. Eu falei brevemente dele no post em que falo sobre as extensões do Firefox essenciais para um desenvolvedor web, e agora com este exemplo ficará mais fácil entender como ele funciona.

O código do script encontra-se abaixo. O que ele faz é verificar a cada 3 segundos se houve alguma alteração de estado no GoogleReader. Para então mudar os links caso haja necessidade. Só há uma ressalva, ele não funciona para o modo de visualização de lista, só a visão expandida. O motivo é que não gosto da visualização em lista e portanto não me interessei em testar nela :P
// ==UserScript==
// @name GoogleReaderGM
// @namespace http://www.google.com/reader
// @include http://www.google.com/reader/*
// ==/UserScript==

function GoogleReaderGM() {}
GoogleReaderGM.prototype = {
isChanged: function() {
var e = document.getElementById("entries");
var ds = e.getElementsByTagName("div");
if( this._oldUrl != window.location.href ) {
this._oldUrl = window.location.href;
this._oldQtds = ds.length;
return true;
}
if( this._oldQtds != ds.length ) {
this._oldQtds = ds.length;
return true;
}
return false;
},
mudaLinksInfoBlogs: function() {
if( this.isChanged() ) {
var e = document.getElementById("entries");
var as = e.getElementsByTagName("a");
for( i=0; i<as.length; i++ ) {
var a = as[i];
if( a.className=="entry-title-link" && a.href.indexOf("www.infoblogs.com.br/view.action")!=-1 ) {
a.href = a.href.replace("view","redir/go");
}
}
}
}
}

var gr = new GoogleReaderGM();

setInterval(function() { gr.mudaLinksInfoBlogs(); }, 3000);
Como pode ser visto eu defino como um comentário JavaScript em quais páginas esse script será executado. No caso, todas aquelas abaixo de http://www.google.com/reader.

O interessante é que se você quiser pode utilizar esse código como template para executar outras funcionalidades no GoogleReader. Basta adicionar mais alguma função, e utilizando isChanged você fica sabendo se alguma entrada nova apareceu na área que exibe as entradas dos feeds. Isso é claro se você utilizar a visão expandida (Expanded view), pois o método isChanged só foi feito pra ela.

segunda-feira, 7 de maio de 2007

Busca com OpenSearch no Firefox e IE7

Recentemente fiz texto explicando como disponibilizar a busca de seu site no Firefox. Semana retrasada aqui no trabalho utilizamos uma nova forma de disponibilizar a nossa busca nos navegadores dos usuário. Dessa vez, funciona tanto para Internet Explorer 7, quanto para o Firefox.

Isso foi feito utilizando o padrão OpenSearch. E é bem similar ao padrão do artigo anterior, veja abaixo o código do XML que é preciso disponibilizar:
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Programando sem cafeina</ShortName>
<Description>Blog sobre tecnologia principalmente para a area de desenvolvimento de sistemas</Description>
<Url type="text/html" template="http://programandosemcafeina.blogspot.com/search/label/{searchTerms}"/>
<LongName>Programando sem cafeina - Blog sobre tecnologia principalmente para a area de desenvolvimento de sistemas</LongName>
<Image height="64" width="64" type="image/png">http://programandosemcafeina.blogspot.com/imagems/busca-openserach.png</Image>
<Image height="16" width="16" type="image/png">http://programandosemcafeina.blogspot.com/imagems/busca-openserach.png</Image>
<Language>pt-br</Language>
<OutputEncoding>UTF-8</OutputEncoding>
<InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

Esse XML tem apenas as opções básicas, para saber o restante das opções visite a página: Descrição do documento OpenSearch.

Continuando então, para disponibilizar a busca não basta apenas colocar o XML lá no seu servidor, é preciso oferecer um link com um código javascript que adicione a busca na barra de ferramentas do navegador do usuário. Veja o exemplo abaixo de como fazer isso:
<a href="javascript:void(window.external.AddSearchProvider('http://programandosemcafeina.blogspot.com/minhabusca.xml'));">
Adicionar busca do meu blog
</a>

Viu como é fácil? Quem quizer testar para ver como ficou a busca para o Globo Vídeos basta adicioná-la clicando em Adicionar busca do Globo Vídeos em seu navegador. É bom lembrar que em navegadores muito antigos isso não funciona. No Internet Explorer 6 mesmo não funciona.

terça-feira, 10 de abril de 2007

Extensões do Firefox para desenvolvedores web

Compartilho aqui com vocês os pluggins, agora chamados de addons, que utilizo no meu Firefox 2. São extensions para auxiliar a depuração de sistemas e que não podem faltar a um desenvolvedor web.
  • Firebug - Melhor pluggin para debugar javascript: Exibe exatamente quando e onde um erro ocorre. Rastrea as chamadas ajax e permite analise do html e css da página.
  • GreaseMonkey - Permite definir códigos javascript sempre que determinadas páginas forem abertas. Muito útil para exibir funcionalidades beta em um determinado site somente para os usuários que você escolher, ou para reconfigurar páginas que você costuma visitar.
  • WebDeveloper - Diversas ferramentas para desenvolvedores web. A que mais utilizo é a manutenção de cache e de cookies. Mas também é interessante a de visualizador de campos de formulários.
  • JSView - Cria um atalho para exibir todos os arquivos js e css que uma página carrega, inclusive aqueles lidos dinamicamente. Depois de instalar ele é preciso habilitar a opção de exibir seu icone na barra de status do firefox.
  • Live HTTP Headers - Exibe todas as requisições HTTP que o Firefox faz. Permite filtrar para exibir arquivos de imagem, flash, css entre outros ou não;
  • Aardvark - Permite analisar o código html gerado na página, inclusive o que foi criado apartir de javascript. Basta apertar com botão direito, e no menu selecionar "Start Aardvark", que os elementos html serão destacados. Apertando a tecla h verifica-se todas as opções do addon.
  • IE Tab - Veja paginas no Firefox como se estivesse no Internet Explorer. Ideal para pessoas como eu que preferem testar em outra aba da raposa ao invés de abrir uma janela do IE.
  • Resizeable Form Fields - Faz com que alguns campos de formulários possam ser redimensionados.
  • del.icio.us - Cria dois botõezinhos do Delicious, um para acessar diretamente seus favoritos e outro para adicionar a página que você está visitando.
  • XPather - Adiciona um item no menu do botão direito que indica o XPath para acessar determinado elemento no html.
Alguns desses pluggins possuem macetes para funcionar. Não postei todos eles aqui por falta de tempo. Portanto se você tiver algum problema comente aqui o problema que, se caso eu tenha tido o mesmo, eu respondo com a solução.

segunda-feira, 9 de abril de 2007

A busca de seu site no firefox

ATENÇÃO: O seguinte artigo mostra como adicionar uma busca somente no Firefox. Para ver como adicionar em diversos navegadores, como o próprio Firefox e o Internet Explorer, utilizando o padrão OpenSearch abra o artigo Busca com OpenSearch no Firefox e IE7




Quer disponiblizar a busca de seu site ou blog direto no Firefox? Isso é fácil fácil, basta primeiro criar um arquivo src contendo um xml nos moldes do seguinte exemplo:
<search 
name="Titulo do site"
description="Descricao do site"
action="http://endereco.do.site/busca"
searchform="http://endereco.do.site/busca"
method="GET"
version="1.0">
<input name="q" user="">
</search>
<browser
update="http://endereco.do.site/busca-firefox.src"
updateicon="http://endereco.do.site/busca-firefox.png"
updatecheckdays="7">
</browser>


Calma calma, parece um descritor complicado mas não é. Primeiro na tag search devemos preencher o titulo do site e depois a descrição. O atributo action indica o executor da busca: um servlet, cgi, o que for, que receberá um determinado parâmetro de busca. O nome desse parâmetro é indicado na tag input.

A tag browser indica quando esses descritor deve ser atualizado e onde deve ser buscado. Veja que tem o endereço de um icone, atributo updateicon. É importante que o tamanho desse icone seja 16x16, caso contrário fica esquisitão.

Depois de criado seu e disponibilizado o descritor, basta colocar o link para que os usuários adicionem sua busca no firefox. Segue o exemplo do javascript que faz isso:
<a href="javascript:window.sidebar.addSearchEngine('http://endereco.do.site/busca-firefox.src','http://endereco.do.site/busca-firefox.png','Busca no meu site','png');">
Adiciona busca do meu site
</a>


Recentemente disponibilizamos aqui na globo.com a busca do nosso portal de vídeos, o Globo Vídeos, para ser colocado no firefox. Veja como fica:

Adiciona busca do Globo Vídeos