Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από skeftomilos » 02 Απρ 2005 05:15

Ένα χαρακτηριστικό του web που αρέσει σε όλους μας είναι η ευρυχωρία των επιλογών που προσφέρει. Αν ένα site δε μας αρέσει, δεν είμαστε υποχρεωμένοι να το ανεχτούμε. Φεύγουμε και βρίσκουμε ένα καλύτερο. Η κινητικότητα αυτή εκτός από τις υπηρεσίες που προσφέρει σε μας τους ίδιους, είναι και η κινητήρια δύναμη που κάνει το web συνεχώς καλύτερο. Η επιτυχία αυτής της στρατηγικής έχει ατονήσει τις πιο άμεσες προσπάθειες να αλλάξουμε τα άσχημα χαρακτηριστικά ενός site. Οι μεμονωμένες παρακλήσεις μας προς τους webmasters δεν έχουν συνήθως αποτελέσματα.

Ωστόσο υπάρχουν κάποια πράγματα που μπορούμε να κάνουμε για να λύσουμε μόνοι μας τα πιο στοιχειώδη προβλήματα. Για παράδειγμα μπορούμε να μεγαλώσουμε τα γράμματα αν δε μπορούμε να τα διαβάσουμε. Μπορούμε να καλύψουμε με το χέρι μας ή με ένα άλλο παράθυρο των Windows ένα animated gif που μας αποσπά την προσοχή από το κείμενο (το έχω κάνει πάμπολλες φορές!). Μπορούμε να χρησιμοποιήσουμε custom style sheets (Options -> Accessibility στον IE). Αν χρησιμοποιούμε Firefox μπορούμε ακόμα να εγκαταστήσουμε κάποιο extension όπως το WebDeveloper με δυνατότητες όπως την απόκρυψη όλων των εικόνων της σελίδας.

Πρόσφατα έμαθα για δύο πιο ριζικούς και επαναστατικούς τρόπους να αλλάξουμε το web ώστε να ταιριάζει ακριβώς στα γούστα μας. Δύο τρόπους που επιτρέπουν να τρέξουμε το δικό μας κώδικα JavaScript σε οποιαδήποτε σελίδα του web. Τα Bookmarklets και το Greasemonkey extension του Firefox.

Bookmarklets

Αντί περιγραφής θα σας δείξω τι είναι με ένα παράδειγμα:

Κώδικας: Επιλογή όλων

<a href="javascript&#58;alert&#40;document.title&#41;">Show Title</a>
Αυτός ο HTML κώδικας παράγει ένα ψευδο-link. Δεν είναι ένα κανονικό link που μας μεταφέρει σε μία άλλη σελίδα, αλλά λειτουργεί σαν κουμπί που αν το πατήσουμε θα τρέξει ο JavaScript κώδικας που περιέχει το attribute href. Το συγκεκριμένο script εμφανίζει σε ένα message box τον τίτλο της σελίδας που περιέχει το link:

Εικόνα

Η συγκεκριμένη σελίδα όπως βλέπετε δεν είχε τίτλο. Θα πείτε ότι ο κώδικας αυτός δεν έχει τίποτα έξυπνο. Κάθε φορά που πατάμε το link εμφανίζεται το ίδιο κενό message box. Σωστά. Γιατί ο κώδικας αυτός τρέχει στο context της ίδιας πάντα σελίδας. Τα πράγματα όμως θα ήταν πολύ διαφορετικά αν μπορούσαμε να τρέξουμε τον κώδικα σε κάποια άλλη σελίδα της επιλογής μας. Πώς θα γίνει αυτό? Κάνοντας το link bookmark! Απλούστατο, σατανικά έξυπνο και τρομερά αποτελεσματικό!

Εικόνα

Εικόνα

Εικόνα

