Prispôsobte si webové stránky pomocou aplikácie GreaseMonkey

GreaseMonkey je rozšírenie webového prehliadača Mozilla Firefox, ktorý umožňuje používateľom upravovať webové stránky, ktoré navštívili pri surfovaní na internete. Tento jedinečný softvér umožňuje používateľom prispôsobiť webové stránky podľa svojich preferencií, a to tak, že vylepšia alebo odstránia určité časti stránky. Niektoré znalosti skriptovacích jazykov a programovacích jazykov sú potrebné na písanie skriptov GreaseMonkey, pretože obsahujú prvky z jazyka Javascript, DOM, HTML, CSS a XPATH. Pre záujemcov o personalizáciu webových stránok pomocou aplikácie GreaseMonkey je možné stiahnuť si celú príručku s vlastnou pomocou zdarma z internetu spolu s ďalšími užitočnými zdrojmi.

Čo je to GreaseMonkey?

GreaseMonkey je rozšírenie pre Firefox, ktoré vám umožní vylepšiť webové stránky, ktoré navštívite.

To znamená, že stránku zmení priamo v prehliadači.

To vám umožní zmeniť všetky stránky ľubovoľnej stránky podľa vašich predstáv: odstrániť položky, ktoré sa vám nepáči, upraviť kód HTML, pridať kód HTML, zmeniť / pridať / odstrániť javascript, zmeniť farby, pridať funkcie, zvýšiť alebo zvýšiť znížiť veľkosť tabuliek, formulárov atď.

Príklad 1

Tento skript zmení stránky Kioskea pre zväčšenie poľa správy vo fórach.

/ / Tento skript je vo verejnej doméne.

//

// == UserScript ==

// @name KIOSKEA-Fórum

/

// @description Úprava webových stránok ccm

// @include //ccm.net/*

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

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

// == / UserScript ==

