Firefox - Personalizar as páginas web com o Greasemonkey

Julho 2017




O que é o GreaseMonkey?


GreaseMonkey é uma extensão para o navegador Firefox que permite ajustar as páginas que você visita.

Ou seja, ele vai modificar a página, diretamente no navegador.
Isto te ajudará a modificar, à vontade, todas as páginas de qualquer site: remover elementos desnecessários de determinadas páginas da web, editar o código HTML, adicionar HTML, modificar /adicionar/remover o javascript, alterar cores, adicionar funcionalidades, aumentar ou diminuir o tamanho das tabelas, formulários, etc...

Exemplo n° 1


Veja um exemplo do script: http://sebsauvage.net/temp/ccm/ccm.user.js
Este script vai editar as páginas do "Commentçamarche.net" para expandir a área de entrada da mensagem nos fóruns.
A parte importante do script é:
setAttributeOfElement('rows','40',"//textarea[@name='message']"); 
        setAttributeOfElement('cols','120',"//textarea[@name='message']");


Estas duas linhas alteram o tamanho (rows, cols) da área de texto (textearea) que servem para digitar as mensagens (identificadas pelo nome ="message").
Utilizamos XPath (//textearea...) para selecionar o elemento a ser modificado.

XPath é um maneira simples para designar elementos precisos de uma página HTML, mas seu uso não é obrigatório.
Você pode passar pelos métodos DOM tradicionais (.getElementsByTagName() e fazer um loop, etc.)

Exemplo n° 2


Esse script também contém a linha:
setAttributeOfElement('style','font-weight:bold;',"//td[text()='0']/../td[1]/a");    }


Na lista de discussões do fórum, os títulos dos tópicos que ainda não receberam uma resposta aparecerão em negrito.

O caminho XPath é feito assim:
  • Selecionando as células da tabela que contém o texto "0" (td[text()='0'])
  • Voltando ao <TR> (/..)
  • Descendo para a primeira célula <TD> (a que contém o título) (/td[1])
  • Botando em negrito todos os links (/a) desse <TD>.

XPath


Exemplos:
  • Selecionar todas as imagens: //img
  • Selecionar todas as imagens sem borda: //img[@border='0']
  • Selecionar todos os links apontando para o Google: //a[@href='http://google.com']
  • Selecionar todos os links apontando para o Google e contendo o texto "Link para o Google": //a[@href='http://google.com' and contains(.,'Link para o Google')]
  • Selecionar todos os links: //a
  • Selecionar apenas as imagens com links: //a/img
  • Selecionar apenas os links colocados diretamente em uma célula da tabela: //td/a
  • Selecionar apenas o primeiro link colocado diretamente em uma célula da tabela: //td/a[1]
  • Selecionar apenas o último link colocado diretamente em uma célula da tabela: //td/a[last()]
  • Selecionar todas as células da tabela contendo exatamente o texto "Hello": //td[text()='Hello']
  • Selecionar todas as células da tabela contendo (em algum lugar no texto) a palavra "Hello": //td[contains(.,'Hello')]
  • Selecionar todas as células da tabela começando pelo texto "Hello": //td[starts-with(.,'Hello')]
  • Selecionar todas as tabelas contendo uma célula com a palavra "toto": //td[contains(.,'Hello')]/../.. (O primeiro/...volta ao <tr>, e o/...seguinte volta ao nível da <tabela>)
  • Selecionar todas as células da segunda coluna das tabelas: //tr/td[2]
  • Selecionar todas as células da última coluna das tabelas: //tr/td[last()]
  • Selecionar as células das colunas 1,2 e 3 das tabelas: //tr/td[posição()<=3]
  • Selecionar todas as tabelas com, pelo menos, um atributo: //table[@*]
  • Selecionar todas as tabelas com o atributo width: // table[@width]
  • Selecionar todas as tabelas com uma largura de 400px: //table[@width='400px']
  • Selecionar todas as marcas que são, diretamente, filhas de uma célula: //td/*
  • Selecionar todos os links que são, diretamente, filhos de uma célula: //td/a
  • Selecionar o segundo link que é, diretamente, filho de uma célula: //td/a[1]
  • Selecionar a primeira marca de uma célula, seja qual for a célula: //td/*[1]
  • Selecionar a primeira marca com um atributo onload: //td/*[@onload]
  • Selecionar as marcas <a> que se situam depois de uma marca p no código html: //p/following::a
  • Selecionar as marcas <a> que são, imediatamente, filhas de uma marca p: //p/a
  • Selecionar todas as marcas <a> contidas em uma marca p (seja qual for a profundidade): //p/descendente::a
  • Selecionar todas as marcas <a> que estão depois de uma marca p, mas no mesmo nível: //p/following-sibling::a



