Claude Code în Chrome: testezi și depanezi aplicația din terminal

Agentul de cod a terminat modificarea, testele unitare trec, iar tu deschizi browserul și descoperi că butonul de trimitere nu mai face nimic, pentru că o eroare din consolă oprește tot formularul. Claude Code în Chrome închide exact acest gol: același agent care a scris codul deschide pagina, citește consola, completează formularul și se întoarce în fișiere să repare ce a găsit, fără să mai copiezi tu erori dintr-o fereastră în alta.

Ghidul de față e pentru developerii care folosesc deja Claude Code și vor să-l lege de browser: ce trebuie să ai înainte, cum pornești integrarea cu claude --chrome, cinci fluxuri de lucru care chiar economisesc timp, când e mai potrivit un server MCP precum Playwright sau Chrome DevTools și, mai ales, ce înseamnă să dai unui agent acces la un browser în care ești autentificat peste tot. Toate detaliile tehnice vin din documentația oficială Claude Code, consultată la 25 septembrie 2026.

Ce este, de fapt, integrarea Claude Code cu Chrome

Sunt două produse care se întâlnesc. Claude in Chrome este extensia de browser a Anthropic, pe care o poți folosi și singură, direct în browser. Claude Code este agentul de programare din terminal sau din VS Code. Integrarea le conectează: din sesiunea Claude Code, agentul primește un set de unelte de browser expuse ca server MCP numit claude-in-chrome și le poate combina, în același fir de lucru, cu citirea și editarea fișierelor, rularea comenzilor și git.

Trei lucruri o deosebesc de un browser controlat „din laborator”:

• Folosește browserul tău, cu sesiunile tale. Claude deschide file noi, dar împarte starea de autentificare a browserului, deci ajunge în orice aplicație în care ești deja logat.
• Lucrează la vedere. Acțiunile rulează într-o fereastră Chrome vizibilă, în timp real. Când dă peste o pagină de login sau un CAPTCHA, se oprește și îți cere să le rezolvi tu.
• Își ține filele grupate. Extensia strânge filele deschise de Claude într-un grup de file legat de sesiune. La /clear, Claude Code închide grupul, cu tot cu paginile deschise, cu excepția cazului în care rulează încă lucru care supraviețuiește comenzii. La /resume sau la ieșire, închide grupul doar dacă acesta conține numai file noi goale.

Dacă te interesează fenomenul mai larg — agenți care văd ecranul și dau click pe orice aplicație — l-am tratat separat în articolul despre computer use și browser agents. Iar dacă te gândești la browsere întregi construite în jurul AI-ului, pentru uz personal, comparația e în ghidul browserelor AI din 2026. Aici discutăm un caz mult mai îngust și mai util pentru cine scrie cod: browserul ca unealtă a agentului de programare.

De ce contează: bucla închisă cod → browser → cod

Majoritatea sesiunilor cu un agent de cod se termină cu o verificare făcută de om. Agentul spune „am implementat validarea”, tu deschizi pagina, încerci, vezi că nu merge, copiezi eroarea din consolă, o lipești înapoi în terminal. Fiecare tură costă atenție, iar agentul lucrează pe o descriere de mâna a doua a problemei.

Cu browserul conectat, bucla se închide: agentul modifică fișierul, deschide localhost, reproduce scenariul, citește consola și DOM-ul, apoi corectează codul care a produs eroarea. Tu primești rezultatul verificat, nu o promisiune. Diferența e cea dintre un coleg care îți spune „ar trebui să meargă” și unul care îți spune „am încercat cu date invalide, mesajul de eroare apare sub câmp, iar în consolă nu mai e nimic roșu”.

Bucla funcționează bine doar dacă restul sesiunii e disciplinat: instrucțiuni de proiect clare în CLAUDE.md, permisiuni bine setate, sarcini mici și verificabile. Sunt exact deprinderile din cursul Claude Code Mastery: coding agentic din terminal, unde bucla plan / edit / review și configurarea serverelor MCP cu permisiuni minime au module dedicate. Browserul nu repară o sesiune prost condusă; o face doar mai rapidă.

Ce trebuie să ai înainte să meargă

Aici se pierde cel mai mult timp, pentru că blocajele nu vin din browser, ci din felul în care e autentificat Claude Code.