(function () {

// Odstráni všetky výskyty prvkov, ktorých XPath je poskytnutý z dokumentu.

//

// Príklad: Odstráňte všetky tabuľky, ktoré používajú CSS class 'toto':

// removeElement ("// tabuľka [@ class = 'toto']");

funkcia removeElement (ElementXpath)

{

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

pre (i = 0; i

{

element = alltags.snapshotItem (i);

element.parentNode.removeChild (prvok); // Odstráňte tento prvok z jeho rodiča.

}

}

// Odstráni atribút zo všetkých výskytov prvkov, ktorých XPath je poskytovaný.

// (Spracujú sa všetky výskyty týchto prvkov.)

//

// Príklad: Odstráňte bgcolor všetkých

:

// removeAttributeOfElement ('bgcolor', "// tabuľka [@bgcolor]")

// Odstráňte pevne zo všetkých tabuliek alebo buniek ::

// removeAttributeOfElement ('šírka', '// tabuľka [@ šírka] | // td [@ šírka] ")

funkcia removeAttributeOfElement (attributeName, ElementXpath)

{

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

pre (i = 0; i

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

}

// Nastaví atribút zo všetkých výskytov prvkov na zadanú hodnotu.

// Predchádzajúca hodnota tohto atribútu sa zahodí.

// (Spracujú sa všetky výskyty týchto prvkov.)

//

// Príklad: Nastavte na 80 stĺpcov na všetky textové oblasti:

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

funkcia setAttributeOfElement (attributeName, attributeValue, ElementXpath)

{

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

pre (i = 0; i

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

}

// Vstreknite si vlastnú CSS na stránku.

// Príklad: Nepodtrhuj odkaz:

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

funkcia injektCSS (cssdata)

{

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

style = document.createElement ("štýl");

style.setAttribute ("typ", "text / css");

style.innerHTML = cssdata;

head.appendChild (štýl);

}

vyskúšať

{

// Zväčšenie poľa správy setAttributeOfElement ('riadky', '40', "// textarea [@ name = 'message']");

setAttributeOfElement ( 'sl', '120', "// textová [@ name = 'správa']");

// V zozname diskusií sme odvážne diskutovali, že sme nedostali žiadnu odpoveď. setAttributeOfElement ( 'spôsob', 'font-váha: tučný;', "// td [text () = '0'] /../ td [1] / A");

}

úlovok (e)

{

upozornenie ("Výnimka UserScript: n" + e);

}

}) ();

Najdôležitejšou časťou skriptu je:

 setAttributeOfElement ( 'riadky', '40', "// textová [@ name = 'správa']"); setAttributeOfElement ( 'sl', '120', "// textová [@ name = 'správa']");

Tieto dva riadky menia veľkosť (riadky, stĺpce) textového poľa (textovej oblasti), ktoré sa používajú na zadávanie správ (identifikovaných menom = "správa").

Používa XPath (/ / textarea ...) na výber prvku, na ktorom sa má konať.

XPath je spôsob, ako určiť konkrétne prvky HTML stránky, ale jej použitie nie je povinné.

Môžete prejsť tradičnými metódami DOM (.GetElementsByTagName () a potom urobiť pre slučku atď.).

Príklad 2

Tento skript tiež obsahuje tento riadok:

 setAttributeOfElement ( 'spôsob', 'font-váha: tučný;', "// td [text () = '0'] /../ td [1] / A"); }

V diskusnej oblasti fóra sa pridajú tučné názvy diskusií, na ktoré sa neodpovedali.

XPath:

- Vyberte bunky tabuľky obsahujúce text "0" (td [text () = '0'])

- Vráťte sa na úroveň

( / .. )

- Pokračujeme v prvej

a / .. nasledujúce dátumy na
bunka (ktorá obsahuje názov) ( / td [1] )

- Dali sme tučne všetky odkazy (/ a) obsiahnuté v tomto

,

XPath

Niekoľko príkladov:

- Vyberte všetky obrázky: / / img

- Vyberte všetky obrázky bez okrajov: / / img [@ border = '0']

- Vyberte všetky odkazy smerujúce na spoločnosť Google: / / a [@ href = '//google.com']

- Vyberte položku Všetky odkazy na spoločnosť Google a obsahujúce text „Odkaz na spoločnosť Google: / / a [@ href = '//google.com“ a obsahuje (., Odkaz na spoločnosť Google).

- Vyberte všetky odkazy: / / a

- Vyberte iba tie obrázky, ktoré odkazujú: / / a / img

- Vyberte iba odkazy priamo umiestnené v bunke tabuľky: / / td / a

- Vyberte iba prvý odkaz umiestnený priamo v bunke tabuľky: / / td / a [1]

- Vyberte iba posledný odkaz umiestnený priamo v bunke tabuľky: / / td / a [last ()]

- Vyberte všetky bunky tabuľky obsahujúce presný text „Hello“: / / td [text () = 'Hello']

- Vyberte všetky bunky tabuľky obsahujúce (niekde v texte) slovo "Hello": / / td [obsahuje (., 'Hello')]

- Vyberte všetky bunky tabuľky počnúc textom "Hello": / / td [begin-with (., 'Hello')]

- Vyberte všetky tabuľky obsahujúce bunku obsahujúcu slovo "foo": / / td [obsahuje (., 'Hello')] /../ .. (Prvé / .. späť v

)

- Vyberte všetky bunky v druhom stĺpci tabuliek: / / tr / td [2]

- Vyberte všetky bunky v poslednom stĺpci tabuliek: / / tr / td [last ()]

- Vyberte bunky v stĺpcoch 1, 2 a 3 tabuľky: / / tr / td [position () <= 3]

- Vyberte všetky tabuľky s aspoň jedným atribútom: / / table [@ *]

- Vyberte všetky tabuľky so šírkou atribútu: / / table [@ width]

- Vyberte všetky tabuľky so šírkou 400px: / / table [@ width = '400px']

- Vyberte všetky značky, ktoré sú priamymi dcérami bunky: / / td / *

- Vyberte všetky odkazy, ktoré sú priamo synonymom bunky: / / td / a

- Vyberte druhý odkaz je priamy syn bunky: / / td / a [1]

- Vyberte prvú značku v bunke, čo to je: / / td / * [1]

- Vyberte prvú značku s atribútom onload: / / td / * [@ onload]

- Vyberte značku, ktorá bude tagom p v html kóde: / / p / nasleduj :: a

- Vyberte tagy, ktoré sú okamžite tagy dievčatá p: / / p / a

- Vyberte ľubovoľnú značku, ktorá sa nachádza v značke ap (bez ohľadu na hĺbku) / / p / descendant :: a

- Vyberte všetky značky, ktoré sú po značke p, ale na rovnakej úrovni: / / p / follow-sibling :: a

Vo Firefoxe môžete použiť DOM Inspektor, ktorý vám pomôže nájsť prvky, ktoré chcete vybrať (CTRL + SHIFT + I).

Môžete tiež použiť rozšírenie na otestovanie XPath výrazov XPath.

utilities

Skript ccm.user.js obsahuje 4 triedy nástrojov, ktoré vám uľahčia život:

removeElement (cesta) : odstráni položku zo stránky.

removeAttributeOfElement (nomattribut Road) : odstráni atribút prvku.

s etAttributeOfElement (nomattribut, hodnota, cesta) : pridanie alebo úprava atribútu prvku

injectCSS () : vložiť vlastné CSS na stránku.

Cesta je cesta prvku XPath.

Príklady:

removeElement () 

 ...
...

Ak chcete odstrániť odpad, bolo by to: removeElement ('/ / td / span [@ class =' ​​comment ']');

Ak chcete odstrániť bunku (td) obsahujúcu túto blabla: removeElement ('/ / td / span [@ class =' ​​comment '] / ..');

Ak chcete odstrániť všetky komentáre, aj keď nie sú v bunke tabuľky, bude to: removeElement ('/ / span [@ class =' ​​comment ']');

removeAttributeOfElement () 

 ...
blablabla
...

Ak chcete odstrániť veľkosť uvedenú v tejto tabuľke: removeAttributeOfElement ('width', '// table [@ bgcolor =' # ffe ']');

setAttributeOfElement () 

 ...
...

Vynútiť šírku tabuľky: setAttributeOfElement ('width', '100%', '// tabuľka [@ bgcolor =' # ffe ']');

injectCSS ()

Zmena predvoleného písma na webovej stránke:

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

odkazy

Rozšírenie GreaseMonkey: //addons.mozilla.org/fr/firefox/addon/748

Manuál pre GreaseMonkey: //diveintogreasemonkey.org/

Poznámka : Písanie skriptov GreaseMonkey nie je vždy jednoduché (musí obsahovať Javascript, DOM, HTML, CSS a XPath voliteľne).

Platypus je rozšírenie Firefoxu, ktoré umožňuje automaticky generovať skripty GreaseMonkey:

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

Ale Platypus má tendenciu vytvárať Javascript kód, ktorý je pomerne pomalý a ťažkopádny.

Predchádzajúci Článok Nasledujúci Článok

Najlepšie Tipy