Personalize páginas da web com o GreaseMonkey

O GreaseMonkey é uma extensão do navegador da web Mozilla Firefox que permite que os usuários modifiquem as páginas da Web que visitaram enquanto navegavam na Internet. Este software exclusivo permite que os usuários personalizem páginas da web de acordo com suas preferências, aprimorando ou excluindo certas partes da página. Algum conhecimento de linguagens de script e linguagens de programação é necessário para escrever scripts GreaseMonkey, pois eles contêm elementos de Javascript, DOM, HTML, CSS e XPATH. Para aqueles interessados em personalizar páginas da web usando o GreaseMonkey, o manual de auto-ajuda inteiro pode ser baixado gratuitamente da Internet, juntamente com outros recursos úteis.

O que é o GreaseMonkey?

O GreaseMonkey é uma extensão do Firefox que permite ajustar as páginas da web que você visita.

Ou seja, ele irá mudar a página diretamente no navegador.

Isso permite que você altere à vontade todas as páginas de qualquer site como desejar: remova itens de que não gosta, edite o HTML, adicione o código HTML, altere / adicione / remova o javascript, altere cores, adicione recursos, aumente ou diminuir o tamanho das tabelas, formulários etc ...

Exemplo 1

Este script irá modificar as páginas do Kioskea para ampliar o campo de mensagens nos fóruns.

// Este script está em domínio público.

// == UserScript ==

// @name KIOSKEA-Forums

// @namespace WEBSITE

// @description Modificar páginas da web de ccm

// @include //ccm.net/*

// @include //www.commentcamarche.com/*

// @include //www.commentcamarche.net/*

// == / UserScript ==