Νομίζω ότι καταλάβατε ποιο είναι το ουσιώδες σημείο. Ο κώδικας αποκόπηκε από τη σελίδα στην οποία βρισκόταν αρχικά, και τώρα είναι στη διάθεσή μας να τον τρέξουμε όποτε θέλουμε και σε όποια σελίδα θέλουμε. Οι δυνατότητες που ανοίγονται είναι πολλές και εντυπωσιακές. Όλο το web βρίσκεται ξαφνικά στο έλεός μας, να το κάνουμε ό,τι θέλουμε. Θα δώσω δύο ρεαλιστικά παραδείγματα, χρησιμοποιώντας ως στόχο το ίδιο το forum του FreeStuff. Η επιλογή μου ήταν εξαρχής προβληματική - ένα τόσο καλοσχεδιασμένο site δε μπορείς εύκολα να το βελτιώσεις!

1) Highlight my friend's posts

Κώδικας: Επιλογή όλων

<a href='javascript&#58;hmfp&#40;&#41;;
         function hmfp&#40;&#41; &#123;
           var text = prompt&#40;"Το όνομα του φίλου?"&#41;;
           if &#40;/^\s*$/.test&#40;text&#41;&#41; return;
           var re_text = new RegExp&#40;&#41;.compile&#40;text, "i"&#41;;
           var re_row = new RegExp&#40;&#41;.compile&#40;"row"&#41;;
           var td_list = document.getElementsByTagName&#40;"td"&#41;;
           for &#40;var i = 0; i < td_list.length; i++&#41; &#123;
             var td = td_list&#91;i&#93;;
             if &#40;re_row.test&#40;td.className&#41; && re_text.test&#40;td.innerHTML&#41;&#41; td.style.background = "yellow";
           &#125;
         &#125;'>Highlight my friend's posts</a>
Ενώ κοιτάμε τα θέματα ενός τομέα του forum, θα ήταν ίσως βολικό να εντοπίσουμε οπτικά τα θέματα στα οποία συμμετέχει ένας φίλος. Ο παραπάνω κώδικας μόλις γίνει bookmarklet θα μας επιτρέψει να αλλάξουμε το χρώμα των table-cells που περιέχουν το όνομα του φίλου μας. Το συγκεκριμένο script όπως και το επόμενο προϋποθέτει συγκεκριμένο HTML κώδικα, και δεν είναι σίγουρο ότι θα δουλέψει σε άλλα forums εκτός του FreeStuff.

Εικόνα

Εικόνα

Εικόνα

2) Remove Signatures

Μερικές είναι πνευματώδεις, άλλες είναι χιουμοριστικές, όλες έχουν να πουν κάτι για τον κάτοχό τους, αλλά ... πιάνουν χώρο και γίνονται κουραστικές με την επανάληψη. Ας τις βγάλουμε λοιπόν!

Κώδικας: Επιλογή όλων

<a href='javascript&#58;rFSs&#40;&#41;;
         function rFSs&#40;&#41; &#123;
           var separator = new RegExp&#40;&#41;.compile&#40;"<br/?>_&#123;17&#125;<br/?>", "i"&#41;;
           var span_list = document.getElementsByTagName&#40;"span"&#41;;
           var post_array = new Array&#40;&#41;;
           for &#40;var i = 0; i < span_list.length; i++&#41; &#123;
             if &#40;span_list&#91;i&#93;.className == "postbody"&#41; post_array.push&#40;span_list&#91;i&#93;&#41;
           &#125;
           for &#40;var i = 0; i < post_array.length; i++&#41; &#123;
             var post = post_array&#91;i&#93;;
             var pos = post.innerHTML.search&#40;separator&#41;;
             if &#40;pos >= 0&#41; post.innerHTML = post.innerHTML.substring&#40;0, pos&#41;;
           &#125;
         &#125;'>Remove Signatures</a>
Οι υπογραφές αρχίζουν πάντα με τον εξής HTML κώδικα: <br>_________________<br>
Οτιδήποτε υπάρχει από εκεί και έπειτα σε ένα <span class="postbody"> αφαιρείται. Χρειάστηκε να κάνω αρκετά έξυπνη τη Regular Expression γιατί οι browsers δημιουργούν διαφορετική εσωτερική αναπαράσταση του HTML κώδικα:
- Firefox: <br>_________________<br>
- Internet Explorer: <BR>_________________<BR>
- Opera: <BR/>_________________<BR/>

