extension


Πως να φτιάξτε ένα απλό add-on για Firefox και Chrome

Πριν λίγο καιρό έφτιαξα ένα απλό add-on για Firefox και Chrome/Chromium ώστε να μπορεί να τσεκάρει κανείς από τον desktop browser του αν είναι ανοιχτό το hackerspace της Αθήνας. Παρακάτω θα γράψω επιγραμματικά πως το έφτιαξα. Φυσικά, ο κώδικας του add-on είναι διαθέσιμος κάτω από άδεια ελεύθερου λογισμικού.

Πρώτα πριν μπούμε στην διαδικασία να εξετάσουμε την ίδια την λειτουργικότητα του add-on.

Έχουμε ένα φυσικό χώρο, το hackerspace της Αθήνας (yeaheee!). Αυτός ο χώρος ουσιαστικά ανοίγει όποτε έχουμε κάποιο event ή είναι κάποιος από τους διαχειριστές του εκεί. Πως θα μπορούσαμε να γνωρίζουμε πότε είναι ανοιχτός εκτός event;

 

To hackerspace στην αρχική του σελίδα στο web έχει ένα “counter” που δείχνει αν και κατά πόσο ο χώρος αυτός είχε ανοίξει για επισκέπτες. Πως όμως το κάνει αυτό;  Το hackerspace όπως τα περισσότερα hackerspace του κόσμου ακολουθεί ένα πρωτόκολλο που λέγεται SpaceAPI αυτό μας δίνει τις απαραίτητες πληροφορίες για το αν είναι ανοιχτό. Το SpaceAPI είναι ένα output τύπου JSON (Javascript Object Notation), ένα από τα ωραία χαρακτηριστικά του είναι ότι είναι εύκολο για τους ανθρώπους να το διαβάσουν και εύκολο για τις μηχανές να το παράγουν και να το καταλάβουν.

Ωραία αν πάμε λοιπόν στο SpaceAPI του hackerspace θα δούμε κάτι σαν αυτό.

    "state": {
        "open": false,
        "lastchange": 1483908306,
	"message": "0 hacker(s) in space"
    },

Από εκεί έχουμε τις ακόλουθες πληροφορίες σύμφωνα με το documentation του SpaceAPI, πρώτον αν είναι όντως ανοιχτό το hackerspace και δεύτερον ένα μήνυμα που στην περίπτωση του hackerspace της Αθήνας μας λέει πόσα άτομα είναι μέσα. Πολύ ωραία… φαίνεται λοιπόν ότι μπορούμε να έχουμε αρκετές πληροφορίες για να φτιάξουμε το add-on μας σχετικά εύκολα. Για να δούμε όμως πως θα το κάνουμε.

Ο αρχικός μου σκοπός ήταν να δημιουργήσω ένα add-on για τον Firefox καθώς εδώ και αρκετά χρόνια είναι ο browser που προτιμώ. Μια εξαιρετική πηγή πληροφορίας για τις web τεχνολογίες είναι το Mozilla Developer Network ή MDN το οποίο έχει ένα σωρό πληροφορίες. Σύμφωνα με το σχετικό άρθρο, στον Firefox έχουμε διάφορα εργαλεία και τρόπους για να φτιάξουμε ένα add-on.

Στην περίπτωση μας ποιο είναι το βέλτιστο εργαλείο για την δημιουργία ενός add-on; Διαβάζοντας στην συνέχεια διαπιστώνουμε ότι από το τέλος του 2017 και μετά τα WebExtensions θα είναι το στάνταρ εργαλείο για την δημιουργία add-on, επίσης ένα από τα θετικά τους είναι ότι είναι φτιαγμένα για να δουλεύουν με το ίδιο πρακτικά κώδικα στους περισσότερους σύγχρονους browser όπως o FIrefox, ο Chrome, ο Edge και ο Opera.

Πρακτικό ακούγεται για να δούμε πόσο εύκολο είναι. Ουσιαστικά πρόκειται για μια συλλογή από αρχεία που περιγράφονται από ένα manifest.json και αυτά ουσιαστικά μπορεί να είναι html ή js που κάνουν χρήση κάποιον API του browser. Από ότι φαίνεται, έχουμε και τα απαραίτητα εργαλεία για να φτιάξουμε το αρχείο μας και να το δοκιμάσουμε. Ένα text-editor και ένα browser. Καλό είναι να τα έχουμε όλα μαζεμένα σε ένα directory ξεχωριστό στο οποίο θα τα δουλέψουμε.

Για να τα βάλουμε σε μια σειρά, θέλουμε να φτιάξουμε ένα add-on που θα έχει ένα εικονίδιο, στο background θα τρέχει ένα loop ελέγχου που θα τσεκάρει το JSON του hackerspace και θα μας λέει αν είναι ανοιχτό, και μιας και οι φανταστικοί sys-admin του hackerspace μας λένε πόσο κόσμο έχει μέσα θα δείχνουμε και αυτό, επίσης θα προσθέσουμε λειτουργικότητα ώστε όταν κάνουμε κλικ πάνω στο εικονίδιο να μας δείχνει το κεντρικό site του hackerspace.

Διαβάζοντας λοιπόν το εκτενές documentation που έχουμε θα πρέπει το manifest.json μας να μοιάζει κάπως έτσι.

{
    "description": "Adds a browser icon that shows if hackerspace.gr is open, it displays a counter of people inside.",
    "manifest_version": 2,
    "name": "hsgr-status-checker",
    "version": "0.1.6",
    "homepage_url": "https://hackerspace.gr",
    "icons": {
        "32": "icons/hsgr-32.png"
    },
    "applications": {
        "gecko": {
            "id": "elkos@hackerspace.gr",
            "strict_min_version": "45.0"
        }
    },
    "background": {
        "scripts": ["jquery.js", "background.js"]
    },
    "browser_action": {
        "default_icon": "icons/hsgr-32.png",
        "default_title": "hsgr status",
        "default_popup": "popups/popup.html"
    }
}

Δηλαδή περιγράφουμε το add-on στο “description”, η έκδοση του manifest (υπάρχουν και παλαιότερες στο Chrome), το όνομα του add-on στο “name”, η ιστοσελίδα του στο “homepage_url” (έβαλα το αρχικό website), ένα εικονίδιο για το UI (μπορείτε να βάλτε περισσότερα αν θέλετε), το “applications” ορίζει σε πια έκδοση του gecko (της μηχανής του Firefox θα παίζει έβαλα πάνω από 45 για να μην έχουμε θέμα με παλαιότερες εκδώσεις που δεν υποστηρίζουν όλα τα API), και δύο αρχεία στο “background” το ένα είναι η βιβλιοθήκη jquery.js για να μπορώ να δουλέψω άνετα με το JSON API, και το background.js που θα είναι ο κώδικας που τρέχει στο background. Επίσης λέω ότι θέλω να βάλω ένα εικονίδιο στο browser που θα το βρούμε εκεί, και θα έχει αυτό το τίτλο και όταν πατάς το εικονίδιο βγάζει ένα popup που το βρίσκει στο /popups/popup.html αρχείο.

Τί θα βάλω όμως στο background.js μου;  Πρώτα θα ορίσω το doorAPI που θα το βρώ;

var doorURL = 'https://www.hackerspace.gr/spaceapi';

Ωραία, τώρα θα φτιάξουμε ένα function που θα τσεκάρει η jquery με ένα απλό GET το σημείο που είναι το SpaceAPI.

function checker() {
    $.ajax({
         type: 'GET',
         url: doorURL,
         dataType: 'json',

Στην περίπτωση που αυτό δουλεύει λοιπόν τσεκάρουμε αν το hackerspace είναι ανοιχτό:

success: function(data) {
    if (data.state.open) {

Τώρα λοιπόν θα αλλάξουμε τον τίτλο του εικονιδίου ώστε να δείχνει ότι είναι ανοιχτό και πόσο κόσμο έχει μέσα, μετά αλλάζουμε το εικονίδιο (το αντικαθιστούμε με ένα πράσινο) και προσθέτουμε και ένα badge που τον αριθμό των hacker που μας δίνεται από το “state.message”. Ο αριθμός προκύπτει ουσιαστικά χρησιμοποιώντας regular expressions ώστε να μας βγάζει μόνο τα νούμερα το output, με αποτέλεσμα να έχουμε κάτι που μοιάζει με αυτό. Επίσης ορίζω το χρώμα του background του badge ως #808080 ή γκρι σκούρο για να μην βγάζει μάτι.

                 chrome.browserAction.setTitle({title: 'HSGR is open with ' + (data.state.message).replace(/\D/g, '') + ' hackers'});
                 chrome.browserAction.setIcon({path: 'icons/openhsgr-32.png'});
                 chrome.browserAction.setBadgeText({text: (data.state.message).replace(/\D/g, '')});
chrome.browserAction.setBadgeBackgroundColor({color: '#808080'});

Στην περίπτωση που το hackerspace δεν είναι ανοιχτό τότε θα αλλάξουμε το τίτλο, θα αλλάξουμε το icon στο μαύρο, και δεν θα έχουμε badge κείμενο.

             } else {
                 chrome.browserAction.setTitle({title: 'HSGR is closed'});
                 chrome.browserAction.setIcon({path: 'icons/hsgr-32.png'});
                 chrome.browserAction.setBadgeText({text: ''});

Αν τώρα το αφήσουμε έτσι θα παίξει μια φορά και αυτό ήταν, εγώ θέλω να λειτουργεί σχετικά τακτικά. Θα βάλουμε λοιπόν ένα interval για να παίζει μια φορά κάθε 15 λεπτά.

checker();
setInterval(checker, 15 * 60 * 1000);

Ωραία με το background θα πρέπει να είμαστε OK. Όσο αφορά το popup τώρα, είπα να ακολουθήσω την πλέον εύκολη και άσχημη λύση του iframe.

<html>
<head>
  <style type="text/css">
	  body {width:500px; height:500px;}
  </style>
</head>
<body>
  <iframe src="https://www.hackerspace.gr" width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>

Μέχρι εδώ καλά, πως θα το δοκιμάσω όμως; Πάμε στο about:debugging του Firefox πατάμε εκεί που λέει “Load Temporary Add-on” και ανοίγουμε οποιοδήποτε αρχείο μέσα στο directory του add-on που φτιάξαμε πχ το manifest.json. Φαίνεται να δουλεύει.

Τώρα, πως το δίνουμε στο κόσμο; Πρώτα πρέπει να ετοιμάσουμε το αρχείο μας. Δημιουργούμε ένα αρχείο .zip. Στο Linux σε γραμμή εντολών αυτό το κάνουμε ως εξής:

Πρώτα “πάμε” στο κατάλογο που έχουμε τα αρχεία του add-on μας όπου φυσικά path/to/my-addon/ το directory με τα διάφορα αρχεία του προγράμματος.

cd path/to/my-addon/

Και μετά δίνουμε την εντολή

zip -r ../my-addon.zip *

Θα δημιουργηθεί ένα νέο αρχείο zip το my-addon.zip.

Για το add-on gallery του Mozilla πάμε στο addons.mozilla.org και ανεβάζουμε το αρχείο μας, αφού γίνει ένα βασικό check από διάφορα scripts ελέγχου τότε ανεβαίνει για review. Αυτό ουσιαστικά σημαίνει ότι ο κώδικας μας τσεκάρεται από κάποιο εθελοντή του Mozilla, επιβεβαιώνεται η ορθή λειτουργία του και συνιστούνται καλές πρακτικές, στο σημείο αυτό ελέγχεται και η πιθανή παρουσία κακόβουλου κώδικα. Αυτό στην περίπτωση μου σήμαινε 3-4 μέρες αναμονής.

Στην περίπτωση του Chrome τα πράγματα δεν είναι ακριβώς έτσι, αφού ανεβάσουμε το αρχείο μας και τσεκαριστεί από διάφορα scripts ελέγχου αυτό ήταν. Ανεβαίνει, χωρίς να περάσει από την επίβλεψη κάποιου.

Θα μου πείτε, και τί έγινε; Στην περίπτωση του Chrome ανεβαίνει ποιο γρήγορα χωρίς γραφειοκρατεία. Σωστά; Όχι ακριβώς. Μπορεί ένας “κακόβουλος” developer να βάλει κώδικα που ελέγχει η παρουσία του χρήστη online ή ακόμη και να εκμεταλλευτεί πολλές από τις δυνατότητες του browser.

Θεωρώ, ότι ως πρακτική η επιλογή του Mozilla να ελέγχει το κώδικα που τρέχουν τα add-on αν και πιο χρονοβόρα είναι τουλάχιστον για εμάς τους χρήστες η πλέον ορθή πρακτική.

Όλα αυτά δεν θα τα κατάφερνα χωρίς την βοήθεια, και την καθοδήγηση μελών και επισκεπτών του hackerspace που με βοήθησαν. Κλείνοντας να υπενθυμίσω πως δεν είμαι επαγγελματίας του χώρου της πληροφορικής, ως εκ τούτου ο οδηγός αυτός πιθανότατα περιέχει σφάλματα και ανακρίβειες.


Flash cookies και πως να τα ξεφορτωθείτε. 4

Cookie, AnyoneΦανταστείτε ένα cookie που:

  • Παραμένει στον υπολογιστή σας για απεριόριστο χρόνο
  • Αποθηκεύει τουλάχιστον 100kb δεδομένων και δεν έχει ανώτατο όριο μεγέθους
  • Δεν εντοπίζεται από το browser σας
  • Αποστέλλει δεδομένα για τα site που έχετε επισκεφθεί, χωρίς τη αδειά σας
  • Έχει την δυνατότητα να ενεργοποιεί ξανά http cookies
  • Ακόμη και αν χρησιμοποιείτε περισσότερους από έναν browser το cookie παίζει σε όλους!

Και όμως υπάρχουν, ονομάζονται Local Shared Objects και είναι βασικό στοιχείο του Flash. Αν πιστεύετε ότι χρησιμοποιώντας τις δυνατότητες για ιδιωτικό browsing του browser σας θα την σκαπουλάρετε, χάσατε. Ο browser σας δεν γνωρίζει (ούτε έχει τρόπο να γνωρίζει) ότι λάβατε αυτά τα cookies γιατί φορτώνονται από το Flash.

Το Flash όμως δεν έχει ρυθμίσεις για τις ιδιωτικές πληροφορίες που αποθηκεύει στο μηχάνημα σας, συνεπώς τι κάνουμε; Ο Iamasuper προτείνει να  πάμε κατ’ αρχάς στο site της Macromedia (η εταιρεία που έβγαζε το Flash πριν την αγοράσει η Adobe) υπάρχει το Website Storage Settings panel. Σε αυτό θα δείτε ένα μικρό εφαρμογίδιο γραμμένο (φυσικά) σε Flash(!). Αν πάτε στην πρώτη από τα δεξιά καρτέλα σας δίνει και πατήστε “Delete All Sites” θα σβήσει όλα τα LSO που υπάρχουν στον υπολογιστή σας. Τώρα για να μην επιτρέπετε τα διάφορα site να βάζουν LSO στον υπολογιστή σας θα πρέπει πρέπει να πάτε στο Website Storage Settings panel και στην δεύτερη καρτέλα να μετακινήστε το slider από τα 100kB στο μηδέν και να ξετσεκάρετε εκεί που λέει “Allow Third Party Flash Content to store data on your computer”

Αν είστε σε περιβάλλον Linux και θέλετε να ξεφορτωθείτε τα Flash υπάρχει και πιο άμεση λύση που είναι να πληκτρολογήστε σε κονσόλα όπως προτείνει o Sam Ruby .

rm -rf ~/.macromedia/Flash_Player/#SharedObjects/*/*
chmod 0500 ~/.macromedia/Flash_Player/#SharedObjects/*
rm -rf ~/.macromedia/Flash_Player/macromedia.com/support/flashplayer/sys/*
chmod 0500 ~/.macromedia/Flash_Player/macromedia.com/support/flashplayer/sys

Οι χρήστες του Firefox μπορούν να εγκαταστήσουν το ειδικό add-on BetterPrivacy και οι χρήστες του Chrome το Click&Clean


Οι Έλληνες στο Google Summer Of Code 10

Παρά την πεποίθηση ότι η ανάπτυξη ελεύθερου λογισμικού στην Ελλάδα είναι περιορισμένοι υπάρχουν αρκετοί νέοι προγραμματιστές που κατάφεραν και μπήκαν στο Google Summer Of Code για το έτος 2009. Πάντα επιτυχίες παιδιά.

Ευστάθιος Καμπέρης: C99/POSIX Conformance Audit για το DragonFly BSD.

Ηλίας Μαρίνος: Application-Specific Audit Trails για το FreeBSD

Φώτης Χατζής :  Ncat & General Feature Extension για το Nmap Security Scanner

Δημήτρης Διακόπουλος: Openframeworks toolkit for developing multi-touch musical interfaces για το Natural User Interface Group

Γιάννης Μπελιάς: GPhoto configuration backend for Oyranos για το OpenICC

Σίμος Ξενιτέλλης: International Input (X11) για το Simple DirectMedia Layer

Γιώργος Πολίτης: Ηush-hush chats with Off The Record (OTR) messaging για το SIP communicator.

Αλέξανδρος Στεργιάκης: Improve GIS support in Tcl για το Tcl Community Association

Παρασκευή Νικολαΐδου: HTTP/1.1 support and Chameleon, native look for Tk widgets για το Tcl Community Association

(ίσως η λίστα να μην είναι πλήρης και να μου έχει διαφύγει κάποιος, παρακαλώ ενημερώστε με σχετικά)

και έτσι έγινε:

ο Γιώργος Κιαγιαδάκης: Voip Client για το KDE

Επίσης ο Νίκος Κουρεμένος είναι μέντορας για λογασιασμό του Python Software Foundation στο project του Jeffrey Ling  Gajim: Whiteboard Implementation.

και ο Διομήδης Σπινέλλης είναι μέντορας για λογαριασμό του FreeBSD Project στο project της  Tatsiana Elavaya: ipfw ruleset optimization and highlevel rule definition language.


αναγνώστες RSS για τον Firefox 3

Μια από τις αγαπημένες μου τεχνολογίες είναι οι ροές RSS, προσωπικά χρησιμοποιώ ένα μίγμα online υπηρεσιών και readers που παλεύω να συγχρονίσω αλλά αυτό είναι το θέμα μελλοντικού άρθρου. Ένας αναγνώστης του blog χρησιμοποιήσε την φόρμα επικοινωνίας και μου έκανε μια αρκετά καλή ερώτηση. Αν υπάρχει κάτι αντίστοιχο του αναγνώστη RSS του Opera στον Firefox. Που είναι ναι μεν αρκετά ελαφρής και αποδοτικός αλλά ιδιαίτερα εύχρηστος από την άλλη.

Να πώ την πάσα αλήθεια η γνώμη μου για την Opera είναι πολύ καλή. Πιστεύω ότι τα προϊόντα της είναι ότι καλύτερο μπορούμε να δούμε σε αυτή την κατηγορία λογισμικού από μια εταιρεία που παράγει κλειστό κώδικα. Σίγουρα τα Live bookmarks αποτελούν μια ενδιαφέρουσα καινωτομία αλλά δεν νομίζω ότι είναι σε θέση να αντικαταστήσουν πλήρως ένα σύγχρονο αναγνώστη RSS.

Από την άλλη να πω την αλήθεια δυσκολεύομαι να επιλέξω στην πληθώρα των αναγνωστών που υπάρχουν τον καταλληλότερο για να αντικαταστήσει την λειτουργικότητα του Opera σε αυτό το τομέα.  Αυτό συμβαίνει όχι λόγω έλλειψης πρόσθετων για τον Firefox αλλά αντιθέτως λόγω υπερπληθώρας. Να δούμε τα πράγματα όμως λίγο περισσότερο αναλυτικα.

Όσοι θέλουν ένα απλό βασικό αναγνώστη που θα κάνει την δουλειά απλά και ωραία τότε δοκιμάστε το Simple RSS Reader. Παρά την απλοποιημένη εικόνα το αποτέλεσμα είναι αρκετά καλό και εύκολο στην χρήση και την εκμάθηση, και αν και στερήται πολλών μοντέρνων καλουδιών μπορεί άνετα να χαρακτηριστεί ένας πλήρης αναγνώστης RSS που θα ικανοποιήσει τις ανάγκες σας χωρίς ιδιαίτερη δυσκολία.

Φυσικά όπως είπα πριν οι επιλογές σας πραγματικά είναι πάρα πολλές έτσι πρέπει να εξετάστε την πιθανότητα να καλύπτει τις ανάγκες σας το RSS Ticker Ουσιαστικά το RSS Ticker έλεγχει τα Live Bookmarks του Firefox και τα παρουσιάζει σαν κείμενο που κινείται ενώ εσείς σερφάρετε στο www. Να πω την πάσα αλήθεια η λογική του δεν με ενθουσιάζει καθώς δε θα μπορούσα ποτέ να συγκεντρωθώ για να γράψω 2-3 αράδες. (θα μου πείτε: Μα ρε Λευτέρη ούτε τώρα συγκεντρώνεσαι… δεν έχετε άδικο φυσικά).

‘Ενα από τα αγαπημένα μου extension για ανάγνωση RSS είναι το Wizz News Reader και το αδελφάκι του Wizz News Reader Lite (που ουσιαστικά είναι μια περισσότερο απλοποιημένη έκδοση). Σαφώς πρέπει να πω ότι το Wizz News Reader είναι ένα από τα πιο φορτωμένα όσο αφορά της λειτουργείες του πρόσθετα ανάγνωσης RSS για τον Firefox που εξελίσσωνται αυτή την στιγμή.

Αντίπαλο δέος του Wizz News Reader είναι το Sage. Το Sage είναι έπισης ένας αξιόλογος αναγνώστης RSS αν και συγκριτικά με το Wizz είναι περισσότερο λιτός ωστόσο αποτελεί μια αξιόλογη εναλλακτική. Πρέπει να επισημανθεί ότι το Sage είναι ένας από τους παλαιότερους και δημοφηλέστερους RSS read.