Firefox - Personalizar as páginas web com o Greasemonkey
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: https://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
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.
- Firefox - Personalizar as páginas web com o Greasemonkey
- Criação de páginas web - Dicas - Webmaster
- Criar atalho pagina web - Dicas -Internet
- Personalizar url twitter - Dicas -E-comunicação
- Zap web - Dicas -Chrome
- Qual item você pode personalizar usando esta barra de ferramentas? - Dicas -Excel
Assine nossa newsletter!