Εικόνα

Εικόνα

Περιορισμοί των bookmarklet:
- Firefox: Δε φαίνεται να υπάρχει όριο στο μέγεθος του script που μπορεί να αποθηκευτεί ως bookmarklet.
- Opera: Ισχύει το ίδιο.
- Internet Explorer: Η ορολογία είναι διαφορετική: favorites αντί bookmarks. Δε λειτουργούν τα scripts με μέγεθος μεγαλύτερο από 500 bytes περίπου.

Για μεγαλύτερη ευκολία μπορείτε να βρείτε και να εγκαταστήσετε από εδώ τα δύο παραπάνω bookmarklets.

Greasemonkey

Η φιλοσοφία είναι η ίδια, αλλά η εκτέλεση διαφορετική. Εδώ δεν τρέχουμε τα scripts με δική μας παρέμβαση αλλά τρέχουν αυτόματα με το φόρτωμα της σελίδας. Το Greasemonkey είναι extension του Firefox, και μπορείτε να το κατεβάσετε από εδώ. Το ίδιο δεν είναι script, αλλά η υποδομή για να τρέχουν τα δικά μας script. Μόλις το εγκαταστήσετε θα δείτε ότι προστέθηκαν τρεις επιλογές στο μενού tools:

Εικόνα

Τώρα πρέπει να φτιάξουμε ένα κατάλληλο script. Θα κάνουμε μία Greasemonkey εκδοχή του Remove Signatures bookmarklet:

Κώδικας: Επιλογή όλων

// ==UserScript==
// @name            Remove-Signatures
// @namespace       http&#58;//www.brinkster.com
// @description     2005-04-01&#58; Removes user signatures from FreeStuff forums.
// @include         http&#58;//www.freestuff.gr/forums/*
// ==/UserScript==

var separator = new RegExp&#40;&#41;.compile&#40;"<br>_&#123;17&#125;<br>", "i"&#41;
var span_list = document.getElementsByTagName&#40;"span"&#41;
var post_array = new Array&#40;&#41;
for &#40;var i = 0; i < span_list.length; i++&#41; &#123;
  if &#40;span_list&#91;i&#93;.className == "postbody"&#41; post_array.push&#40;span_list&#91;i&#93;&#41;
&#125;
for &#40;var i = 0; i < post_array.length; i++&#41; &#123;
  var post = post_array&#91;i&#93;
  var pos = post.innerHTML.search&#40;separator&#41;
  if &#40;pos >= 0&#41; post.innerHTML = post.innerHTML.substring&#40;0, pos&#41;
&#125;
Πρέπει να σώσουμε το script σε ένα αρχείο στο δίσκο με κατάληξη .user.js, π.χ. Remove-Signatures.user.js. Προσέξτε τώρα το επόμενο βήμα. Πρέπει να ανοίξουμε το αρχείο με το Firefox. Θα κάνουμε δεξί κλικ -> Open with... -> Choose Program... -> Firefox. Μόλις φορτωθεί το script, επιλέγουμε Install User Script... από το μενού Tools:

Εικόνα

Εικόνα

Εδώ επιλέγουμε το site που θα τρέχει το script. Η επιλογή που βλέπετε αντανακλά την αντίστοιχη εγγραφή // @include στο αρχείο .user.js. Αν θέλαμε το script να τρέχει σε κάθε σελίδα, θα βάζαμε ένα σκέτο αστερίσκο *.

Εικόνα

Το script εγκαταστάθηκε. Οποιαδήποτε στιγμή μπορούμε να το απεγκαταστήσουμε, ή να το απενεργοποιήσουμε προσωρινά από την επιλογή μενού Tools -> Manage User Scripts...

