Εξατομικεύστε ιστοσελίδες με GreaseMonkey

Το GreaseMonkey είναι μια επέκταση του προγράμματος περιήγησης ιστού Mozilla Firefox που επιτρέπει στους χρήστες να τροποποιούν τις ιστοσελίδες που επισκέπτονται κατά τη διάρκεια της περιήγησης στο διαδίκτυο. Αυτό το μοναδικό λογισμικό επιτρέπει στους χρήστες να προσαρμόζουν τις ιστοσελίδες ανάλογα με τις προτιμήσεις τους, βελτιώνοντας ή διαγράφοντας ορισμένα μέρη της σελίδας. Ορισμένες γνώσεις γλωσσών προγραμματισμού και γλώσσας προγραμματισμού απαιτούνται για τη σύνταξη γραφημάτων GreaseMonkey καθώς περιέχουν στοιχεία από Javascript, DOM, HTML, CSS και XPATH. Για όσους ενδιαφέρονται να προσωποποιήσουν ιστοσελίδες χρησιμοποιώντας το GreaseMonkey, ολόκληρο το εγχειρίδιο αυτοβοήθειας μπορεί να μεταφορτωθεί δωρεάν από το διαδίκτυο μαζί με άλλους χρήσιμους πόρους.

Τι είναι το GreaseMonkey;

Το GreaseMonkey είναι μια επέκταση για τον Firefox που σας επιτρέπει να τροποποιήσετε τις ιστοσελίδες που επισκέπτεστε.

Δηλαδή, θα αλλάξει τη σελίδα απευθείας στο πρόγραμμα περιήγησης.

Αυτό σας επιτρέπει να αλλάξετε κατά βούληση όλες τις σελίδες οποιουδήποτε ιστότοπου όπως θέλετε: να αφαιρέσετε αντικείμενα που δεν σας αρέσουν, να επεξεργαστείτε το HTML, να προσθέσετε τον κώδικα HTML, να αλλάξετε / προσθέσετε / αφαιρέσετε javascript, να αλλάξετε χρώματα, να προσθέσετε χαρακτηριστικά, μειώστε το μέγεθος των πινάκων, των μορφών κ.λπ ...

Παράδειγμα 1

Αυτό το σενάριο θα τροποποιήσει τις σελίδες του Kioskea για να διευρύνει το πεδίο μηνυμάτων στα φόρουμ.

/ / Αυτό το σενάριο είναι δημόσιο τομέα.

//

// == UserScript ==

// @ όνομα KIOSKEA-Φόρουμ

// ΙΣΤΟΣΕΛΙΔΑ @namespace

// @description Τροποποίηση ιστοσελίδων ccm

// @ περιλαμβάνει //ccm.net/*

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

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

// == / UserScript ==

(λειτουργία () {

// Καταργεί όλες τις εμφανίσεις στοιχείων των οποίων το XPath παρέχεται από το έγγραφο.

//

// Παράδειγμα: Αφαιρέστε όλους τους πίνακες που χρησιμοποιούν την κλάση CSS "toto":

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

λειτουργία removeElement (ElementXpath)

{

var alltags = document.evaluate (ΣτοιχείοXpath, έγγραφο, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

για (i = 0, i

{

στοιχείο = alltags.snapshotItem (i);

element.parentNode.removeChild (στοιχείο); // Κατάργηση αυτού του στοιχείου από τον γονέα του.

}}

}}

// Καταργεί ένα χαρακτηριστικό από όλες τις εμφανίσεις στοιχείων των οποίων το XPath παρέχεται.

// (Όλες οι εμφανίσεις αυτών των στοιχείων επεξεργάζονται.)

//

// Παράδειγμα: Καταργήστε το bgcolor όλων

:

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

// Αφαιρέστε το σταθερό από όλα τα τραπέζια ή τα κελιά ::

// removeAttributeOfElement ('πλάτος', '// πίνακας [@width] | // td [@width]')

λειτουργία removeAttributeOfElement (attributeName, ElementXpath)

{

var alltags = document.evaluate (ΣτοιχείοXpath, έγγραφο, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

για (i = 0, i

alltags.snapshotItem (i) .removeAttribute (χαρακτηριστικόName);

}}

// Ορίστε ένα χαρακτηριστικό από όλες τις εμφανίσεις στοιχείων σε μια καθορισμένη τιμή.

// Η προηγούμενη τιμή αυτού του χαρακτηριστικού απορρίπτεται.

// (Όλες οι εμφανίσεις αυτών των στοιχείων επεξεργάζονται.)

//

// Παράδειγμα: Ρύθμιση με έως 80 στήλες σε όλες τις texteareas:

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

συνάρτηση setAttributeOfElement (attributeName, attributeValue, ElementXpath)

{

var alltags = document.evaluate (ΣτοιχείοXpath, έγγραφο, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

για (i = 0, i

alltags.snapshotItem (i) .setAttribute (χαρακτηριστικόName, attributeValue)

}}

// Εισαγάγετε το δικό σας CSS στη σελίδα.

// Παράδειγμα: Μην υπογραμμίζετε τον σύνδεσμο:

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

λειτουργία injectCSS (cssdata)

{

κεφαλή = document.getElementsByTagName ("κεφάλι") [0];

style = document.createElement ("στυλ");

style.setAttribute ("τύπος", "κείμενο / css");

style.innerHTML = cssdata;

head.appendChild (στυλ);

}}

προσπαθήστε

{

// Διεύρυνση του πεδίου του μηνύματος setAttributeOfElement ('rows', '40', 'textarea [@ name =' message '] ").

setAttributeOfElement ('cols', '120', '// textarea [@ name =' μήνυμα '] ");

// Στη λίστα συζητήσεων, θέσαμε με τόλμη τη συζήτηση που δεν έλαβε καμία απάντηση. setAttributeOfElement ('style', 'font-weight: bold;', '// td [text () =' 0 '] /../ td [1] / a ");

}}

αλιευμάτων (ε)

{

Προειδοποίηση ("εξαίρεση UserScript: \ n" + e);

}}

}) ();

