Tabel: Πώς έφτιαξα το δικό μου Chrome extension με AI και πώς μπορείς να το χρησιμοποιήσεις

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

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

Έτσι προέκυψε το Tabel. Ένα δωρεάν Chrome extension που αποθηκεύει τις καρτέλες σε ομάδες, τις κλείνει και σου επιτρέπει να τις ανοίξεις ξανά όταν τις χρειαστείς. Παράλληλα, συγχρονίζει τις αποθηκευμένες ομάδες μεταξύ των υπολογιστών σου μέσω Chrome Sync.

Παρακάτω θα δούμε πώς ξεκίνησε, πώς κατασκευάστηκε με τη βοήθεια του AI και πώς μπορείς να το εγκαταστήσεις και να το χρησιμοποιήσεις.

Από το OneTab στην ανάγκη για κάτι δικό μου

Είχα δοκιμάσει αρκετά εργαλεία διαχείρισης Tabs. Για μεγάλο διάστημα χρησιμοποιούσα το OneTab, το οποίο είχα συμπεριλάβει και στη σελίδα My Stack.

Με εξυπηρετούσε στη συγκέντρωση των ανοιχτών tabs. Με τον καιρό, όμως, ήθελα περισσότερα από την οργάνωση και τη διαχείρισή τους. Η εξέλιξή του, όπως τη βίωνα ως χρήστης, δεν κάλυπτε όσα περίμενα.

Ήθελα να επιλέγω ποιες καρτέλες θα αποθηκεύσω, να τις οργανώνω σε ομάδες και να αλλάζω εύκολα τη σειρά τους. Να βρίσκω γρήγορα έναν σύνδεσμο και να έχω τις ίδιες αποθηκευμένες ομάδες συγχρονισμένες στους υπολογιστές μου.

Δοκίμαζα εναλλακτικές, αλλά καμία δεν συνδύαζε όλα αυτά όπως με βόλευαν. Τελικά αποφάσισα να δημιουργήσω το δικό μου εργαλείο, προσαρμοσμένο στον τρόπο που δουλεύω.

Πώς κατασκευάστηκε το Tabel με τη βοήθεια του AI

Ήταν η πρώτη φορά που δημιουργούσα Chrome extension. Η AI με βοήθησε να προχωρήσω στην υλοποίηση, έχοντας ως αφετηρία ένα συγκεκριμένο καθημερινό πρόβλημα.

Ήξερα τι ήθελα να κάνει η εφαρμογή και μπορούσα να αξιολογώ το αποτέλεσμα χρησιμοποιώντας την ο ίδιος. Αυτό έδινε συγκεκριμένη κατεύθυνση στην ανάπτυξη.

Οι τεχνολογίες που χρησιμοποιεί

Το Tabel βασίζεται σε HTML, CSS και JavaScript. Χρησιμοποιεί το Manifest V3 και τις λειτουργίες που παρέχει το Chrome στις επεκτάσεις.

Το αρχείο manifest περιγράφει στο Chrome το όνομα της επέκτασης, τις άδειες που χρειάζεται και τα βασικά της στοιχεία. Για μια πρώτη επαφή με αυτή τη δομή, υπάρχει ο εισαγωγικός οδηγός δημιουργίας extension της Google.

Η λογική πίσω από την αποθήκευση

Η βασική λειτουργία ακολουθεί μια συγκεκριμένη σειρά:

1. Επιλέγεις τις καρτέλες που θέλεις να αποθηκεύσεις ή πατάς το κουμπί του απο τα εικονίδια των extensions.
2. Το Tabel καταγράφει τους τίτλους και τις διευθύνσεις τους.
3. Αποθηκεύει τις καταχωρίσεις στην αντίστοιχη ομάδα.
4. Κλείνει τις καρτέλες αφού ολοκληρωθεί επιτυχώς η αποθήκευση καθαρίζοντας την μνήμη από το φορτωμένο Tab.

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

Αυτές οι λεπτομέρειες έχουν πρακτική σημασία. Χρησιμοποιώντας ένα εργαλείο για να κλείσεις ανοιχτές σελίδες, θέλεις να ξέρεις ότι προηγουμένως έχουν αποθηκευτεί.

Ο κώδικας είναι διαθέσιμος

Το project είναι διαθέσιμο στο GitHub με άδεια MIT. Περιλαμβάνει τον κώδικα της επέκτασης, την τεκμηρίωση και αυτοματοποιημένες δοκιμές για λειτουργίες όπως η αποθήκευση, η επαναφορά και ο συγχρονισμός.

Για καθημερινή χρήση, μπορείς να ακολουθήσεις την εγκατάσταση από το Chrome Web Store.

Πώς εγκαθιστάς το Tabel

Η εγκατάσταση γίνεται όπως σε οποιαδήποτε επέκταση του Chrome.