Βέβαια το να φτιάχνουμε οι ίδιοι κάθε script που χρειαζόμαστε δεν είναι πολύ ρεαλιστικό. Αυτή τη στιγμή που μιλάμε υπάρχουν εκατοντάδες scripts διαθέσιμα για το Greasemonkey, άλλα γενικής χρήσης κι άλλα κατάλληλα για συγκεκριμένα sites. Η προσωπική μου πρόβλεψη είναι ότι πρόκειται να γίνει χαμός με το GreaseMonkey, και ότι σε λιγότερο από ένα χρόνο θα αποτελεί standard feature του Firefox. Πιθανότατα θα γίνει δυνατή η αξιοποίηση των ίδιων scripts και από άλλους browsers, με αντίστοιχες επεκτάσεις.
:strong:
Τελευταία επεξεργασία από το μέλος skeftomilos την 03 Απρ 2005 03:23, έχει επεξεργασθεί 1 φορά συνολικά.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
geraki
Honorary Member
Δημοσιεύσεις: 1404
Εγγραφή: 26 Ιαν 2004 20:10
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από geraki » 02 Απρ 2005 14:05

skeftomilos!!! Εικόνα
Εικόνα &#8592; Αυτό το έκλεψα απ'τον Eneme.

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από Cmg__ » 02 Απρ 2005 15:05

mas exeis zalisei re psile!

Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27626
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από cordis » 02 Απρ 2005 16:22

και φυσικά έγινε Βοήθημα... :victory:
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
ThyClub
Honorary Member
Δημοσιεύσεις: 5312
Εγγραφή: 17 Νοέμ 2003 00:21
Τοποθεσία: Hell's Kitchen
Επικοινωνία:

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από ThyClub » 02 Απρ 2005 22:25

:clap: :clap: :clap:

Είσαι θεός.

Καλά την υπογραφή μου βρήκες;

:D

Άβαταρ μέλους
KGP
Honorary Member
Δημοσιεύσεις: 5857
Εγγραφή: 18 Ιούλ 2002 01:50
Τοποθεσία: Mr Wonderful

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από KGP » 03 Απρ 2005 00:55

kapios na mas kanei ena brief giati ego -pes te me oti thelete....den echo katalavei...
*Στην Ελλάδα δεν χρειάζεται να σκέφτεσαι...χάνεις πολύτιμο χρόνο!
*"The power of accurate observation is frequently called cynicism by those who don't have it." -George Bernard Shaw (1856-1950)
*The purpose of argument should not be victory, but progress.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από skeftomilos » 03 Απρ 2005 03:25

Cmg__ έγραψε:mas exeis zalisei re psile!
Ούτε ψύλλος στον κόρφο σου! :D
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Rapid-eraser
WebDev Moderator
Δημοσιεύσεις: 6851
Εγγραφή: 05 Απρ 2003 17:50
Τοποθεσία: Πειραιάς
Επικοινωνία:

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από Rapid-eraser » 03 Απρ 2005 03:51

thanks !!!
Cu, Rapid-eraser, Tα αγαθά copies κτώνται.
Love is like oxygen, You get too much you get too high
Not enough and you're gonna die, Love gets you high

Cmg__
Δημοσιεύσεις: 1710
Εγγραφή: 29 Μαρ 2005 22:40

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από Cmg__ » 07 Απρ 2005 00:36

katalaves ti ennoysa fantazomai, mhn paraksigithoyme ki olas , :) :P

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από skeftomilos » 09 Απρ 2005 08:59

KGP έγραψε:kapios na mas kanei ena brief giati ego -pes te me oti thelete....den echo katalavei...
Τα Bookmarklets και το Greasemonkey είναι δύο τρόποι να τρέξουμε δικό μας κώδικα σε μία web σελίδα. Πρόκειται για πλήρη ανατροπή του σκηνικού. Μέχρι σήμερα το scripting ήταν αποκλειστική υπόθεση των δημιουργών των σελίδων. Ο χρήστης δε μπορούσε να παρέμβει με scripting στη συμπεριφορά και εμφάνιση των σελίδων που έβλεπε, και υποθέτω ότι οι ελάχιστοι θα το είχαν φανταστεί ως δυνατότητα. Η επιλογές που είχε ήταν δύο: Take it or Leave it. Τώρα απέκτησε και μία τρίτη: Change it!