Το πιο σημαντικό μέρος του σεναρίου είναι:

 setAttributeOfElement ('γραμμές', '40', '// textarea [@ name =' μήνυμα '] "); setAttributeOfElement ('cols', '120', '// textarea [@ name =' μήνυμα '] ");

Αυτές οι δύο γραμμές αλλάζουν το μέγεθος (γραμμές, στήλες) του πλαισίου κειμένου (περιοχή κειμένου) που χρησιμοποιείται για την πληκτρολόγηση μηνυμάτων (αναγνωρισμένα με όνομα = "μήνυμα").

Χρησιμοποιεί XPath (/ / textarea ...) για να επιλέξει το στοιχείο στο οποίο θα ενεργήσει.

Το XPath είναι ένας τρόπος για τον προσδιορισμό συγκεκριμένων στοιχείων μιας σελίδας HTML, αλλά η χρήση του δεν είναι υποχρεωτική.

Μπορείτε να περάσετε από τις παραδοσιακές μεθόδους DOM (.GetElementsByTagName () και στη συνέχεια να κάνετε a for loop, κλπ.).

Παράδειγμα 2

Αυτό το script περιέχει επίσης αυτή τη γραμμή:

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

Στον τομέα συζητήσεων του φόρουμ, αυτό θα προσθέσει τολμηρούς τίτλους σε συζητήσεις που δεν έχουν απαντηθεί.

Το XPath:

- Επιλέξτε τα κελιά πίνακα που περιέχουν το κείμενο "0" (td [text () = '0'])

- Επιστρέψτε στο επίπεδο

( / .. )

- Συνεχίζουμε στην πρώτη

και / .. τις ακόλουθες ημερομηνίες στο
(που περιέχει τον τίτλο) ( / td [1] )

- Βάζουμε τολμηρούς όλους τους συνδέσμους (/ a) που περιέχονται σε αυτό

.

XPath

Μερικά παραδείγματα:

- Επιλέξτε όλες τις εικόνες: / / img

- Επιλέξτε όλες τις εικόνες χωρίς σύνορα: / / img [@ border = '0']

- Επιλέξτε όλους τους συνδέσμους που οδηγούν στην Google: / / a [@ href = '//google.com']

- Επιλέξτε όλες τις συνδέσεις με το Google και περιέχει το κείμενο "Σύνδεσμος προς το Google: / / a [@ href = '//google.com" και περιέχει (., ' Σύνδεση με Google ')]

- Επιλέξτε όλους τους συνδέσμους: / / a

- Επιλέξτε μόνο εκείνες τις εικόνες που συνδέουν: / / a / img

- Επιλέξτε μόνο τους συνδέσμους που τοποθετούνται απευθείας σε μια κελιά πίνακα: / / td / a

- Επιλέξτε μόνο τον πρώτο σύνδεσμο που βρίσκεται απευθείας σε μια κελιά πίνακα: / / td / a [1]

- Επιλέξτε μόνο τον τελευταίο σύνδεσμο που βρίσκεται απευθείας σε μια κελιά πίνακα: / / td / a [last ()]

- Επιλέξτε όλα τα κελιά πίνακα που περιέχουν το ακριβές κείμενο "Hello": / / td [text () = 'Γεια σας']

- Επιλέξτε όλα τα κελιά πίνακα που περιέχουν (κάπου στο κείμενο) τη λέξη "Hello": / / td [περιέχει (., 'Hello')]

- Επιλέξτε όλα τα κελιά πίνακα που αρχίζουν με το κείμενο "Hello": / / td [ξεκινά με (., 'Hello')]

- Επιλέξτε όλους τους πίνακες που περιέχουν ένα κελί που περιέχει τη λέξη "foo": / / td [περιέχει (., 'Hello')] /../ .. (Το πρώτο / .. πίσω στο

)

- Επιλέξτε όλα τα κελιά στη δεύτερη στήλη των πινάκων: / / tr / td [2]

