A weblapok személyre szabása a GreaseMonkey segítségével

A GreaseMonkey a Mozilla Firefox böngésző kiterjesztése, amely lehetővé teszi a felhasználók számára, hogy az interneten szörfözve módosítsák a meglátogatott weboldalakat . Ez az egyedülálló szoftver lehetővé teszi a felhasználók számára, hogy a weblapokat saját preferenciáik szerint személyre szabják, az oldal bizonyos részeinek javításával vagy törlésével. A szkriptnyelvek és a programozási nyelvek ismerete szükséges a GreaseMonkey parancsfájlok írásához, mivel azok tartalmazzák a Javascript, a DOM, a HTML, a CSS és az XPATH elemeket. Azok számára, akik érdeklődnek a weboldalak személyre szabásával a GreaseMonkey használatával, a teljes önsegítő kézikönyv ingyenesen letölthető az internetről más hasznos erőforrásokkal együtt.

Mi a GreaseMonkey?

A GreaseMonkey a Firefox kiterjesztése, amely lehetővé teszi, hogy megcsípje a látogatott weboldalakat.

Ez azt jelenti, hogy az oldalt közvetlenül a böngészőben fogja megváltoztatni.

Ez lehetővé teszi, hogy tetszőleges webhely minden oldalát megváltoztassa: távolítsa el azokat az elemeket, amelyek nem tetszik, szerkesztheti a HTML-t, hozzáadja a HTML-kódot, módosíthatja / hozzáadhatja / eltávolíthatja a javascript-t, módosíthatja a színeket, hozzáadhatja a funkciókat, növelheti vagy növelheti a szolgáltatásokat csökkenti a táblák, űrlapok stb. méretét ...

1. példa

Ez a szkript módosítja a Kioskea oldalait az üzenetek mezőjének nagyítása érdekében a fórumokon.

/ / Ez a szkript nyilvános.

//

// == UserScript ==

// @name KIOSKEA-Fórum

// @namespace WEBOLDAL

// @description A ccm weblapjainak módosítása

// @include //ccm.net/*

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

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

// == / UserScript ==