Από τους δύο τρόπους αυτούς περισσότερο ενδιαφέρον έχει το Greasemonkey extension του Firefox, γιατί τρέχει τα scripts χωρίς καμία παρέμβαση εκ μέρους του χρήστη. Ο χρήστης απλά εγκαθιστά το script στον Firefox, επιλέγει τα site στα οποία θα τρέχει, και αυτό είναι όλο. Στο εξής κάθε φορά που θα κατεβάζει μία σελίδα του site, ο κώδικας θα τρέχει αυτόματα. Το script τρέχει μόλις έχει κατεβεί όλο το σώμα της HTML σελίδας - όχι οι εικόνες - και λίγο πριν τρέξει το συμβάν onLoad του <body>. Ένα απλό παράδειγμα:

Κώδικας: Επιλογή όλων

<html>
  <body onLoad="alert&#40;'Αγοράστε καραμέλες ZAHAREX, είναι οι καλύτερες!'&#41;">
    <h1>Καραμέλες ZAHAREX</h1>
  </body>
</html>
Η απλούστατη αυτή σελίδα έχει την ιδιότητα να εμφανίζει ένα διαφημιστικό μήνυμα μόλις φορτωθεί:

Εικόνα

Με ένα δικό μας script μπορούμε να επιφέρουμε κάθε είδους αλλαγές που μπορούμε να φανταστούμε. Έστω ότι αποφασίσαμε να κάνουμε τις εξής δύο:

α) Να καταργήσουμε το ενοχλητικό μήνυμα.
β) Να αλλάξουμε το χρώμα του background σε γαλάζιο.

Το script που χρειαζόμαστε είναι το εξής:

Κώδικας: Επιλογή όλων

window.onload = null
document.bgColor = "cyan"
Αν το σώσουμε σε ένα αρχείο με κατάληξη .user.js έχουμε κάνει ένα λειτουργικότατο Greasemonkey script. Μπορούμε να το εγκαταστήσουμε άμεσα με τον τρόπο που περιέγραψα παραπάνω. Θα πρέπει μόνο να ορίσουμε το site το οποίο είναι στόχος του script μας. Αν δεν το κάνουμε θα τρέχει σε όλες ανεξαιρέτως τις σελίδες του web. Για να διευκολύνουμε την εγκατάσταση, μπορούμε να προετοιμάσουμε αυτή τη ρύθμιση:

Κώδικας: Επιλογή όλων

// ==UserScript==
// @include         http&#58;//www.nastyadvertisers.com/*
// ==/UserScript==

window.onload = null
document.bgColor = "cyan"
Μπορούμε να προσθέσουμε περισσότερες οδηγίες @include καθώς και οδηγίες @exclude.

