Claude Code στον browser: δείξτε αντί να περιγράφετε

Δύο επεκτάσεις του Chrome συνδέουν το Claude Code με τον browser σας. Το Claude in Chrome δίνει στον agent πρόσβαση στη σελίδα που έχετε μπροστά σας. Με το Vibe Annotations κάνετε απλώς κλικ στο στοιχείο που δεν δουλεύει, αντί να το περιγράφετε.

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

Μέρος 1: αφήστε το Claude Code να δει τη σελίδα

Το Claude in Chrome δίνει στο Claude Code το DOM, την κονσόλα, τις κλήσεις δικτύου και τη δυνατότητα να κάνει κλικ. Έτσι ο agent ελέγχει μόνος του αν το CSS του έπιασε.

Χρειάζεστε και τα τέσσερα:

• Συνδρομή απευθείας από την Anthropic: Pro, Max, Team ή Enterprise. Η πρόσβαση μέσω Amazon Bedrock, Google Cloud ή Microsoft Foundry δεν περιλαμβάνει τη λειτουργία.
• Chrome ή Edge. Αναγνωρίζονται επίσης οι Brave, Arc, Vivaldi και Opera. Το WSL δεν υποστηρίζεται.
• Την επέκταση Claude in Chrome, έκδοση 1.0.36 ή νεότερη.
• Ενεργή σύνδεση στον λογαριασμό σας.

Στη συνέχεια:

1. Εγκαταστήστε την επέκταση από το Chrome Web Store.
2. Ξεκινήστε με claude --chrome. Την πρώτη φορά εμφανίζεται ένας διάλογος αδειών. Ενεργοποιήστε εκεί την άδεια για το Chrome. Χωρίς αυτήν, τα εργαλεία του browser δεν φορτώνουν ποτέ.
3. Τρέξτε /chrome. Πρέπει να δείτε «Status: Enabled» και «Extension: Installed».

Πρώτη παγίδα: με API key, το flag απενεργοποιείται χωρίς καμία ένδειξη. Η επέκταση δεν μπορεί να συνδεθεί με API key ούτε με token μακράς διάρκειας από το claude setup-token, οπότε το --chrome δεν κάνει τίποτα και δεν βγάζει κανένα μήνυμα. Συνδεθείτε αντί γι’ αυτό με /login.

Δεύτερη παγίδα: μετά από νέα εγκατάσταση, το Chrome θέλει επανεκκίνηση. Στην πρώτη χρήση το Claude Code γράφει ένα αρχείο ρυθμίσεων για τον native messaging host, και το Chrome το διαβάζει μόνο κατά την εκκίνηση.

Το πάνελ του /chrome προσφέρει και την επιλογή «Enabled by default». Εμείς την αφήνουμε ανενεργή, γιατί τότε τα εργαλεία του browser φορτώνουν σε κάθε συνεδρία, ακόμα και σε όσες δεν ανοίγουν ποτέ σελίδα.

Μέρος 2: δείξτε το στοιχείο αντί να το περιγράφετε

Το Vibe Annotations αποτελείται από μια επέκταση του Chrome και έναν τοπικό server, με άδεια MIT και δωρεάν. Κάνετε κλικ σε ένα στοιχείο της εφαρμογής σας, όπως τρέχει, και γράφετε τι δεν πάει καλά.

Αυτή ακριβώς η σημείωση ζήτησε το screenshot.

Η σημείωση περιέχει το επιλεγμένο στοιχείο του DOM, το component πίσω από αυτό, το viewport, ένα screenshot της περιοχής και την οδηγία σας. Το Claude Code τα διαβάζει όλα μέσω MCP. Τίποτα δεν φεύγει από τον υπολογιστή σας, οι σημειώσεις αποθηκεύονται στο ~/.vibe-annotations/annotations.json.