(function () {

// Remove todas as ocorrências de elementos cujo XPath é fornecido do documento.

// Exemplo: remova todas as tabelas que usam a classe CSS 'toto':

// removeElement ("// table [@ class = 'toto']");

função removeElement (ElementXpath)

{

var alltags = document.evaluate (ElementXpath, documento, nulo, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, nulo);

para (i = 0; i

{

element = alltags.snapshotItem (i);

element.parentNode.removeChild (element); // Remove este elemento do seu pai.

}

// Remove um atributo de todas as ocorrências de elementos cujo XPath é fornecido.

// (todas as ocorrências deste elementos são processadas).

// Exemplo: remova o bgcolor de todos

// removeAttributeOfElement ('bgcolor', "// table [@bgcolor]")

// Remove o fixo de todas as tabelas ou células ::

// removeAttributeOfElement ('width', "// table [@width] | // td [@width]")

function removeAttributeOfElement (attributeName, ElementXpath)

{

var alltags = document.evaluate (ElementXpath, documento, nulo, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, nulo);

para (i = 0; i

alltags.snapshotItem (i) .removeAttribute (attributeName);

}

// Define um atributo de todas as ocorrências de elementos para um valor especificado.

// O valor anterior deste atributo é descartado.

// (todas as ocorrências deste elementos são processadas).

// Exemplo: defina com 80 colunas em todas as texteareas:

// setAttributeOfElement ('cols', 80, "// textarea")

function setAttributeOfElement (attributeName, attributeValue, ElementXpath)

{

var alltags = document.evaluate (ElementXpath, documento, nulo, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, nulo);

para (i = 0; i

alltags.snapshotItem (i) .setAttribute (attributeName, attributeValue)

}

// Informe seu próprio CSS na página.

// Exemplo: não sublinhar link:

// injectCSS ("a {text-decoration: none;}")

function injectCSS (cssdata)

{

head = document.getElementsByTagName ("head") [0];

style = document.createElement ("style");

style.setAttribute ("type", 'text / css');

style.innerHTML = cssdata;

head.appendChild (estilo);

}

experimentar

{

// Aumentando o campo da mensagem setAttributeOfElement ('rows', '40', "// textarea [@ name = 'message']");

setAttributeOfElement ('cols', '120', "// textarea [@ name = 'message']");

// Na lista de discussão, colocamos em negrito a discussão que não recebeu nenhuma resposta. setAttributeOfElement ('style', 'font-weight: negrito;', "// td [text () = '0'] /../ td [1] / a");

}

captura (e)

{

alert ("exceção do UserScript: \ n" + e);

}

}) ();

A parte mais importante do script é:

 setAttributeOfElement ('rows', '40', "// textarea [@ name = 'mensagem']"); setAttributeOfElement ('cols', '120', "// textarea [@ name = 'message']");

Essas duas linhas alteram o tamanho (linhas, cols) da caixa de texto (área de texto) usada para digitar mensagens (identificadas por nome = "mensagem").

Ele usa XPath (/ / textarea ...) para selecionar o elemento no qual atuar.

O XPath é uma maneira de designar elementos específicos de uma página HTML, mas seu uso não é obrigatório.

Você pode percorrer os métodos DOM tradicionais (.GetElementsByTagName () e, em seguida, fazer um loop for, etc.).

Exemplo 2

Este script também contém esta linha:

 setAttributeOfElement ('style', 'font-weight: negrito;', "// td [text () = '0'] /../ td [1] / a"); }

Na área de discussão do fórum, isso adicionará títulos em negrito às discussões que não foram respondidas.

O XPath:

- Selecione as células da tabela contendo o texto "0" (td [text () = '0'])

- Volte ao nível

( / .. )

- Continuamos no primeiro

e / .. seguintes datas no

cell (que contém o título) ( / td [1] )

- Colocamos em negrito todos os links (/ a) contidos neste

XPath

Alguns exemplos:

- Selecione todas as imagens: / / img

- Selecione todas as imagens sem bordas: / / img [@ border = '0']

- Selecione todos os links que apontam para o Google: / / a [@ href = '//google.com']

- Selecione Todos os links para o Google e contenha o texto "Link para o Google: // a [@ href = '//google.com" e contém (., "Link para o Google"]]

- Selecione todos os links: / / a

- Selecione apenas as imagens que ligam: / / a / img

- Selecione apenas os links colocados diretamente em uma célula da tabela: / / td / a

- Selecione apenas o primeiro link colocado diretamente em uma célula da tabela: / / td / a [1]

- Selecione apenas o último link colocado diretamente em uma célula da tabela: / / td / a [last ()]

- Selecione todas as células da tabela contendo o texto exato "Hello": / / td [text () = 'Hello']

- Selecione todas as células da tabela contendo (em algum lugar no texto) a palavra "Hello": / / td [contains (., 'Hello')]

- Selecione todas as células da tabela começando com o texto "Hello": / / td [starts-with (., 'Hello')]

- Selecione todas as tabelas contendo uma célula contendo a palavra "foo": / / td [contém (., 'Hello')] /../ .. (O primeiro / .. de volta no

)

- Selecione todas as células na segunda coluna das tabelas: / / tr / td [2]

- Selecione todas as células na última coluna das tabelas: / / tr / td [last ()]

- Selecione as células nas colunas 1, 2 e 3 tabelas: / / tr / td [position () <= 3]

- Selecione todas as tabelas com pelo menos um atributo: / / table [@ *]

- Selecione todas as tabelas com a largura do atributo: / / table [@ width]

- Selecione todas as tabelas com uma largura de 400px: // table [@ width = '400px']

- Selecione todas as tags que são filhas diretas de uma célula: / / td / *

- Selecione todos os links que são diretamente filho de uma célula: / / td / a

- Selecione o segundo link é o filho direto de uma célula: / / td / a [1]

- Selecione o primeiro tag em uma célula, o que é: / / td / * [1]

- Selecione a primeira tag com um atributo onload: / / td / * [@ onload]

- Selecione a tag sendo uma tag depois de p no código html: / / p / following :: a

- Selecione as tags que são imediatamente meninas tag p: / / p / a

- Selecione qualquer tag contida na tag ap (independentemente da profundidade) / / p / descendente :: a

- Selecione todas as tags que estão após a tag p, mas no mesmo nível: / / p / seguinte-irmão: a

No Firefox, você pode usar o DOM Inspector para ajudá-lo a encontrar os elementos para selecionar (CTRL + SHIFT + I).

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

Serviços de utilidade pública

O script ccm.user.js contém 4 classes de utilitários para facilitar sua vida:

removeElement (path) : remove um item da página.

removeAttributeOfElement (nomattribut Road) : remove o atributo de um elemento.

s etAttributeOfElement (nomattribut, value, path) : adiciona ou modifica o atributo de um elemento

injectCSS () : injete seu próprio CSS em uma página.

Caminho é o caminho do elemento XPath.

Exemplos:

removeElement ()

...

...

Para apagar o lixo, seria: removeElement ('/ / td / span [@ class =' comment ']');

Para deletar cell (td) contendo aquele blabla: removeElement ('/ / td / span [@ class =' comment '] / ..');

Para apagar todos os comentários, mesmo que eles não estejam em uma célula da tabela, isso seria: removeElement ('/ / span [@ class =' comment ']');

removeAttributeOfElement ()

...

blablabla

...

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

setAttributeOfElement ()

...

...

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

injectCSS ()

Para alterar a fonte padrão em uma página da web:

injectCSS ('body (font-family: Verdana, sans-serif;)');

Personalize páginas da web com o GreaseMonkey

Opera - Como mudar o idioma da interface do usuário?

Como encontrar e excluir fotos duplicadas

XP - O Windows não pode configurar esta conexão sem fio

Flock browser - Limpar seus dados de navegação

iOS - Como desabilitar os efeitos de transparência

Firefox - Desativar a verificação do navegador padrão

Caixa postal - Abrir mensagens em uma nova janela

Skype 6.1 - Fazer chamadas pelo Skype a partir do Outlook

Opera Mini - Como limpar seu histórico de navegação?

O que é o GreaseMonkey?

Exemplo 1

Exemplo 2

XPath

Serviços de utilidade pública

removeElement ()

removeAttributeOfElement ()

setAttributeOfElement ()

injectCSS ()

Links

Principais Dicas