- Επιλέξτε όλα τα κελιά στην τελευταία στήλη των πινάκων: / / tr / td [last ()]

- Επιλέξτε τα κελιά στις στήλες 1, 2 και 3: / / tr / td [θέση () <= 3]

- Επιλέξτε όλους τους πίνακες με τουλάχιστον ένα χαρακτηριστικό: / / table [@ *]

- Επιλέξτε όλους τους πίνακες με το πλάτος χαρακτηριστικών: / / table [@ width]

- Επιλέξτε όλους τους πίνακες με πλάτος 400px: / / table [@ width = '400px']

- Επιλέξτε όλες τις ετικέτες που είναι άμεσες κόρες μιας κυψέλης: / / td / *

- Επιλέξτε όλους τους συνδέσμους που είναι απευθείας γιος ενός κελιού: / / td / a

- Επιλέξτε τον δεύτερο σύνδεσμο είναι ο άμεσος γιος ενός κελύφους: / / td / a [1]

- Επιλέξτε την πρώτη ετικέτα σε ένα κελί, τι είναι: / / td / * [1]

- Επιλέξτε την πρώτη ετικέτα με χαρακτηριστικό onload: / / td / * [@load]

- Επιλέξτε την ετικέτα ως ετικέτα μετά το p στον κώδικα html: / / p / following :: a

- Επιλέξτε τις ετικέτες που είναι αμέσως κορίτσια tag p: / / p / a

- Επιλέξτε οποιαδήποτε ετικέτα που περιέχεται στην ετικέτα ap (ανεξάρτητα από το βάθος) / / p / απόγονος :: a

- Επιλέξτε όλες τις ετικέτες που είναι μετά την ετικέτα p, αλλά στο ίδιο επίπεδο: / / p / following-sibling :: a

Στον Firefox, μπορείτε να χρησιμοποιήσετε τον DOM Inspector για να βρείτε τα στοιχεία που θέλετε να επιλέξετε (CTRL + SHIFT + I).

Μπορείτε επίσης να χρησιμοποιήσετε την επέκταση για να ελέγξετε τις XPath εκφράσεις XPath.

Βοηθητικά προγράμματα

Το σενάριο ccm.user.js περιέχει 4 κατηγορίες βοηθητικών προγραμμάτων για να διευκολύνει τη ζωή σας:

removeElement (διαδρομή) : αφαιρέστε ένα στοιχείο από τη σελίδα.

removeAttributeOfElement (nomattribut Road) : αφαιρέστε το χαρακτηριστικό ενός στοιχείου.

s etAttributeOfElement (nomattribut, τιμή, διαδρομή) : προσθήκη ή τροποποίηση του χαρακτηριστικού ενός στοιχείου

injectCSS () : εισάγετε το δικό σας CSS σε μια σελίδα.

Το μονοπάτι είναι η διαδρομή του στοιχείου XPath.

Παραδείγματα:

removeElement () 

 ...
...

Για να διαγράψετε τα σκουπίδια, θα ήταν: removeElement ('/ / td / span [@ class =' ​​comment ']');

Για να διαγράψετε το κελί (td) που περιέχει το blabla: removeElement ('/ / td / span [@ class =' ​​comment '] / ..');

Για να διαγράψετε όλα τα σχόλια, ακόμη κι αν δεν βρίσκονται σε κυψέλη πίνακα, θα ήταν: removeElement ('/ / span [@ class =' ​​comment ']');

removeAttributeOfElement () 

 ...
μπλα μπλα μπλα
...

Για να καταργήσετε το μέγεθος που υποδεικνύεται σε αυτόν τον πίνακα: removeAttributeOfElement ('width', '// table [@ bgcolor =' # ffe ']');

setAttributeOfElement () 

 ...
...

Για να εξαναγκάσετε το πλάτος του πίνακα: setAttributeOfElement ('πλάτος', '100%', '// table [@ bgcolor =' # ffe ']');

injectCSS ()

Για να αλλάξετε την προεπιλεγμένη γραμματοσειρά σε μια ιστοσελίδα:

injectCSS ('σώμα (γραμματοσειρά-οικογένεια: Verdana, sans-serif;)');

Συνδέσεις

GreaseMonkey Επέκταση: //addons.mozilla.org/fr/firefox/addon/748

GreaseMonkey Εγχειρίδιο: //diveintogreasemonkey.org/

Σημείωση : Το script GreaseMonkey δεν είναι πάντα εύκολο (πρέπει να περιέχει Javascript, DOM, HTML, CSS και XPath προαιρετικά).

Platypus είναι μια επέκταση του Firefox που επιτρέπει την αυτόματη δημιουργία σεναρίων GreaseMonkey:

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

Αλλά ο Platypus έχει την τάση να δημιουργεί κώδικα Javascript που είναι μάλλον αργός και δυσκίνητος.

Προηγούμενο Άρθρο Επόμενο Άρθρο

Οι Καλύτερες Συμβουλές