Personaliza páginas web con GreaseMonkey

GreaseMonkey es una extensión del navegador web Mozilla Firefox que permite a los usuarios modificar las páginas web que han visitado mientras navegan por Internet. Este software único permite a los usuarios personalizar las páginas web de acuerdo con sus preferencias, al mejorar o eliminar ciertas partes de la página. Se requiere cierto conocimiento de los lenguajes de programación y lenguajes de programación para escribir secuencias de comandos de GreaseMonkey, ya que contienen elementos de Javascript, DOM, HTML, CSS y XPATH. Para aquellos interesados ​​en personalizar las páginas web con GreaseMonkey, el manual completo de autoayuda se puede descargar de forma gratuita desde Internet junto con otros recursos útiles.

¿Qué es GreaseMonkey?

GreaseMonkey es una extensión para Firefox que te permite modificar las páginas web de la mosca que visitas.

Es decir, cambiará la página directamente en el navegador.

Esto le permite cambiar a voluntad todas las páginas de cualquier sitio que desee: elimine elementos que no le gusten, edite el HTML, agregue el código HTML, cambie / agregue / elimine javascript, cambie colores, agregue funciones, aumente o Disminuir el tamaño de tablas, formularios, etc ...

Ejemplo 1

Este script modificará las páginas de Kioskea para ampliar el campo del mensaje en los foros.

/ / Este script está en dominio público.

//

// == UserScript ==

// @name KIOSKEA-Forums

// @namespace SITIO WEB

// @descripción Modificar páginas web de ccm

// @include //ccm.net/*

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

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

// == / UserScript ==