• Browserul. Google Chrome sau Microsoft Edge. Claude Code detectează extensia și configurează conexiunea și în alte browsere bazate pe Chromium: Brave, Arc, Vivaldi, Opera. Integrarea nu este suportată în Windows Subsystem for Linux (WSL).
• Extensia. Claude in Chrome, versiunea 1.0.36 sau mai nouă, din Chrome Web Store.
• Planul. Un plan direct Anthropic: Pro, Max, Team sau Enterprise.
• Autentificarea. Te conectezi cu /login. Dacă Claude Code folosește o cheie de API sau un token de lungă durată generat cu claude setup-token, integrarea rămâne oprită chiar dacă pornești cu --chrome, pentru că extensia nu se poate autentifica cu acele credențiale.
• Furnizorul. Integrarea nu e disponibilă prin Amazon Bedrock, Agent Platform de la Google Cloud sau Microsoft Foundry. Dacă echipa ta accesează Claude exclusiv prin cloud, ai nevoie de un cont claude.ai separat pentru această funcție.

Ultimele două puncte sunt cele care surprind echipele. Multe firme rulează Claude Code prin cheie de API sau prin furnizorul de cloud din motive de facturare și conformitate; pentru ele, integrarea cu Chrome cere o decizie separată, nu doar o instalare.

Instalare și primul test, pas cu pas

1. Pornește Claude Code cu browserul activat:

claude --chrome

La prima pornire apare un dialog, afișat o singură dată, care prezintă integrarea și modul în care funcționează permisiunile pe site-uri. Apeși Enter și continui.

2. Dă-i o sarcină mică, cu rezultat verificabil. Exemplul din documentație e bun tocmai pentru că nu atinge nimic sensibil:

Mergi pe code.claude.com/docs, dă click în câmpul de căutare,
scrie „hooks” și spune-mi ce rezultate apar

Dacă Claude Code îți cere aprobarea înainte de o acțiune în browser, o dai. Dialogul începe cu „Claude in Chrome wants to” și îți oferă varianta de a permite toate acțiunile pe acel site, pentru sesiunea curentă. După aprobare, Claude deschide o filă nouă și începe.

3. Verifică starea cu /chrome. Comanda arată starea conexiunii, gestionează permisiunile, reconectează extensia și alege browserul folosit. Integrarea funcționează când panoul afișează „Status: Enabled” și „Extension: Installed”. Dacă ai mai multe browsere conectate, alegi unul; Claude îl păstrează chiar dacă se conectează ulterior și altul, până îl schimbi din Select browser….

4. Decide dacă o vrei pornită mereu. Din /chrome poți alege „Enabled by default”, ca să nu mai dai flagul la fiecare sesiune. Documentația avertizează însă că astfel crește consumul de context, pentru că uneltele de browser sunt încărcate permanent. Pentru sesiuni care nu au nevoie de browser, --chrome doar la nevoie e alegerea mai economică. Dacă vrei să vezi exact ce unelte primește agentul, rulează /mcp, selectează claude-in-chrome și apoi View tools.

Două variante de pornire merită știute. În VS Code, browserul e disponibil de îndată ce extensia Chrome e instalată, fără flag. Iar într-o sesiune interactivă în care Claude are nevoie de browser și nu găsește extensia, apare o dată pe sesiune fereastra „Claude wants to use your browser”, cu trei opțiuni: instalare ghidată (Claude Code așteaptă instalarea, conectează extensia și continuă sarcina în aceeași sesiune), „Not now” sau „Don't ask again”. Dacă organizația blochează serverul claude-in-chrome prin setarea administrată deniedMcpServers, fereastra nu mai apare deloc.

Cinci fluxuri de lucru care economisesc timp real

1. Verificarea unei modificări pe aplicația locală

Cel mai frecvent și cel mai rentabil caz. După ce agentul a modificat validarea unui formular, îi ceri să o și încerce:

Am modificat validarea formularului de înregistrare. Deschide
localhost:8000/register, trimite formularul cu un email invalid și cu
parole care nu coincid, și spune-mi dacă mesajele de eroare apar sub
câmpurile corecte. Dacă nu, repară și reîncearcă.

Contează ultima propoziție: îi dai și criteriul de reușită, și permisiunea de a itera. Fără ea, primești un raport; cu ea, primești o problemă rezolvată.

2. Depanarea cu consola

Claude citește mesajele din consolă și le poate filtra. Documentația recomandă explicit să-i spui ce tipare cauți, nu să ceri toată consola, pentru că jurnalele sunt voluminoase și îți umplu contextul:

Deschide pagina de dashboard și verifică dacă apar erori în consolă
la încărcare. Ignoră avertismentele de dezvoltare ale React; mă
interesează doar erorile și cererile eșuate.

Avantajul față de lipirea manuală a erorii: agentul vede eroarea în contextul paginii și are imediat acces la fișierul sursă care a produs-o.

3. Verificarea vizuală după o modificare de interfață

Documentația Anthropic dă ca exemplu construirea unei interfețe după o machetă din Figma și verificarea în browser că rezultatul corespunde. Același principiu merge pe orice schimbare de CSS: îi ceri să deschidă pagina, să facă o captură și să compare cu ce ai descris. Capturile pot fi și salvate pe disc; Claude îți raportează calea fișierului.

Deschide pagina de prețuri, fă o captură a secțiunii cu planurile,
salveaz-o pe disc și spune-mi dacă butoanele sunt aliniate pe
aceeași linie.

Pentru lățimi de ecran diferite și pentru regresii vizuale sistematice, un test automat în CI rămâne unealta potrivită (vezi comparația de mai jos). Agentul în browser e excelent pentru verificarea rapidă, în timp ce lucrezi.

4. Încărcarea de fișiere în pagini web

Claude poate atașa fișiere de pe calculatorul tău în câmpurile de upload. Claude Code citește fișierul și trimite conținutul către browser, deci funcționează atât în sesiuni locale, cât și la distanță; e nevoie de Claude Code v2.1.211 sau mai nou. Trei restricții de reținut:

• Permisiuni: poate încărca doar fișiere pe care sesiunea are voie să le citească. O regulă care interzice Read pe un fișier blochează și încărcarea lui — util dacă ai deja reguli de tip deny pe .env sau pe chei.
• Dimensiune: maximum 10 MB de fișiere într-o singură încărcare.
• Hard links: refuză fișierele cu mai multe hard link-uri, frecvente în node_modules și alte depozite ale managerilor de pachete. Copiezi fișierul și încarci copia.

Exemplu practic: „Deschide bug tracker-ul, creează un tichet nou și atașează logs/session.log.”

5. Demonstrații înregistrate ca GIF

Claude poate înregistra interacțiunile din browser ca GIF, ceea ce e util pentru un pull request sau pentru a arăta unui coleg de la produs cum arată un flux nou:

Înregistrează un GIF cu fluxul de checkout, de la adăugarea în coș
până la pagina de confirmare.

Atenție la ce ajunge în înregistrare: documentația precizează că GIF-ul captează tot ce e vizibil în browser, inclusiv detaliile contului pe paginile în care ești autentificat. Verifică-l înainte să-l trimiți în afara echipei.

Un bonus care iese din zona de cod: pentru că împarte sesiunile tale, Claude poate lucra în aplicații web fără conectori de API — Google Docs, Gmail, Notion, Sheets. Documentația dă ca exemplu redactarea unui raport de progres pe baza commit-urilor recente, scris direct într-un Google Doc, și completarea unui CRM rând cu rând dintr-un CSV local. Sunt utile, dar sunt și exact scenariile în care riscurile de mai jos devin concrete.

Cum scrii prompturi pentru browser

Prompturile vagi produc clicuri vagi. Cele care funcționează au patru elemente:

1. Unde: adresa exactă sau pagina de pornire, nu „site-ul nostru”.
2. Ce: acțiunile, în ordine, cu datele de test incluse.
3. Criteriul de reușită: ce trebuie să vadă ca să considere verificarea trecută.
4. Ce raportează sau ce face mai departe: doar raport, sau raport plus reparare plus reverificare.

Anthropic recomandă, în ghidul de utilizare sigură a extensiei, aceeași direcție din motive de securitate: instrucțiuni specifice, nu vagi, ca să nu apară acțiuni neintenționate. Un prompt bun pentru browser e, în același timp, un prompt mai sigur.

Un obicei care ajută mult: pune în CLAUDE.md adresa aplicației locale, conturile de test și paginile pe care agentul le poate folosi. Nu mai repeți contextul la fiecare sesiune, iar agentul nu mai ghicește pe ce port rulează serverul.

Claude in Chrome, Playwright MCP sau Chrome DevTools MCP?

Integrarea Anthropic nu e singura cale de a da unui agent de cod acces la browser. Două servere MCP open-source sunt folosite frecvent pentru același scop, iar alegerea depinde de sarcină.

• Playwright MCP (Microsoft) automatizează browserul prin Playwright și îi dă modelului pagina ca instantaneu structurat al arborelui de accesibilitate, nu ca imagine, deci nu depinde de un model cu viziune.
• Chrome DevTools MCP (echipa Chrome DevTools) aduce în agent uneltele DevTools: înregistrarea de trace-uri și analiza de performanță, cererile de rețea, mesajele din consolă cu stack trace-uri mapate pe sursă și automatizare bazată pe Puppeteer.

Ultimul rând e cel mai important. Un agent care explorează browserul e excelent pentru verificare și depanare în timp ce lucrezi; nu înlocuiește o suită de teste automate. Cea mai sănătoasă combinație: agentul găsește problema în browser, repară codul și scrie apoi testul end-to-end care o va prinde data viitoare. Pentru imaginea mai largă a testării cu AI, de la generarea testelor la testarea vizuală, vezi ghidul de QA și testare software cu AI.

Dacă vrei să construiești agenți de browser proprii — bucla percepție-decizie-acțiune, alegerea între API și interfață, evaluarea capabilității reale — subiectul are un curs separat: Computer Use și Browser Agents: automatizare pe ecran în producție. Iar pentru felul în care un client MCP consumă unelte externe, cu permisiunile și transporturile lor, cursul MCP — Model Context Protocol pornește de la protocol în sine.

Securitatea: sesiunea ta autentificată e și suprafața de atac

Tot ce face integrarea utilă — acces la aplicațiile în care ești logat, fără configurare — o face și riscantă. Un agent care citește pagini web poate întâlni instrucțiuni ascunse în conținutul lor. Anthropic numește explicit riscurile în ghidul de utilizare sigură: prompt injection (instrucțiuni malițioase ascunse în conținutul web, care încearcă să-l determine pe Claude la acțiuni neautorizate), exfiltrarea de date în urma unui atac reușit și capturile de ecran care includ orice informație vizibilă, inclusiv date personale sau confidențiale.

Compania afirmă că, în testele ei interne, configurația actuală reduce rata de reușită a atacurilor sub 0,08%. E o cifră măsurată de furnizor, pe propriile teste, nu o garanție pentru site-urile pe care le vizitezi tu. Extensia blochează implicit site-urile cu conținut pentru adulți și pe cele cunoscute pentru conținut piratat și cere permisiune înainte de a accesa site-uri financiare.

Recomandările Anthropic, traduse în practică pentru un developer:

• Profil de browser separat. Documentația recomandă profiluri separate, ca să ții conturile sensibile departe de Claude. Pentru dezvoltare, un profil dedicat, logat doar în mediile de test, rezolvă cea mai mare parte a problemei.
• Site-uri de încredere, la început. Evită site-urile necunoscute și conținutul generat de utilizatori — exact locurile unde se ascunde o injecție.
• Aprobare manuală când ești pe teren nou. Setarea „Manually approve” din extensie îți arată fiecare acțiune înainte să se întâmple. Permisiunile pe site-uri se moștenesc din extensie și se gestionează din setările ei.
• Fără conturi sensibile. Anthropic recomandă să nu folosești extensia pentru conturi financiare sau de investiții, documente juridice sau contracte, informații medicale, conturi de serviciu cu date sensibile ale firmei și site-uri cu datele personale ale altora.
• Atenție la semnalele ciudate. Schimbări bruște de subiect sau cereri neașteptate de date sensibile sunt motiv să oprești sarcina.

Din partea Claude Code, două garduri merită știute. În plan mode, apare o cerere de permisiune înainte ca Claude să înregistreze un GIF, să deschidă o filă nouă sau să ruleze un shortcut. Iar la nivel de organizație, administratorii pot bloca de tot serverul claude-in-chrome prin deniedMcpServers. Dacă firma ta are o politică pentru agenții de cod, aceasta e setarea care o aplică și browserului.

Mecanica apărării nu e specifică Chrome-ului. Am descris-o pe straturi — intrare, unelte, ieșire, identitate, testare — în ghidul despre prompt injection în agenți AI, iar izolarea agenților de cod de rețea și credențiale e tratată în articolul despre permisiuni, rețea și credențiale pentru agenții de programare. Regulile de tip deny, permisiunile minime pe serverele MCP și sandboxing-ul pentru Claude Code au un modul întreg în Claude Code Mastery.

Erori frecvente și cum le rezolvi

Extensia nu e detectată. Verifică, în ordine: extensia e instalată și activă în chrome://extensions, Claude Code e la zi (claude --version), Chrome rulează, apoi /chrome → „Reconnect extension”. Dacă tot nu merge, repornește Claude Code și Chrome. La prima activare, Claude Code instalează un fișier de configurare pentru native messaging, pe care Chrome îl citește doar la pornire — de aceea prima încercare eșuează des până repornești browserul. Pe macOS, fișierul trebuie să existe la:

~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json

Pe Linux, calea e ~/.config/google-chrome/NativeMessagingHosts/, iar pe Windows configurarea stă în Registry, sub HKCU\Software\Google\Chrome\NativeMessagingHosts\. Edge și celelalte browsere Chromium au directoarele lor, cu același nume de fișier.

Browserul nu mai răspunde. Cel mai des, un dialog JavaScript (alert, confirm, prompt) blochează pagina și evenimentele. Îl închizi manual și îi spui lui Claude să continue. Altfel: îi ceri o filă nouă sau dezactivezi și reactivezi extensia.

Conexiunea cade în sesiunile lungi. Service worker-ul extensiei intră în inactivitate după o perioadă fără folosire. Soluția: /chrome → „Reconnect extension”.

Pe Windows mai apar conflicte de named pipe (EADDRINUSE) când altă sesiune Claude Code folosește deja Chrome — închizi celelalte sesiuni și repornești. Dacă host-ul de native messaging se oprește la pornire, reinstalarea Claude Code regenerează configurația.

Întrebări frecvente

Ce este Claude in Chrome și cum se leagă de Claude Code? Claude in Chrome este extensia de browser a Anthropic. Pornit cu claude --chrome sau din VS Code, Claude Code se conectează la ea și primește unelte de browser — navigare, click, completare de formulare, citirea consolei, capturi — pe care le combină în aceeași sesiune cu editarea codului.

Am nevoie de un abonament plătit pentru Claude Code în Chrome? Da. Integrarea cere un plan direct Anthropic — Pro, Max, Team sau Enterprise — și autentificare cu /login. Cu o cheie de API, un token din claude setup-token sau prin Amazon Bedrock, Google Cloud Agent Platform ori Microsoft Foundry, integrarea rămâne oprită.

Funcționează și în alte browsere decât Chrome? Da, în Microsoft Edge și, prin detectare automată, în alte browsere bazate pe Chromium: Brave, Arc, Vivaldi și Opera. Nu funcționează în WSL, pe Windows.

Este sigur să-l las să folosească browserul în care sunt logat? Riscul principal e prompt injection: instrucțiuni ascunse într-o pagină web care încearcă să-l determine pe agent la acțiuni neautorizate. Anthropic recomandă un profil de browser separat, site-uri de încredere, aprobare manuală pe site-uri noi și evitarea conturilor financiare, medicale, juridice sau de serviciu cu date sensibile.

Înlocuiește Claude in Chrome testele automate cu Playwright? Nu. Agentul în browser e potrivit pentru verificare și depanare în timp ce lucrezi. Regresiile repetabile, rulate la fiecare commit în CI, rămân treaba testelor end-to-end scrise în cod. O combinație bună: agentul găsește problema, o repară și scrie testul care o va prinde data viitoare.

Concluzie

Integrarea Claude Code cu Chrome mută verificarea din sarcina ta în bucla agentului: codul e scris, deschis în browser, verificat în consolă și în DOM, apoi corectat, în aceeași sesiune. Pornești cu claude --chrome, verifici cu /chrome și ai nevoie de un plan direct Anthropic cu autentificare prin /login, nu de o cheie de API. Randamentul cel mai mare vine din verificarea aplicației locale și din depanarea pe consolă, cu prompturi care spun unde, ce, după ce criteriu și ce urmează. Pentru performanță și rețea, Chrome DevTools MCP e mai potrivit; pentru regresii repetabile, testele din CI. Iar pentru că agentul folosește sesiunile tale, un profil de browser separat pentru dezvoltare nu e o precauție exagerată, ci configurația de bază.

Surse

• Claude Code Docs, Use Claude Code with Chrome (cerințe, pornire, fluxuri, depanare): https://code.claude.com/docs/en/chrome
• Claude Help Center, Use Claude in Chrome safely (riscuri, recomandări, rata de reușită a atacurilor în testele interne): https://support.claude.com/en/articles/12902428-use-claude-in-chrome-safely
• Chrome Web Store, extensia Claude in Chrome: https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn
• Microsoft, Playwright MCP: https://github.com/microsoft/playwright-mcp
• Chrome DevTools, Chrome DevTools MCP: https://github.com/ChromeDevTools/chrome-devtools-mcp

Articol informativ, publicat la 25 septembrie 2026. Cerințele, comenzile, versiunile minime și mesajele de eroare provin din documentația Anthropic consultată la aceeași dată și se pot schimba odată cu noile versiuni ale Claude Code și ale extensiei.