Ο αέρας της αλλαγής που φέρνει το Greasemonkey στο web, μόνο με μία λέξη μπορεί να περιγραφεί: Επανάσταση. Προς το παρόν αφορά ένα μικρό αριθμό χρηστών, και τα διαθέσιμα scripts εξυπηρετούν τις πιο βασικές ανάγκες. Αν ρίξετε μία ματιά θα καταλάβετε αμέσως ποιές είναι αυτές! Και κάπου εδώ αρχίζουν τα ηθικά διλήμματα σχετικά με αυτή τη νέα τεχνολογία. Παραβιάζει τους κανόνες του παιχνιδιού? Άλλοι θα πουν ότι η αρχική σύλληψη του web από τον Tim Berners-Lee δεν ήταν να καταντήσει μία απέραντη συλλογή από διαφημιστικές μπροσούρες. Άλλοι θα αντιπαραθέσουν ότι καλώς ή κακώς η οικονομία του web σήμερα στηρίζεται στη διαφήμιση, και χωρίς αυτή θα καταρρεύσει σα χάρτινος πύργος. Η προσωπική μου γνώμη είναι ότι τέτοιου είδους ηθικά διλήμματα έχουν ζωή έξι ως δώδεκα μήνες το πολύ και μετά ξεχνιούνται. Αν ο χρήστης για να διαβάσει 100 λέξεις κειμένου είναι αναγκασμένος να υποστεί 200KB διαφημίσεων πάνω, κάτω, δεξιά, αριστερά και ενδιάμεσα, τι να σου κάνει το ηθικό κριτήριο! Επομένως η αντίδραση των διαφημιστών στην τεχνολογία πρέπει να είναι τεχνολογική. Για παράδειγμα η σελίδα που είδαμε παραπάνω μπορεί να παρακάμψει τα εμπόδια που εγείρει το Greasemonkey script με το παρακάτω τρόπο:

Κώδικας: Επιλογή όλων

<html>
  <body>
    <h1>Καραμέλες ZAHAREX</h1>
    <script type="text/javascript">
      alert&#40;'Αγοράστε καραμέλες ZAHAREX, είναι οι καλύτερες!'&#41;
    </script>
  </body>
</html>
Τώρα το μήνυμα εμφανίζεται πριν προλάβει να το μπλοκάρει ο λιγδερός πίθηκος!

Το δικό μου ενδιαφέρον για τα Bookmarklets και το Greasemonkey δεν εστιάζεται στον ανελέητο τεχνολογικό πόλεμο που πρόκειται να ξεσπάσει οσονούπω μεταξύ πυροβόλου και θώρακος, αλλά στις δυνατότητες customization που προσφέρουν. Ως παράδειγμα ετοίμασα ένα ακόμα Greasemonkey script για το FreeStuff, το FreeStuff-Veteran. Απευθύνεται στους έμπειρους χρήστες που θέλουν να αποσυμφορήσουν τις σελίδες των topics από επαναλαμβανόμενα στοιχεία που ήδη γνωρίζουν. Συγκεκριμένα κρύβει τα στοιχεία και τις υπογραφές των χρηστών που έχουν συνολικό αριθμό μηνυμάτων μεγαλύτερο από 100. Επιπλέον προσθέτει ένα ψευδο-link που επιτρέπει την επανεμφάνιση αυτών των στοιχείων κατά βούληση:

Εικόνα -> Εικόνα

Το script αναμένει πολύ συγκεκριμένο HTML κώδικα. Μία μικρή αλλαγή στα templates των σελίδων από τον Admin και αντίο ζωή! :D
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από skeftomilos » 21 Μάιος 2005 03:47

Η ζωή είναι ωραία με τον Firefox, αλλά καμιά φορά κάτι λείπει για να είναι όλα τέλεια. Μία λεπτομέρεια που κάνει αισθητή την απουσία της είναι η πληροφορία "saved from" όταν σώζουμε μία σελίδα στο δίσκο για offline χρήση. Ο Internet Explorer έχει αυτό το χαρακτηριστικό εδώ και πολύ καιρό, αλλά φαίνεται ότι διέφυγε της προσοχής ή δε θεωρήθηκε αρκετά σημαντικό από την ομάδα σχεδίασης του Firefox. Απ' όσο είδα δεν υπάρχει κάποιο extension που να κάνει αυτή τη δουλειά.

