Προσοχή: την παρούσα στιγμή (16 Αυγούστου 2019) το add-on δεν λειτουργεί λόγω ανανέωσης στο SpaceAPI
Πριν λίγο καιρό έφτιαξα ένα απλό 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 που με βοήθησαν. Κλείνοντας να υπενθυμίσω πως δεν είμαι επαγγελματίας του χώρου της πληροφορικής, ως εκ τούτου ο οδηγός αυτός πιθανότατα περιέχει σφάλματα και ανακρίβειες.