No Firefox, você pode utilizar o DOM Inspector para ajudá-lo a encontrar os elementos a serem Selecionados (CTRL+MAJ+I).


Você também pode utilizar a extensão XPather para testar suas expressões XPath.

Funções utilitárias


O script ccm.user.js contém 4 classes utilitárias para facilitar a sua vida:
  • removeElement(caminho) : Exclui um elemento da página.
  • removeAttributeOfElement(nomeatributo,caminho) : Exclui o atributo de um elemento.
  • setAttributeOfElement(nomeatributo,valor,caminho) : Adiciona ou modifica o atributo de um elemento
  • injectCSS() : Injeta seus próprios CSS em uma página.


caminho é o caminho XPath do elemento.


Exemplos:

removeElement()


...<td><span class="comentário">blablabla</span></td>...

Para excluir o blablabla, fazer: removeElement('//td/span[@class='comentário']');
Para excluir a célula (td) com este blablabla: removeElement('//td/span[@class='comentário']/..');
Para excluir todos os comentários, mesmo se eles não estiverem dentro de uma célula de tabela, você deverá fazer: removeElement('//span[@class='comentário']');

removeAttributeOfElement()


...<table width="400px" bgcolor="#ffe">...

Para excluir o tamanho indicado nesta tabela: removeAttributeOfElement('width','//table[@bgcolor='#ffe']');

setAttributeOfElement()


...<table width="400px" bgcolor="#ffe">...

Para forçar a largura da tabela: setAttributeOfElement('width','100%','//table[@bgcolor='#ffe']');

injectCSS()


Para editar a fonte padrão de uma página web:
injectCSS('body{font-family:Verdana,sans-serif; }');

Exemplo 3


Veja outro exemplo de script

Esse script vai modificar a visão que você terá do site sebsauvage.net.
  • Remoção do olhão da página inicial:
    removeElement("//img[@src='images/nbt_gros_oeil.gif']");
  • Remoção da tabela que fala do alojador (na parte inferior da página):
    removeElement("//img[@alt='Digital Networks']/../../../../..");
  • Removemos a centralização da data da última atualização (parte inferior direita da página):
    removeAttributeOfElement (`align',"//td [contains (., `Última atualização:')] ")
  • Colocamos o site inteiro no texto laranja sobre fundo azul:
    injectCSS ('body{background-color:#eef;color: #f80;")

Links


Página do extensão GreaseMonkey
Livro em inglês sobre o GreaseMonkey (com exemplo)
Um site com milhares de scripts prontos

Nota: Escrever scripts GreaseMonkey nem sempre é coisa fácil (é preciso dominar o Javascript, DOM, HTML, CSS e, eventualmente, o XPath).

Platypus é uma extensão do Firefox para gerenciar, automaticamente, os scripts GreaseMonkey
No entanto, Platypus tende a gerar um código Javascript bastante lento e pesado.


Tradução feita por Lucia Maurity y Nouira

Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 8 de janeiro de 2011 às 13:15 por pintuda.
Este documento, intitulado 'Firefox - Personalizar as páginas web com o Greasemonkey', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.