Για όσους δεν το γνωρίζουν, ο Internet Explorer προσθέτει το URL της σελίδας στην αρχή του HTML κώδικα. Η προσθήκη έχει τη μορφή HTML σχολίου, δηλαδή κάπως έτσι:

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=&#40;0031&#41;http&#58;//samsung.com/index_01.htm -->
<HTML><HEAD><TITLE>SAMSUNG's Digital World</TITLE>
...
Αυτή η πληροφορία μας επιτρέπει να γνωρίζουμε το URL από το οποίο κατεβάσαμε τη σελίδα. Χωρίς αυτήν, η ανεύρεση του URL γίνεται αρκετά δύσκολη και χρονοβόρα υπόθεση (συνήθως περιλαμβάνει googling). Βέβαια για τους περισσότερους η αποθήκευση σελίδων στο δίσκο μοιάζει μάλλον άχρηστη από τη στιγμή που υπάρχουν τα bookmarks. Υπάρχουν όμως και μερικοί ανώριμοι και συναισθηματικά ασταθείς χρήστες με αθεράπευτες κτητικές ψυχώσεις, που θέλουν σώνει και καλά να σώζουν στο δίσκο τους κάθε σελίδα που επισκέπτονται. Επειδή ενδέχεται να είμαστε περισσότεροι από ένας, ετοίμασα ένα μικρό Greasemonkey script που προσθέτει σε κάθε σελίδα το URL της, μαζί με λίγες ακόμα πληροφορίες:

Κώδικας: Επιλογή όλων

// ==UserScript==
// @name            Saved From
// @namespace       http&#58;//www50.brinkster.com/zlib13
// @description     Includes "saved from" information to pages saved for offline use.
// @include         http&#58;//*
// ==/UserScript==

saved_from&#40;&#41;

function saved_from&#40;&#41; &#123;
  var s = ""
  if &#40;document.URL != ""&#41; s += ' url="' + document.URL + '"'
  if &#40;document.referrer != ""&#41; s += ' referrer="' + document.referrer + '"'
  s += ' saved-date="' + new Date&#40;&#41;.toUTCString&#40;&#41; + '"'
  if &#40;document.lastModified != ""&#41; s += ' last-modified="' + document.lastModified + '"'
  if &#40;s != ""&#41; &#123;
    s = " saved from" + s + " "
    document.insertBefore&#40;document.createComment&#40;s&#41;, document.documentElement&#41;
  &#125;
&#125;
Εκτός από το URL προσθέτει και τις ημερομηνίες αποθήκευσης και τελευταίας μεταβολής του αρχείου, καθώς και τη σελίδα Referrer, την προηγούμενη δηλαδή σελίδα που επισκεφτήκαμε και περιείχε το link προς αυτή. Εγκατέστησα το script με το γνωστό τρόπο και κατέβασα και έσωσα μια σελίδα για να δω αν λειτουργεί:

Κώδικας: Επιλογή όλων

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url="http&#58;//www.freestuff.gr/forums/index.php" saved-date="Fri, 20 May 2005 09&#58;38&#58;14 GMT" last-modified="Friday, May 20, 2005 12&#58;38&#58;08" -->
<html dir="ltr"><head>
...
Πολύ ωραία. Όμως ακόμα καλύτερα θα ήταν να υπήρχε και κάποιος τρόπος να δούμε αυτές τις πληροφορίες χωρίς να ανοίξουμε το αρχείο στο Notepad. Αυτό θα μπορούσε να γίνει εύκολα με ένα script στο SendTo:

Εικόνα

Εικόνα

Το script Saved-From-Info.js το έχω επισυνάψει κάτω-κάτω, για να μη γεμίσουμε το post με κοινότυπο κώδικα. Το πρόβλημα τώρα είναι ότι θα θέλαμε να αντιγράψουμε το URL στο Clipboard, αλλά το message box που εμφανίζεται δε μας επιτρέπει κάτι τέτοιο. Το δεύτερο script (Saved-From-Clipboard.js) είναι μία παραλλαγή που κάνει ακριβώς αυτό, αποθηκεύει δηλαδή το URL στο clipboard:

Εικόνα

Όμως έτσι μπορεί να αποθηκευτεί μόνο ένα URL κάθε φορά. Μια ωραία ιδέα θα ήταν να φτιάξουμε επιτόπου μία αυτοματοποιημένη σελίδα που να περιέχει τα URL με μορφή links, έτοιμα για κλικ. Αυτό το κάνει το τρίτο script (Saved-From-List-IE.js):