(funkció () {

// Eltávolítja az olyan elemeket, amelyek XPath-jét a dokumentum tartalmazza.

//

// Példa: Távolítsa el az összes táblát, amely a "toto" CSS osztályt használja:

// removeElement ("// táblázat [@ class = 'toto']");

funkció eltávolításaElement (ElementXpath)

{

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

a (i = 0; i

{

element = alltags.snapshotItem (i);

element.parentNode.removeChild (elem); // Távolítsa el ezt az elemet a szülőtől.

}

}

// Eltávolít egy attribútumot olyan elemekből, amelyek XPath-t tartalmaznak.

// (Ezen elemek minden előfordulása feldolgozásra kerül.)

//

// Példa: Távolítsa el az összes bgcolor-ot

:

// removeAttributeOfElement ('bgcolor', "// táblázat [@bgcolor]")

// Távolítsa el a rögzített összes táblát vagy cellát:

// removeAttributeOfElement ('szélesség', "// táblázat [@width] | // td [@width]")

functionAtributeOfElement függvény (attribútumNeve, ElementXpath)

{

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

a (i = 0; i

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

}

// Adjon meg egy attribútumot az elemek minden előfordulásától egy meghatározott értékre.

// Az attribútum előző értéke eldobódik.

// (Ezen elemek minden előfordulása feldolgozásra kerül.)

//

// Példa: 80 oszlopot állítson be az összes texteareasban:

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

setAttributeOfElement függvény (attribútumName, attributeValue, ElementXpath)

{

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

a (i = 0; i

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

}

// Adja be a saját CSS-t az oldalon.

// Példa: Ne nyissa ki a linket:

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

befecskendező szisztémás funkció (cssdata)

{

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

style = document.createElement ("stílus");

style.setAttribute ("típus", "szöveg / css");

style.innerHTML = cssdata;

head.appendChild (stílus);

}

próbáld ki

{

// A setAttributeOfElement üzenet mezőjének nagyítása ("sorok", "40", "// textarea [@ name = 'message']");

setAttributeOfElement ( 'oszlopok', '120', "// textarea [@ name = 'üzenet']");

// A viták listáján merészen tesszük a vitát, amelyre nem érkezett válasz. setAttributeOfElement ( 'stílusú', 'font-weight: Bold;', "// TD [szöveg () = '0'] /../ td [1] / A");

}

fogás (e)

{

riasztás ("UserScript kivétel: n" + e);

}

}) ();

A szkript legfontosabb része a következő:

 setAttributeOfElement ( 'sorok', '40', "// textarea [@ name = 'üzenet']"); setAttributeOfElement ( 'oszlopok', '120', "// textarea [@ name = 'üzenet']");

Ezek a két sor megváltoztatja az üzenetek írásához használt szövegdoboz (szövegterület) méretét (sorok, oszlopok), amelyek neve = "message".

Az XPath (/ / textarea ...) használatával kiválaszthatja azt a elemet, amelyen cselekedni kell.

Az XPath egy HTML oldal bizonyos elemeinek kijelölése, de használata nem kötelező.

Átmehet a hagyományos DOM módszereken (.GetElementsByTagName (), majd a hurokhoz stb.).

2. példa

Ez a parancsfájl is tartalmazza ezt a sort:

 setAttributeOfElement ( 'stílusú', 'font-weight: Bold;', "// TD [szöveg () = '0'] /../ td [1] / A"); }

A fórum beszélgetési területén ez merész címeket ad a megbeszélésekhez, amelyekre nem válaszolt.

Az XPath:

- Válassza ki a "0" szöveget tartalmazó táblázatcellákat (td [text () = '0'])

- Menj vissza a szintre

( / .. )

- Folytatjuk az elsőt

és / .. következő dátumok a
cella (amely tartalmazza a címet) ( / td [1] )

- Az itt szereplő linkeket félkövéren helyeztük el

.

XPath

Néhány példa:

- Minden kép kiválasztása: / / img

- Minden szegély nélküli kép kiválasztása: / / img [@ border = '0']

- Válassza ki a Google-ra mutató összes linket: / / a [@ href = '//google.com']

- Válassza ki a Google-hoz tartozó összes linket, és tartalmazza a "Link a Google-hoz: / / a [@ href = '//google.com" szöveget és tartalmazza (., "Link a Google-hoz")]

- Válassza ki az összes linket: / / a

- Csak azokat a képeket válassza ki, amelyek: / / a / img

- Csak a közvetlenül a tábla cellába helyezett linkeket válassza: / / td / a

- Csak az első linket válassza ki közvetlenül a táblázat cellájában: / / td / a [1]

- Csak az utolsó, közvetlenül a táblázat cellájába helyezett linket válassza: / / td / a [last ()]

- Válassza ki az összes táblázat cellát, amely tartalmazza a "Hello" pontos szöveget: / / td [text () = 'Hello']

- Válassza ki az összes tábla cellát, amely (valahol a szövegben) a "Hello" szót tartalmazza : / / td [tartalmazza (., 'Hello')]

- Válassza ki az összes tábla cellát a "Hello" szöveggel kezdve: / / td [start-with (., 'Hello')]

- Válassza ki az összes táblát, amely egy "foo" szót tartalmazó cellát tartalmaz: / / td [tartalmazza (., 'Hello')] /../ .. (Az első / .. vissza a

)

- Válassza ki az összes cellát a táblázatok második oszlopában: / / tr / td [2]

- Válassza ki az összes cellát a táblázatok utolsó oszlopában: / / tr / td [last ()]

- Válassza ki az oszlopokat az 1. és 3. oszlopban: / / tr / td [pozíció () <= 3]

- Válassza ki az összes táblázatot, amely legalább egy attribútummal rendelkezik: / / table [@ *]

- Válassza ki az összes táblát az attribútumszélességgel: / / table [@ width]

- Válassza ki a 400px szélességű összes táblát: / / table [@ width = '400px']

- Válassza ki az összes címkét, amely egy cella közvetlen lánya: / / td / *

- Válasszon ki minden olyan linket, amely közvetlenül egy sejt fia: / / td / a

- Válassza ki a második linket a cella közvetlen fia: / / td / a [1]

- Válassza ki az első címkét a cellában, mi az: / / td / * [1]

- Válasszuk ki az első címkét az onload attribútummal: / / td / * [@ onload]

- Válassza ki a címkét a címke után a html kódban: / / p / next :: a

- Jelölje ki azokat a címkéket, amelyek azonnal lányok címkéje p: / / p / a

- Válasszon ki egy olyan címkét, amely az ap címkében található (a mélységtől függetlenül) / / p / leszármazott :: a

- Válassza ki az összes címkét, amely a címke után van, de ugyanazon a szinten: / / p / következő-testvér :: a

A Firefoxban a DOM Inspector segítségével megkeresheti a kiválasztandó elemeket (CTRL + SHIFT + I).

Használhatja a kiterjesztést az XPath XPath kifejezések tesztelésére is.

segédprogramok

A ccm.user.js parancsfájl 4 segédprogramot tartalmaz, amelyek megkönnyítik az életedet:

removeElement (path) : egy elem eltávolítása az oldalról.

removeAttributeOfElement (nomattribut Road) : egy elem attribútumának eltávolítása.

s etAttributeOfElement (nomattribut, érték, elérési út) : egy elem attribútumának hozzáadása vagy módosítása

injCSS () : adja meg saját CSS- jét egy oldalon.

Az elérési út az XPath elem elérési útja.

Példák:

removeElement () 

 ...
...

A szemét törléséhez: removeElement ('/ / td / span [@ class =' ​​comment ']');

A blabla: removeElement tartalmú cellát (td) törölni ('/ / td / span [@ class =' ​​comment '] / ..');

Az összes megjegyzés törléséhez, még akkor is, ha nincsenek táblázatos cellában, akkor: removeElement ('/ / span [@ class =' ​​comment ']');

removeAttributeOfElement () 

 ...
bla bla bla
...

A táblázatban megadott méret eltávolításához: removeAttributeOfElement ('szélesség', '// táblázat [@ bgcolor =' # ffe ']');

setAttributeOfElement () 

 ...
...

A táblázat szélességének kényszerítéséhez: setAttributeOfElement ('szélesség', '100%', '// táblázat [@ bgcolor =' # ffe ']');

injectCSS ()

A weblap alapértelmezett betűkészletének módosítása:

injCSS ('test (font-family: Verdana, sans-serif;)');

linkek

GreaseMonkey kiterjesztés: //addons.mozilla.org/fr/firefox/addon/748

GreaseMonkey kézikönyv: //diveintogreasemonkey.org/

Megjegyzés : A szkriptek írása A GreaseMonkey nem mindig könnyű (a Javascript, DOM, HTML, CSS és XPath opcionálisan).

A Platypus egy Firefox kiterjesztés, amely lehetővé teszi a GreaseMonkey szkriptek automatikus létrehozását:

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

De Platypus hajlamos arra, hogy Javascript kódot generáljon, ami meglehetősen lassú és nehézkes.

Előző Cikk Következő Cikk

Top Tippek