1. Άνοιξε τη σελίδα του Tabel στο Chrome Web Store.
2. Πάτησε Προσθήκη στο Chrome.
3. Έλεγξε τις άδειες και επιβεβαίωσε την εγκατάσταση.
4. Στο dashboard που ανοίγει, διάβασε την ενημέρωση για τη χρήση των δεδομένων.
5. Επίλεξε Accept and Continue, εφόσον συμφωνείς.
6. Από το εικονίδιο των επεκτάσεων, το παζλ επάνω δεξιά, καρφίτσωσε το Tabel στη γραμμή εργαλείων.

Το περιβάλλον είναι στα αγγλικά. Οι παρακάτω οδηγίες χρησιμοποιούν τις ονομασίες που εμφανίζονται στην εφαρμογή.

Πώς αποθηκεύεις τις ανοιχτές καρτέλες

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

Α. Γρήγορη αποθήκευση από το κουμπί της επέκτασης

Αφού πατήσεις το κουμπί του Tabel στη γραμμή εργαλείων, αποθηκεύει σε νέα ομάδα τις ανοικτές καρτέλες του τρέχοντος παραθύρου και τις κλείνει μετά την αποθήκευση.

Η ομάδα παίρνει αυτόματα όνομα με ημερομηνία και ώρα. Οι εσωτερικές σελίδες του Chrome, όπως οι ρυθμίσεις του εξαιρούνται.

Το συγκεκριμένο κουμπί εκτελεί τη μαζική αποθήκευση. Για να επιλέξεις συγκεκριμένες καρτέλες, χρησιμοποίησε το Save Tabs μέσα στο dashboard.

Θυμηθείτε μόνο να κανετε pin το εικονίδιο του Tabel για πιο εύκολη προσβαση.

Β. Επιλογή καρτελών από το Save Tabs

1. Μετάβασε στην καρτέλα του dashboard.
2. Πάτησε Save Tabs.
3. Στο Tabs to save, επίλεξε ποιες καρτέλες θέλεις.
4. Στο Destination, διάλεξε νέα ή υπάρχουσα ξεκλείδωτη ομάδα.
5. Αν δημιουργείς νέα ομάδα, συμπλήρωσε το Group name.
6. Πάτησε Save Tabs για να ολοκληρώσεις την αποθήκευση.

Οι διαθέσιμες επιλογές είναι:

Στις ρυθμίσεις μπορείς να ορίσεις αν η αποθήκευση από το dashboard θα περιλαμβάνει καρφιτσωμένες καρτέλες ή καρτέλες που παίζουν ήχο.

Γ. Αποθήκευση καρτέλας με δεξί κλικ

Επίσης ένας εύκολος τρόπος για να αποθηκεύσετε μια σελίδα αλλά μόνη της και χωρίς να κλείσει, μπορείτε να το κανετε με δεξί κλικ στην σελίδα που είσαστε.

• Save this tab, για να αποθηκεύσεις την τρέχουσα σελίδα.

• Save this link, για να αποθηκεύσεις έναν σύνδεσμο σε νέα ή υπάρχουσα ομάδα.

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

Πώς οργανώνεις και ανοίγεις ξανά τις καρτέλες

Δώσε στις ομάδες ονόματα που περιγράφουν το περιεχόμενό τους. Για παράδειγμα, «Έρευνα αγοράς laptop», «Άρθρα για διάβασμα» ή «Project ιστοσελίδας».

Για τη διαχείρισή τους:

• Μετονομασία ομάδας: Πάτησε στο όνομά της, γράψε το νέο και πάτησε Enter.
• Μετακίνηση: Χρησιμοποίησε drag and drop για τη σειρά των καρτελών και των ομάδων.
• Αναζήτηση: Γράψε στο πεδίο αναζήτησης του dashboard για να περιορίσεις τα αποτελέσματα.
• Άνοιγμα μίας καρτέλας: Πάτησε τον σύνδεσμο ή το εικονίδιο με την ένδειξη Open Tab.
• Άνοιγμα ολόκληρης ομάδας: Χρησιμοποίησε το εικονίδιο με την ένδειξη Open All.

Μετά την επιτυχή επαναφορά, το Tabel αφαιρεί την αντίστοιχη αποθηκευμένη καταχώριση. Με το Open All, αφαιρεί την ομάδα αφού ανοίξουν επιτυχώς οι καρτέλες της.

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

Πώς συγχρονίζεις τις ομάδες μεταξύ υπολογιστών

Για να βρίσκεις τις αποθηκευμένες ομάδες στους υπολογιστές σου:

1. Εγκατάστησε το Tabel από το Chrome Web Store σε κάθε υπολογιστή.
2. Συνδέσου στο Chrome με τον ίδιο λογαριασμό Google.
3. Ενεργοποίησε τον συγχρονισμό του Chrome, συμπεριλαμβανομένων των επεκτάσεων.
4. Άνοιξε το dashboard του Tabel στους υπολογιστές σου και άφησε χρόνο για τον συγχρονισμό.

Το Tabel συγχρονίζει τις αποθηκευμένες ομάδες και τους συνδέσμους. Η αποθήκευση αφορά τίτλους και διευθύνσεις σελίδων, όχι το περιεχόμενο μιας συμπληρωμένης φόρμας ή ολόκληρη την κατάσταση μιας εφαρμογής.

Στις ρυθμίσεις, στην ενότητα Sync, θα βρεις:

• Last successful sync: Την τελευταία επιτυχή λειτουργία με τον χώρο συγχρονισμού του Chrome στη συγκεκριμένη συσκευή.
• Sync quota usage: Τον χώρο που χρησιμοποιούν τα συγχρονιζόμενα δεδομένα.

Η πρώτη ένδειξη δεν επιβεβαιώνει από μόνη της ότι ο δεύτερος υπολογιστής έχει ήδη παραλάβει τις αλλαγές.

Η Google διαθέτει περίπου 100 KB ανά επέκταση για αυτόν τον χώρο συγχρονισμού. Αν μια εγγραφή συγχρονισμού αποτύχει, τα αποθηκευμένα δεδομένα παραμένουν τοπικά. Το όριο περιγράφεται στην τεκμηρίωση του Chrome storage.

Εμφάνιση και αντίγραφα ασφαλείας

Από το γρανάζι του dashboard ανοίγεις τις ρυθμίσεις.

Στην ενότητα Appearance μπορείς να αλλάξεις:

• Το θέμα σε System, Light ή Dark.
• Την πυκνότητα εμφάνισης των ομάδων και των καρτελών.
• Το μέγεθος των γραμμάτων και των εικονιδίων.
• Το προεπιλεγμένο πλάτος των ομάδων.
• Την εμφάνιση ολόκληρης της διεύθυνσης, μόνο του domain ή την απόκρυψή της.

Έτσι προσαρμόζεις το περιβάλλον στην οθόνη και στον τρόπο που δουλεύεις.

Εξαγωγή και εισαγωγή δεδομένων

Για να κρατήσεις αντίγραφο των αποθηκευμένων ομάδων:

1. Άνοιξε τις ρυθμίσεις.
2. Πάτησε Export Data.
3. Αποθήκευσε το αρχείο JSON στον υπολογιστή σου.

Για να επαναφέρεις ένα συμβατό αντίγραφο, επίλεξε Import Data και διάλεξε το αρχείο.

Η εισαγωγή αντικαθιστά τις υπάρχουσες αποθηκευμένες ομάδες και καρτέλες και συγχρονίζει τις αλλαγές. Κράτησε πρώτα ένα export αν θέλεις να διατηρήσεις τα τρέχοντα δεδομένα σου.

Τι άλλαξε στην καθημερινή μου χρήση

Το Tabel με βοηθά να κρατάω ανοιχτές τις καρτέλες που χρειάζομαι για την τρέχουσα εργασία. Οι υπόλοιπες παραμένουν οργανωμένες και μπορώ να επιστρέψω σε αυτές όταν έρθει η ώρα.

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

Το κλείσιμο καρτελών μπορεί επίσης να μειώσει την κατανάλωση RAM. Το μέγεθος της διαφοράς εξαρτάται από τις σελίδες και από το αν το Chrome τις είχε ήδη θέσει σε αδράνεια μέσω της εξοικονόμησης μνήμης.

Στη δική μου καθημερινότητα, το βασικό όφελος είναι η ευκολότερη οργάνωση και ο λιγότερος χρόνος αναζήτησης ανάμεσα στα ανοιχτά tabs.

Δοκίμασε το Tabel στην πράξη

Το Tabel ξεκίνησε από μια ανάγκη που είχα ο ίδιος. Η βοήθεια της AI μού επέτρεψε να προχωρήσω στην πρώτη μου επέκταση για το Chrome και να δημιουργήσω ένα εργαλείο στα μέτρα μου.

Μπορείς να το εγκαταστήσεις δωρεάν από το Chrome Web Store και να ξεκινήσεις με μια μικρή ομάδα καρτελών που κρατάς ανοιχτές για αργότερα.

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

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

Γράψε μου στα σχόλια πώς σε εξυπηρετεί και ποια λειτουργία θα έκανε τη δική σου καθημερινότητα ευκολότερη.

Σελίδα extension στο Chrome Store.

Αγγλικη έκδοση άρθρου στο Medium.

Περισσότερες πληροφορίες για το εργαλείο θα βρεις στην επίσημη σελίδα του Tabel.