Εικόνα

Χρησιμοποίησα τις δυνατότητες automation που παρέχει ο IE, αν και θα το προτιμούσα να άνοιγε η σελίδα στον Firefox. Αυτό μπορεί να γίνει εύκολα με τη δημιουργία και το άνοιγμα ενός προσωρινού αρχείου .htm στο φάκελο Temp. Αυτό το λόγο ύπαρξης έχει το τέταρτο script (Saved-From-List-Firefox.js):

Εικόνα
Συνημμένα
saved-from.zip
Saved-From-v1.0.user.js (Greasemonkey script)
Saved-From-Info.js
Saved-From-Clipboard.js
Saved-From-List-IE.js
Saved-From-List-Firefox.js
(3.89 KiB) Μεταφορτώθηκε 1005 φορές
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
EkLekTos
WebDev Moderator
Δημοσιεύσεις: 7421
Εγγραφή: 07 Απρ 2005 15:44
Τοποθεσία: Inside the Effects
Επικοινωνία:

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από EkLekTos » 21 Μάιος 2005 14:38

:yea: :yea: :clap: :clap: :clap: :clap:
* Apple Technical Support Specialist *
* Apple Sales & Product Professional Certificate since 2011 * Εικόνα
Follow me @Twitter

Άβαταρ μέλους
janas
Δημοσιεύσεις: 452
Εγγραφή: 19 Οκτ 2004 11:29
Τοποθεσία: ΑΘΗΝΑ
Επικοινωνία:

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από janas » 21 Μάιος 2005 18:45

skeftomilos, you are my leader-teacher in javascript

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από skeftomilos » 21 Μάιος 2005 22:08

Η προσθήκη του IE έχει την παρακάτω μορφή:

Κώδικας: Επιλογή όλων

<!-- saved from url=&#40;0031&#41;http&#58;//samsung.com/index_01.htm -->
Ο μυστηριώδης αριθμός μέσα στις παρενθέσεις είναι το άθροισμα των γραμμάτων του URL. Ο IE δεν προσθέτει το url μόνο για πληροφοριακούς λόγους, αλλά το χρησιμοποιεί για να καθορίσει τη security zone που ανήκει μία σωσμένη σελίδα. Επομένως το άνοιγμα με τον IE μίας σελίδας που σώθηκε με τον Firefox μπορεί να είναι επικίνδυνο. Για περισσότερες πληροφορίες δείτε το άρθρο του MSDN Mark of the Web.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Άβαταρ μέλους
Rapid-eraser
WebDev Moderator
Δημοσιεύσεις: 6851
Εγγραφή: 05 Απρ 2003 17:50
Τοποθεσία: Πειραιάς
Επικοινωνία:

Το web για ασυμβίβαστους: Bookmarklets, Greasemonkey

Δημοσίευση από Rapid-eraser » 27 Ιούλ 2005 18:52

Kai elega pote 8a bgei pote 8a bgei :) Na pou bgike !!!
Greasemonkey ... n poli elef8eria 8a mas kapsei ...

Lipov avakivo8ike episima oti to Greasemonkey eivai officialy mia orea tripoula sto sistima mas :)
To problima afto divei divatotita sto scripter va diabasei kai va kavei list ta local arxeia mas :)

To problima egite se sxediastiko la8os opou kapoies
function "GM_*" (opos GM_xmlhttpRequest , GM_getValue) mporouv va xrisimopii8ouv gia va parei kapoios plirofories apo to sistima mas (arxeia/fakeli kai diabasma aftwv)

Fisika exei avakivo8ei kai exploitaki proof of concept.
Kai gia kali tixi aftwv pou to xrisimopiouv bgikav ta prota patch gia to problimataki :P

Patch
Cu, Rapid-eraser, Tα αγαθά copies κτώνται.
Love is like oxygen, You get too much you get too high
Not enough and you're gonna die, Love gets you high

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες