Anpassa webbsidor med GreaseMonkey

GreaseMonkey är en förlängning av webbläsaren Mozilla Firefox som tillåter användare att ändra webbsidor som de har besökt medan de surfar på internet. Denna unika programvara gör att användarna kan anpassa webbsidor enligt deras preferenser genom att förbättra eller ta bort vissa delar av sidan. Viss kunskap om skriptspråk och programmeringsspråk krävs för att skriva GreaseMonkey-skript eftersom de innehåller element från Javascript, DOM, HTML, CSS och XPATH. För dem som är intresserade av att personifiera webbsidor med GreaseMonkey kan hela självhäftehandboken hämtas gratis från internet tillsammans med andra användbara resurser.

Vad är GreaseMonkey?

GreaseMonkey är en förlängning för Firefox som gör att du kan tweak på de webbsidor du besöker.

Det betyder att det kommer att ändra sidan direkt i webbläsaren.

Detta gör att du kan ändra på alla sidor på vilken sida som helst du vill, ta bort saker som du inte gillar, redigera HTML, lägg till HTML-koden, ändra / lägg till / ta bort javascript, ändra färger, lägg till funktioner, öka eller minska storleken på tabeller, formulär etc ...

Exempel 1

Detta skript kommer att ändra sidor i Kioskea för att förstora meddelandefältet i forum.

/ / Det här skriptet är offentligt.

//

// == UserScript ==

// @name KIOSKEA-forum

// @namespace WEBSITE

// @description Ändra webbsidor för ccm

// @include //ccm.net/*

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

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

// == / UserScript ==