(función () {

// Elimina todas las apariciones de elementos cuya XPath se proporciona desde el documento.

//

// Ejemplo: Eliminar todas las tablas que usan la clase CSS 'toto':

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

función removeElement (ElementXpath)

{

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

para (i = 0; i

{

element = alltags.snapshotItem (i);

element.parentNode.removeChild (element); // Eliminar este elemento de su padre.

}

}

// Elimina un atributo de todas las apariciones de elementos cuya XPath se proporciona.

// (Se procesan todas las apariciones de estos elementos).

//

// Ejemplo: Eliminar el bgcolor de todos

:

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

// Eliminar el fijo con de todas las tablas o celdas ::

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

función removeAttributeOfElement (attributeName, ElementXpath)

{

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

para (i = 0; i

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

}

// Establecer un atributo de todas las apariciones de elementos a un valor especificado.

// El valor anterior de este atributo es descartado.

// (Se procesan todas las apariciones de estos elementos).

//

// Ejemplo: Establecer con 80 columnas en todas las áreas de texto:

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

función setAttributeOfElement (attributeName, attributeValue, ElementXpath)

{

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

para (i = 0; i

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

}

// Inyecta tu propio CSS en la página.

// Ejemplo: No subrayar enlace:

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

función inyectCSS (cssdata)

{

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

style = document.createElement ("style");

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

style.innerHTML = cssdata;

head.appendChild (estilo);

}

tratar

{

// Ampliación del campo del mensaje setAttributeOfElement ('rows', '40', "// textarea [@ name = 'message']");

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

// En la lista de discusión, ponemos en negrita la discusión que no ha recibido ninguna respuesta. setAttributeOfElement ('style', 'font-weight: bold;', "// td [text () = '0'] /../ td [1] / a");

}

atrapar (e)

{

alerta ("excepción de UserScript: \ n" + e);

}

}) ();

La parte más importante del guión es:

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

Estas dos líneas cambian el tamaño (filas, columnas) del cuadro de texto (área de texto) utilizado para escribir mensajes (identificados por nombre = "mensaje").

Utiliza XPath (/ / textarea ...) para seleccionar el elemento sobre el que actuar.

XPath es una forma de designar elementos específicos de una página HTML, pero su uso no es obligatorio.

Puede pasar por los métodos tradicionales de DOM (.GetElementsByTagName () y luego hacer un bucle for, etc.).

Ejemplo 2

Este script también contiene esta línea:

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

En el área de discusión del foro, esto agregará títulos en negrita a las discusiones a las que no se haya respondido.

El XPath:

- Seleccione las celdas de la tabla que contienen el texto "0" (td [text () = '0'])

- Volver al nivel

( / .. )

- Continuamos en la primera.

y / .. siguientes fechas en la
celda (que contiene el título) ( / td [1] )

- Ponemos en negrita todos los enlaces (/ a) contenidos en este

.

XPath

Algunos ejemplos:

- Seleccionar todas las imágenes: / / img

- Seleccione todas las imágenes sin bordes: / / img [@ border = '0']

- Seleccione todos los enlaces que apuntan a Google: / / a [@ href = '//google.com']

- Seleccione Todos los enlaces a Google y que contenga el texto "Enlace a Google: / / a [@ href = '//google.com' y contiene (., 'Enlace a Google')]

- Seleccionar todos los enlaces: / / a

- Selecciona solo las imágenes que enlazan: / / a / img

- Seleccione solo los enlaces colocados directamente en una celda de la tabla: / / td / a

- Seleccione solo el primer enlace colocado directamente en una celda de la tabla: / / td / a [1]

- Seleccione solo el último enlace colocado directamente en una celda de la tabla: / / td / a [last ()]

- Seleccione todas las celdas de la tabla que contienen el texto exacto "Hola": / / td [texto () = 'Hola']

- Seleccione todas las celdas de la tabla que contienen (en algún lugar del texto) la palabra "Hola": / / td [contiene (., 'Hola')]

- Seleccione todas las celdas de la tabla que comienzan con el texto "Hola": / / td [comienza con (., 'Hola')]

- Seleccione todas las tablas que contengan una celda que contenga la palabra "foo": / / td [contiene (., 'Hola')] /../ .. (La primera / .. nuevamente en el

)

- Seleccione todas las celdas en la segunda columna de las tablas: / / tr / td [2]

- Seleccione todas las celdas en la última columna de las tablas: / / tr / td [last ()]

- Seleccione las celdas en las columnas 1, 2 y 3 tablas: / / tr / td [posición () <= 3]

- Seleccione todas las tablas con al menos un atributo: / / tabla [@ *]

- Seleccione todas las tablas con el atributo ancho: / / tabla [@ ancho]

- Seleccione todas las tablas con un ancho de 400px: / / table [@ width = '400px']

- Seleccione todas las etiquetas que son hijas directas de una celda: / / td / *

- Seleccione todos los enlaces que son directamente hijo de una celda: / / td / a

- Seleccionar el segundo enlace es el hijo directo de una celda: / / td / a [1]

- Seleccione la primera etiqueta en una celda, lo que es: / / td / * [1]

- Seleccione la primera etiqueta con un atributo onload: / / td / * [@ onload]

- Seleccione la etiqueta que es una etiqueta después de p en el código html: / / p / following :: a

- Seleccione las etiquetas que son inmediatamente etiqueta de niñas p: / / p / a

- Seleccione cualquier etiqueta que esté contenida en una etiqueta ap (independientemente de la profundidad) / / p / descendant :: a

- Seleccione todas las etiquetas que están después de la etiqueta p, pero en el mismo nivel: / / p / following-sibling :: a

En Firefox, puede usar el Inspector DOM para ayudarlo a encontrar los elementos para seleccionar (CTRL + MAYÚS + I).

También puedes usar la extensión para probar tus expresiones XPath XPath.

Utilidades

El script ccm.user.js contiene 4 clases de utilidades para hacer su vida más fácil:

removeElement (ruta) : elimina un elemento de la página.

removeAttributeOfElement (nomattribut Road) : elimina el atributo de un elemento.

s etAttributeOfElement (nomattribut, value, path) : agrega o modifica el atributo de un elemento

injectCSS () : inyecta tu propio CSS en una página.

La ruta es la ruta del elemento XPath.

Ejemplos:

removeElement () 

 ...
...

Para eliminar la basura, sería: removeElement ('/ / td / span [@ class =' ​​comment ']');

Para eliminar la celda (td) que contiene esa blabla: removeElement ('/ / td / span [@ class =' ​​comment '] / ..');

Para eliminar todos los comentarios, incluso si no están en una celda de la tabla, sería: removeElement ('/ / span [@ class =' ​​comment ']');

removeAttributeOfElement () 

 ...
bla bla bla
...

Para eliminar el tamaño indicado en esta tabla: removeAttributeOfElement ('width', '// table [@ bgcolor =' # ffe ']');

setAttributeOfElement () 

 ...
...

Para forzar el ancho de la tabla: setAttributeOfElement ('width', '100%', '// table [@ bgcolor =' # ffe ']');

inyectarCSS ()

Para cambiar la fuente predeterminada en una página web:

injectCSS ('body (familia de fuentes: Verdana, sans-serif;)');

Campo de golf

Extensión de GreaseMonkey: //addons.mozilla.org/fr/firefox/addon/748

Manual de GreaseMonkey: //diveintogreasemonkey.org/

Nota : Escribir guiones GreaseMonkey no siempre es fácil (debe contener Javascript, DOM, HTML, CSS y XPath opcionalmente).

Platypus es una extensión de Firefox que permite generar automáticamente scripts GreaseMonkey:

//addons.mozilla.org/fr/firefox/addon/737

Pero Platypus tiene una tendencia a generar código Javascript que es bastante lento y engorroso.

Artículo Anterior Artículo Siguiente

Los Mejores Consejos