1. Εγκαταστήστε την επέκταση Vibe Annotations από το Chrome Web Store.
2. Τρέξτε npx vibe-annotations-server init. Η εντολή εγκαθιστά τον server, τον ξεκινά στη θύρα 3846 και καταχωρεί τον MCP server στο Claude Code σε user scope.
3. Τρέξτε /mcp μέσα σε μια συνεδρία. Το vibe-annotations πρέπει να εμφανίζεται στη λίστα.

Κρατήστε το προεπιλεγμένο user scope. Το init --project γράφει την καταχώριση στο .mcp.json του έργου. Το endpoint είναι το 127.0.0.1, οπότε μέσα στο repository η ρύθμιση δεν κάνει τίποτα για όποιον συνάδελφο δεν τρέχει τον server, ούτε για το CI, που δεν έχει καθόλου browser.

Η καθημερινή ροή

1. Ξεκινήστε τον dev server και ανοίξτε την εφαρμογή στο localhost.
2. Πατήστε Annotate στη γραμμή εργαλείων της επέκτασης.
3. Κάντε κλικ σε ένα στοιχείο και γράψτε τι δεν πάει καλά. Επαναλάβετε σε όσες σελίδες θέλετε.
4. Στο Claude Code ζητήστε: read and implement my vibe annotations.

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

Αν δεν θέλετε να το ζητάτε κάθε φορά, πείτε start watching vibe annotations. Το Claude Code κάνει long polling και παραλαμβάνει τις νέες σημειώσεις μόλις τις δημιουργείτε.

Ή πληκτρολογήστε /loop process vibe annotations. Η ενσωματωμένη εντολή loop ξανατρέχει αυτό το prompt με δικό της ρυθμό, έτσι οι νέες σημειώσεις παραλαμβάνονται ενώ εσείς συνεχίζετε. Με αυτόν τον τρόπο επιμεληθήκαμε αυτό το άρθρο.

Πού χαλάει

Σύμπτωμα	Λύση
Ο browser δεν συνδέεται	Επανεκκίνηση του Chrome, μετά /chrome και Reconnect extension
Τα εργαλεία σταματούν μετά από ώρα αδράνειας	Ο service worker πέρασε σε αναστολή. /chrome, Reconnect extension
Το Claude δεν βλέπει καμία σημείωση	Τρέξτε vibe-annotations-server status. Ο server είναι ξεχωριστή διεργασία και μπορεί να σταματήσει από μόνος του
Ανοίγει λάθος browser	/chrome, μετά Select browser
Το --chrome μοιάζει να μην κάνει τίποτα	Χρησιμοποιείτε API key ή setup token. Συνδεθείτε με /login

Εντολές του server: vibe-annotations-server status, stop, restart.

Τρία όρια πριν στήσετε ροή εργασίας πάνω σε αυτό:

• Οι σημειώσεις είναι εργαλείο για το localhost, όχι σύστημα καταγραφής σφαλμάτων για την παραγωγή.
• Και τα δύο κομμάτια είναι τοπικά και διαδραστικά, άρα δεν υπάρχουν σε headless CI. Ο agent μας στο Gitea ελέγχει μόνο με npm run build.
• Τα screenshots και τα GIF που καταγράφονται δείχνουν ό,τι υπάρχει στην οθόνη, μαζί με τους λογαριασμούς στους οποίους είστε συνδεδεμένοι.

Τι άλλαξε πραγματικά

Καμία από τις δύο επεκτάσεις δεν κάνει το μοντέλο καλύτερο στο CSS. Καταργούν το βήμα της μετάφρασης ανάμεσα σε αυτό που βλέπετε και σε αυτό που πρέπει να εξηγήσετε με λόγια.

Το «κοιτάζω, περιγράφω, περιμένω, διορθώνω» γίνεται «κοιτάζω, κάνω κλικ, παραδίδω». Ο agent δεν χρειάζεται πια να μαντεύει ποιο κουμπί εννοούσατε, γιατί του το δείξατε ήδη.

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

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