19 Feb 2006
UserScript para o ML
Quem vem acompanhando meus blogs (este e o Lucrando na Rede) sabe que ando envolvido na tarefa de criar um sistema de banners contextuais para os MercadoSócios (o programa de afiliados do Mercado Livre). E todos sabem que uma parte do sucesso de qualquer empreitada implica conhecer os anseios dos possíveis compradores de um novo produto ou serviço (embora meu script não seja para vender, assim que estiver um pouco mais amigável ele vai para o domínio público).
Como não poderia deixar de ser, eu acompanho o fórum do Mercado Livre para saber quais são as dúvidas e dificuldades que os demais usuários do sistema enfrentam. E justamente aí eu enfrento uma dificuldade concernente à acessibilidade do fórum: a fonte que eles escolheram é terrivelmente pequena, e por conseguinte é muito difícil de ler os textos.
Foi aí que surgiu a idéia de fazer um UserScript para o GreaseMonkey, com o fito de tornar aquela página algo menos inóspita. Afinal, é para isso que existem os navegadores que respeitam o usuário, como o Firefox.
Apenas uma nota: se você não sabe o que é ou como usar o GreaseMonkey, dê uma olhada no artigo que o Bruno Torres escreveu quando criou seu primeiro UserScript.
Sem enrolar muito, o UserScript é este abaixo (não vale rir nos meus nomes de função e de variável):
-
// ==UserScript==
-
// @name ForumML
-
// @namespace JanioSarmento
-
// @include http://www.mercadolivre.com.br/brasil/ml/org_board.show_msg?*
-
window.addEventListener(“load”, function() { VamoNessa() }, false);
-
-
function VamoNessa(){
-
var Par=1;
-
var AspasErro = “\/\”“;
-
var AspasCertas = “\”“;
-
var BR = “<br>”;
-
var P = “<\/p><p>”;
-
-
lis = document.getElementsByTagName(‘li’);
-
for(i=0; i<lis.length; i++){
-
Par = (Par == 1 ? 0 : 1);
-
lis[i].style.backgroundColor=(Par==1 ? ‘#F0F0F0′ : ‘#FFFFFF’);
-
lis[i].style.fontSize=‘14px’;
-
lis[i].style.fontFamily=‘Verdana’;
-
lis[i].style.lineHeight=‘200%’;
-
lis[i].style.paddingTop=‘28px’;
-
-
iH = lis[i].innerHTML;
-
while (iH.indexOf(AspasErro) > 0)
-
iH = iH.replace(AspasErro,AspasCertas);
-
-
while (iH.indexOf(BR) > 0)
-
iH = iH.replace(BR,P);
-
-
lis[i].innerHTML = “<p>” + iH + “<\/p>”;
-
}
-
}
-
//.user.js
-
É um script extremamente simples, e que pode ser bem melhorado. Em resumo ele faz o seguinte: cria um vetor (chamado lis, plural de li) contendo a referência a todas as tags li da página. Depois ele percorre esse vetor, e a cada li acrescenta a formatação que eu defini: mudo o tamanho da fonte para 14px, o tipo para Verdana, aumento o espaçamento entre as linhas e a distância entre uma mensagem e outra (não está funcionando muito bem a partir do segundo nível de respostas, mas não quis gastar tempo investigando).
De quebra, o script ainda resolve um problema absurdo que muitos sites dinâmicos têm ao lidar com as aspas, que é a inserção de uma contrabarra (barra no caso do ML) antes do caractere de aspas propriamente dito. E para encerrar, ele substitui as quebras de linha (dentro da mensagem) por parágrafos, uma vez que não importa quantos “enter” o autor da mensagem tecle, o ML sempre exibirá uma única quebra.
Acredito que outras técnicas (como folhas de estilo personalizadas) pudessem ser aplicadas para resolver este problema, mas a comodidade do GreaseMonkey é insuperável. Além disso, as possibilidades do script são muito maiores (como na solução do problema das aspas).
Está dado o toque.
Atualização: corrigi os bugs que faziam com que apenas a primeira ocorrência de cada substring fosse alterada na mensagem, bem como acrescentei uma frescura que faz com que as mensagens sejam exibidas com cores de fundo alternadas, o que melhora mais ainda a visualização. Espero que seja útil para mais alguém, além de mim próprio.
Textos possivelmente relacionados a este