(funktion () {

// Avlägsnar alla händelser av element vars XPath tillhandahålls från dokumentet.

//

// Exempel: Ta bort alla tabeller som använder CSS-klassen 'toto':

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

funktion removeElement (ElementXpath)

{

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

för (i = 0; i

{

element = alltags.snapshotItem (i);

element.parentNode.removeChild (element); // Ta bort det här elementet från sin förälder.

}

}

// Tar bort ett attribut från alla tillfällen av element vars XPath tillhandahålls.

// (Alla händelser av dessa element behandlas.)

//

// Exempel: Ta bort bgcolor av alla

:

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

// Ta bort det fasta med alla tabeller eller celler ::

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

funktion removeAttributeOfElement (attributnamn, ElementXpath)

{

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

för (i = 0; i

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

}

// Ange ett attribut från alla händelser av element till ett angivet värde.

// Det tidigare värdet av detta attribut kasseras.

// (Alla händelser av dessa element behandlas.)

//

// Exempel: Ange med till 80 kolumner på alla textområden:

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

funktion setAttributeOfElement (attributnamn, attributValue, ElementXpath)

{

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

för (i = 0; i

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

}

// Injicera din egen CSS på sidan.

// Exempel: Undersök inte länk:

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

funktion injiceraCSS (cssdata)

{

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

style = document.createElement ("style");

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

style.innerHTML = cssdata;

head.appendChild (stil);

}

Prova

{

// Förstora fältet i meddelandet setAttributeOfElement ('rader', '40', '// textarea [@ name =' message '] ");

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

// I diskussionslistan lägger vi djärva diskussionen som inte har fått något svar. setAttributeOfElement ( 'stil', 'font-weight: bold;', "// td [text () = '0'] /../ td [1] / a");

}

fånga (e)

{

varning ("UserScript-undantag: \ n" + e);

}

}) ();

Den viktigaste delen av manuset är:

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

Dessa två rader ändrar storleken (rader, kolumner) i textrutan (textområde) som används för att skriva meddelanden (identifierad med namn = "meddelande").

Den använder XPath (/ / textarea ...) för att välja det element som ska fungera.

XPath är ett sätt att ange specifika delar av en HTML-sida, men användningen är inte obligatorisk.

Du kan gå igenom de traditionella DOM-metoderna (.GetElementsByTagName () och sedan göra en för loop etc.).

Exempel 2

Detta skript innehåller också denna rad:

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

I forumets diskussionsområde kommer detta att lägga till djärva titlar på diskussioner som inte har besvarats.

XPath:

- Välj tabellceller som innehåller texten "0" (td [text () = '0'])

- Gå tillbaka på nivå

( / .. )

- Vi fortsätter i den första

och / .. efter datum på
cell (som innehåller titeln) ( / td [1] )

- Vi lägger in fetstil alla länkar (/ a) som finns i detta

.

XPath

Några exempel:

- Välj alla bilder: / / img

- Välj alla bilder utan gränser: / / img [@ border = '0']

- Välj alla länkar som pekar på Google: / / a [@ href = '//google.com']

- Välj Alla länkar till Google och innehålla texten "Länk till Google: / / a [@ href = '//google.com' och innehåller (., 'Länk till Google')]

- Välj alla länkar: / / a

- Välj bara de bilder som länkar: / / a / img

- Välj bara länkar som är direkt placerade i en tabellcell: / / td / a

- Välj endast den första länken placerade direkt i en tabellcell: / / td / a [1]

- Välj endast den sista länken placerad direkt i en tabellcell: / / td / a [sista ()

- Välj alla tabellceller som innehåller den exakta texten "Hej": / / td [text () = 'Hello']

- Välj alla tabellceller som innehåller (någonstans i texten) ordet "Hello": / / td [innehåller (., "Hej")]

- Välj alla tabellceller som börjar med texten "Hej": / / td [startar med (., "Hej")]

- Välj alla tabeller som innehåller en cell som innehåller ordet "foo": / / td [innehåller (., "Hej")] /../ .. (Den första / .. tillbaka i

)

- Markera alla celler i den andra kolumnen i tabellerna: / / tr / td [2]

- Markera alla celler i den sista kolumnen i tabellerna: / / tr / td [last ()]

- Välj cellerna i kolumnerna 1, 2 och 3: / / tr / td [position () <= 3]

- Välj alla tabeller med minst ett attribut: / / tabell [@ *]

- Välj alla tabeller med attributbredden: / / tabell [@ bredd]

- Välj alla tabeller med en bredd på 400px: / / tabell [@ width = '400px']

- Välj alla taggar som är direkta döttrar i en cell: / / td / *

- Välj alla länkar som är direkt son till en cell: / / td / a

- Välj den andra länken är den direkta sonen till en cell: / / td / a [1]

- Välj den första taggen i en cell, vad det är: / / td / * [1]

- Välj den första taggen med ett onload-attribut: / / td / * [@ onload]

- Välj taggen som en tagg efter p i HTML-koden: / / p / following :: a

- Välj de taggar som omedelbart är flickor tagg p: / / p / a

- Välj vilken etikett som finns i ap-taggen (oavsett djup) / / p / avkomling :: a

- Välj alla taggar som är efter p-taggen, men på samma nivå: / / p / following-sistering :: a

I Firefox kan du använda DOM Inspector för att hjälpa dig att hitta de element som ska väljas (CTRL + SHIFT + I).

Du kan också använda förlängningen för att testa XPath-uttrycken XPath.

verktyg

Skriptet ccm.user.js innehåller 4 klasser av verktyg för att göra ditt liv enklare:

removeElement (bana) : ta bort ett objekt från sidan.

removeAttributeOfElement (nomattribut Road) : ta bort attributet till ett element.

s etAttributeOfElement (nomattribut, värde, sökväg) : Lägg till eller ändra attributet för ett element

injicera CSS () : injicera din egen CSS på en sida.

Vägen är vägen för XPath-elementet.

Exempel:

removeElement () 

 ...
...

För att radera skräpet skulle det vara: removeElement ('/ / td / span [@ class =' ​​comment ']');

För att radera cellen (td) som innehåller den blabla: removeElement ('/ / td / span [@ class =' ​​comment '] / ..');

För att radera alla kommentarer, även om de inte finns i en tabellcell, skulle den: removeElement ('/ / span [@ class =' ​​comment ']');

removeAttributeOfElement () 

 ...
bla bla bla
...

För att ta bort den storlek som anges i denna tabell: removeAttributeOfElement ('width', '// table [@ bgcolor =' # ffe ']');

setAttributeOfElement () 

 ...
...

För att tvinga bredden på bordet: setAttributeOfElement ('bredd', '100%', '// tabell [@ bgcolor =' # ffe ']');

injectCSS ()

Ändra standard teckensnitt på en webbsida:

injicera CSS ("body (font-family: Verdana, sans-serif;)");

länkar

GreaseMonkey Extension: //addons.mozilla.org/fr/firefox/addon/748

GreaseMonkey Manual: //diveintogreasemonkey.org/

Obs! Skrivskript GreaseMonkey är inte alltid lätt (det måste innehålla Javascript, DOM, HTML, CSS och XPath valfritt).

Platypus är en Firefox-förlängning som tillåter att automatiskt skapa skript GreaseMonkey:

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

Men Platypus har en tendens att generera Javascript-kod vilket är ganska långsamt och besvärligt.

Tidigare Artikel Nästa Artikel

Bästa Tipsen