HeadlessChrome101: Πώς το Jit-Browser μετατρέπει το Chrome σε έναν πλήρη πολυλειτουργικό περιηγητή–Επίπεδο διακομιστή-περιηγητή
Αυτή είναι μια απλή περιγραφή του τι κάνει το Jit-Browser με το headless Chrome, πώς χρησιμοποιεί το ιδιόκτητο runtime Jit-TR και τι χρειάζεται ακόμα για να γίνει αυτή μια χαρακτηριστική δυνατότητα του περιηγητή αντί για απλώς ένα άλλο σενάριο.
Από ένα απλό εργαλείο στιγμιότυπου οθόνης στο Jit-Browser
Ξεκινήσαμε με ένα μικρό εργαλείο γραμμής εντολών: getpage https://example.com page.png. Ξεκίνησε το Chrome σε ένα κοντέινερ Docker, πήρε ένα στιγμιότυπο της rendered example.com από τη σελίδα και εξήλθε.
Χρήσιμο αποδεικτικό της έννοιας. Κάθε κλήση ήταν μια κρύα εκκίνηση. Δεν ήξερε τίποτα για μετάφραση, συνεδρίες ή κατάσταση. Ήταν απλώς μια headless κάμερα.
Το Jit-Browser είναι το επόμενο βήμα. Χρησιμοποιεί ακόμα το πραγματικό Chrome, αλλά τώρα:
- Καταγράφει τι συμβαίνει μέσα στη σελίδα.
- Εισάγει το σενάριο Jit-TR ως επίπεδο μετάφρασης.
- Μπορεί να ακολουθήσει απλές ροές όπως banners cookie ή αναπτυσσόμενα μενού.
- Καταγράφει το πλήρως μεταφρασμένο HTML, όχι απλώς ένα στιγμιότυπο.
Αυτή η σελίδα εξηγεί αυτή τη ροή ώστε να μπορείτε να δείτε ότι δεν κάνουμε απλώς λόγο. Δείχνουμε πώς μπορεί να λειτουργήσει ένα πολυγλωσσικό επίπεδο σε επίπεδο περιηγητή.
Η ροή του Jit-Browser σε 6 βήματα
Σε υψηλό επίπεδο, κάθε καταγραφή ακολουθεί την ίδια ακολουθία.
-
Εκκινήστε το πραγματικό Chrome (headless) μέσα σε Docker.
Χρησιμοποιούμε το Puppeteer (pptr.dev) για να ξεκινήσουμε την ίδια μηχανή που τροφοδοτεί τους κανονικούς περιηγητές, αλλά χωρίς ορατό παράθυρο. Κανένας προσαρμοσμένος αναλυτής, καμία ψεύτικη απόδοση. -
Εφαρμόστε cookies ή κατάσταση σύνδεσης (αν έχει ρυθμιστεί).
Για επιδείξεις που χρειάζονται μια συνδεδεμένη συνεδρία, αναπαράγουμε τα cookies σας. Καμία βίαιη δύναμη, καμία μαντεψιά κωδικών, καμία συλλογή λογαριασμών που δεν ελέγχουμε. -
Φορτώστε τη στοχευμένη σελίδα ακριβώς όπως ένας χρήστης.
HTML, CSS, JavaScript, γραμματοσειρές, εικόνες. Περιμένουμε γιαnetworkidle2(https://pptr.dev/api/puppeteer.page.waitfornetworkidle) ώστε οι αργές δέσμες και οι γραμματοσειρές να ολοκληρώσουν τη φόρτωση. -
Εισάγετε το απόσπασμα Jit-TR ως επίπεδο.
Προσθέτουμε μια ετικέτα script που δείχνει στον κωδικό μας που είναι σε εκκρεμότητα για δίπλωμα ευρεσιτεχνίας – για παράδειγμα:. Το module runtime Jit-TR περιηγείται στο εκτεθειμένο DOM (document.head και document.body), στέλνει το εξαγόμενο payload πίσω στον (ή οποιονδήποτε) διακομιστή μας για επεξεργασία, λαμβάνει τα αποτελέσματα (μετάφραση, βελτίωση ή νέα πληροφορία), ξαναγράφει το ορατό κείμενο και προσθέτει νέα επίπεδα σημασίας πάνω από το αρχικό. Οι μόνοι περιορισμοί που υπάρχουν είναι απλοί: τα σενάρια μπορούν να επεκταθούν, αλλά οι νέες οδηγίες δεν μπορούν ποτέ να παρεμβαίνουν στα δικά τους σενάρια της ιστοσελίδας. Αυτό συνήθως υλοποιείται χρησιμοποιώνταςMutationObserverπαραδείγματα για να παρακολουθούν τις σχετικές αλλαγές στο DOM, να εφαρμόζουν ενημερώσεις σε μικρές, στοχευμένες επιδιορθώσεις και να αποφεύγουν να αγγίζουν οποιαδήποτε υπάρχουσα λογική εφαρμογής ή χειριστές γεγονότων. -
Εκτελέστε προαιρετικές ροές: cookies, κλικ και κύλιση.
Οι πραγματικές σελίδες συχνά χρειάζονται μία ή δύο ενέργειες: κλείσιμο ενός banner cookie, άνοιγμα ενός μενού, κύλιση για να φορτώσουν περισσότερες προσφορές. Το Jit-Browser μπορεί να εκτελέσει ένα απλό σενάριο ροής ώστε αυτά τα στοιχεία να είναι ορατά πριν από την καταγραφή. -
Καταγράψτε την επαυξημένη έξοδο.
Αποθηκεύουμε:- Το πλήρως τροποποιημένο HTML για φιλοξενία ή έλεγχο.
- Μια χρονολογική διαδρομή για να εντοπίσουμε πιθανά σημεία συμφόρησης.
Αυτό είναι το κεντρικό σημείο του HeadlessChrome101. Είναι το νοητικό μοντέλο για το πώς ένας περιηγητής θα μπορούσε να αντιμετωπίσει νέα ή υπάρχοντα δεδομένα ως ενσωματωμένο επίπεδο μέσα σε οποιονδήποτε περιηγητή.
Γιατί αυτό δεν είναι απλώς ένα σενάριο παιχνιδιού
Το Jit-Browser έχει σημασία γιατί αποδεικνύει ότι ένα επίπεδο σε επίπεδο περιηγητή μπορεί να κατασκευαστεί με τα ίδια κομμάτια που χρησιμοποιούν οι προμηθευτές περιηγητών καθημερινά, και ότι αυτό το επίπεδο μπορεί να φιλοξενήσει με ασφάλεια μια πλήρη αλληλεπίδραση πελάτη-διακομιστή με οποιαδήποτε εξωτερική υπηρεσία, συμπεριλαμβανομένου του δικού μας runtime Jit-TR. Είναι επίσης το σημείο όπου προσθέτουμε βελτιώσεις που είναι ευαισθητοποιημένες στο SEO όπως rel="alternate" hreflang="..." συνδέσμους και εμπλουτισμένα sitemap.xml καταχωρίσεις. Στην πράξη, αυτό σημαίνει ότι μπορούμε να εκθέσουμε επαυξημένες πληροφορίες μέσα σε μη διαταραγμένες περιοχές HTML όπως στοιχεία στα αριστερά ή δεξιά της υπάρχουσας σελίδας, ή χρησιμοποιώντας JavaScript modals που προσθέτουν επιλογές γλώσσας και SmartSearch χωρίς να παρεμβαίνουν στην αρχική διάταξη ή στα σενάρια.
-
Πραγματική μηχανή Chrome.
Όλα τρέχουν στο ίδιο το Chrome - απλώς χωρίς το ορατό παράθυρο. Αν λειτουργεί στο Chrome για τους επισκέπτες σας, λειτουργεί και στο Jit-Browser. -
Ευαισθητοποιημένο στην Πολιτική Ασφαλείας Περιεχομένου.
Οι περισσότερες ιστοσελίδες κλειδώνουν τα σενάρια με CSP. Σε headless mode μπορούμε να χρησιμοποιήσουμε τοsetBypassCSP(true)(https://pptr.dev/api/puppeteer.page.setbypasscsp) για να εισάγετε το Jit-TR μέσα στο περιβάλλον καταγραφής. Δεν απαιτούμε από κανένα παραγωγικό ιστότοπο να αποδυναμώσει τις πολιτικές ασφάλειας του. -
Πλήρης χρονομέτρηση και καταγραφή.
Καταγράφουμε τους χρόνους εκκίνησης, τους χρόνους φόρτωσης σελίδας, την εκκίνηση του Jit-TR, τα βήματα ροής και την καταγραφή. Μπορείτε να δείτε πού πηγαίνουν τα χιλιοστά του δευτερολέπτου και τι κάνει πραγματικά το Jit-TR στη σελίδα. -
Διαχωρισμός σεναρίου και στρώματος.
Σήμερα, το Jit-TR μπορεί να είναι "απλώς ένα σενάριο" που προσθέτετε σε έναν ιστότοπο. Στο Jit-Browser το αντιμετωπίζουμε ως ένα σταθερό στρώμα που τρέχει πάντα. Αυτό είναι πολύ κοντά στο πώς θα μπορούσε ένας προμηθευτής προγράμματος περιήγησης να το ενσωματώσει εγγενώς.
Τι επιλύει ήδη το API του Jit-TR
Το δύσκολο κομμάτι δεν είναι το headless Chrome. Το δύσκολο κομμάτι είναι να μετατρέψετε αξιόπιστα ζωντανές, ακατάστατες ιστοσελίδες σε ασφαλείς πολύγλωσσες εκδόσεις. Η ιδιόκτητη εκτέλεση μας στο api.jit-tr.com το κάνει ήδη αυτό.
Σήμερα, η εκτέλεση API χειρίζεται:
-
Επιλογή γλώσσας.
Διαβάζει παραμέτρους όπωςjittr=ES-419, κανονικοποιεί περιπτώσεις άκρων και καταγράφει τη διαλεγμένη γλώσσα, για παράδειγμα:[Jit-TR] Γλώσσα που επιλέχθηκε → ES-419. -
Εξαγωγή DOM, μετάφραση και σημασιολογικές αναδιατυπώσεις.
Η εκτέλεση περιηγείται στο πραγματικό DOM του Chrome, εξάγει μόνο ορατό κείμενο, δημιουργεί ένα δομημένο φορτίο μετάφρασης και γράφει τα αποτελέσματα πίσω στη σελίδα. Όλες οι δύσκολες περιπτώσεις άκρων είναι αυτόματες: ακολουθίες emoji, οντότητες HTML, κανόνες στίξης και διαστήματος, συμβολοσειρές μικτής γλώσσας και εναλλαγή από Αριστερά προς Δεξιά / Δεξιά προς Αριστερά. Επίσης, αναδιατυπώνει γλωσσικά συγκεκριμένα μπλοκ σεναρίων — συμπεριλαμβανομένωνκαι άλλες ετικέτες δομημένων δεδομένων — διασφαλίζοντας ότι κάθε γλώσσα έχει σωστά, ανεξάρτητα, αποθηκευμένα μεταδεδομένα για μηχανές αναζήτησης και συστήματα AI. -
Συμπεριφορά πελάτη.
Απεικονίζει σημαίες γλώσσας, σέβεται μη ασφαλείς ρίζες και παίζει όσο το δυνατόν πιο ασφαλώς με εφαρμογές και πλαίσια μίας σελίδας.
Όλα αυτά ήδη τρέχουν σε ιστότοπους Jit-TR σήμερα. Το Jit-Browser απλώς το επαναχρησιμοποιεί σε ένα ελεγχόμενο περιβάλλον headless.
Τι χρειάζεται ακόμα για μια εγγενή δυνατότητα προγράμματος περιήγησης
Τι χρειάζεται ακόμα για μια εγγενή δυνατότητα προγράμματος περιήγησης
Για να μετατρέψετε το Jit-Browser σε μια ενσωματωμένη δυνατότητα προγράμματος περιήγησης, κανείς δεν χρειάζεται ένα θαύμα - απλώς τη δυνατότητα να τοποθετήσει ένα μικρό, καλά καθορισμένο σύνολο αλλαγών που οι κινητήρες προγράμματος περιήγησης κατανοούν ήδη.
Για να μετατρέψετε το Jit=-Browser σε μια ενσωματωμένη δυνατότητα προγράμματος περιήγησης. Αυτό δεν είναι θαύμα, απλώς ένα μικρό σύνολο αλλαγών που οι προγράμματα περιήγησης κατανοούν ήδη.
-
Ένας εγγενής γάντζος στον κινητήρα.
Σήμερα το προσομοιώνουμε αυτό εισάγοντας ένα σενάριο από το headless Chrome. Μια πραγματική ενσωμάτωση θα έδινε στο Jit-TR μια αφιερωμένη θέση μετάφρασης ώστε να μπορεί να διαβάσει και να γράψει κείμενο DOM στο σωστό σημείο στην αλυσίδα απόδοσης. -
Ένας τυπικός τρόπος για να εκφράσετε την πρόθεση γλώσσας.
Χρησιμοποιούμε ήδη?jittr=LANGκαι cookies. Μια λύση σε επίπεδο προγράμματος περιήγησης θα μπορούσε να σέβεται τις ρυθμίσεις γλώσσας του προγράμματος περιήγησης και τις επιλογές του χρήστη όπως "μετάφραση αυτού του ιστότοπου πάντα σε ES-419". -
Ένα σαφές πλαίσιο ασφάλειας και ιδιωτικότητας.
Οι κανόνες για το ποιο κείμενο μπορεί να φύγει από τη συσκευή, πόσο καιρό μπορεί να αποθηκευτεί και πώς οι ιστότοποι ή οι χρήστες μπορούν να επιλέξουν να εξαιρεθούν θα πρέπει να είναι σαφείς και τεκμηριωμένοι. Μια εγγενής υλοποίηση μέσα στο πρόγραμμα περιήγησης μπορεί στην πραγματικότητα να είναι πιο ασφαλής από αυτοσχέδια σενάρια.
Παράδειγμα: HarmonyOS σε ES-419
Εδώ είναι ένα συγκεκριμένο παράδειγμα της διαδικασίας σε δράση.
Καλέσαμε:
getpageJtrBrowser \
"https://www.harmonyos.com/" \
"jittr=ES-419" \
null \
"ES-419/index.php"
Jit-Browser:
- Εκκινεί το headless Chrome μέσα στο Docker.
- Φορτώνει
https://www.harmonyos.com/. - Εισάγει το απόσπασμα Jit-TR με την παράμετρο ES-419.
- Αφήνει το Jit-TR να μεταφράσει το ορατό κινεζικό κείμενο στα ισπανικά (Λατινική Αμερική).
- Αποθηκεύει το αποτέλεσμα ως
ES-419/index.php.
Ο ιστότοπος HarmonyOS δεν χρειάζεται να αλλάξει. Από την προοπτική του χρήστη, φαίνεται ότι ο ιστότοπος απλώς υποστηρίζει τη γλώσσα τους.
Γιατί υπάρχει αυτή η σελίδα
Το HeadlessChrome101 είναι μια σύνοψη που δείχνει:
- Χρησιμοποιούμε πραγματικούς κινητήρες προγράμματος περιήγησης και πραγματικούς κανόνες CSP.
- Έχουμε ήδη μια λειτουργική, ιδιόκτητη εκτέλεση μετάφρασης.
- Η υπόλοιπη διαφορά για μια εγγενή δυνατότητα προγράμματος περιήγησης είναι μικρή και καλά καθορισμένη.
Αν κατασκευάζετε προγράμματα περιήγησης, λειτουργικά συστήματα ή μεγάλες πλατφόρμες και θέλετε μια καθολική πολύγλωσση στρώση που σέβεται το μοντέλο ασφάλειάς σας, είμαστε έτοιμοι να μιλήσουμε. Ο κώδικας υπάρχει. Η συμπεριφορά είναι μετρήσιμη. Το επόμενο βήμα είναι η συνεργασία.