Agent konačno može da otvori pretraživač! Kompletna analiza Chrome DevTools MCP integracije

Marko Marković2132 reči7 minuta

Radio sam mrežnu pretragu, radio sam MCP, otkrio sam da PaiCLI ima još jedan problem, Agent „ne vidi“ neke sadržaje inherentnog ekosistema, npr. sadržaj WeChat-a.

Direktno koristeći web_fetch da čita WeChat sadržaj, ne može se pročitati, jer spoljne pretraživače ekosistemske sadržaje ne može otići.

Takođe postoje dinamički renderovane veb stranice sadržaja, povratni HTML skoro nema sadržaja.

I želiš Agent da popuni formu, screenshot, vidi grešku konzole i slično, još gori.

U ovoj epizodi, integrisaćemo Google zvanični Chrome DevTools MCP, da PaiCLI iz „Agent-a koji može da pozove alate“ evoluira u „Agent-a koji može da otvara pretraživač“.

Može navigirati stranicu, kliknuti element, popuniti formu, uzeti DOM snapshot, videti mrežne zahteve.

Nakon čitanja ovog članka, svi ćete razumeti kako se dizajnira kompletno rešenje integracije pretraživača, od iskustva pokretanja do ljudske odobrenja, od prompt strategije do multimodalnih granica, svaki korak ima važnost.

Nakon što imate Chrome Devtools MCP, Agent može proaktivno fallback na pretraživač MCP: poziva mcp__chrome-devtools__new_page da otvori stranicu, čeka da se kontejner članka učita, zatim poziva take_snapshot da uzme DOM tekst snapshot, na kraju sumira izlaz.

Agent može proaktivno da otvori pretraživač, sposobnost je značajno povećana.

01, Šta je Chrome DevTools MCP

Chrome DevTools je alat koji je zvanično obezbedio Google MCP.

Ukupno 28 alata, po funkciji podeljenih u osam kategorija.

Navigacija ima 6: navigate_page otvara link, new_page kreira novi tab, select_page bira tab, close_page zatvara stranicu, list_pages vidi koje tabove otvorio, wait_for čeka da se određeni element ili tekst pojavi.

Simulacija korisničkih akcija ima: click klik elementa, fill popuni jedno polje, fill_form odjednom popuni celu formu, type_text simulira tastaturni unos, press_key pritisne prečicu, hover lebdi, drag prevlači, handle_dialog obrađuje dijalog, upload_file šalje fajl.

Takođe take_snapshot uzima DOM tekst, take_screenshot screenshot, evaluate_script izvršava JavaScript, list_console_messages vidi greške konzole pretraživača i slično.

Zašto odabrati zvanični Chrome DevTools MCP, a ne Playwright ili Puppeteer?

Tri razloga.

Prvi, Google zvanično proizveden, ne treba nam da održavamo set drajvera pretraživača.

Drugi, podržava --isolated=true mod, svaki put kada se startuje koristi privremeni user-data-dir, ne zauzima svakodnevni Chrome profil korisnika.

Treći, prirodno podržava --browser-url parametar, može ponovo koristiti već otvoreni Chrome, za kasnije CDP sesiju ponovu upotrebom.

02, CDP princip i protok poruka

Chrome DevTools MCP može kontrolisati pretraživač, oslanja se na CDP protokol.

CDP puni naziv Chrome DevTools Protocol, je skup daljinskih debug protokola koje je tim Chromium obezbedio.

Mi u Chrome obično pritisnemo F12 da otvorimo razvojne alate, DevTools panel i pretraživač komuniciraju koristeći ovaj protokol. Ali DevTools panel je za ljude, a CDP je za aplikacije, npr. Agent.

CDP način komunikacije je WebSocket.

Kada se Chrome startuje doda jedan --remote-debugging-port=9222 parametar, otvoriće WebSocket servis na portu 9222. Spoljni program se poveže sa ovim WebSocket-om, može da šalje komande, prima događaje, realizuje dvosmernu realnu komunikaciju.

Proces uspostavljanja konekcije je ovakav:

Nakon što se Chrome startuje, prvo na /json/version endpointu izlaže verziju informaciju, zatim na /json/list endpointu izlistava sve strane koje mogu da se debagiraju (u CDP se zovu target).

Svaki target ima jedan WebSocket URL, format sličan ws://127.0.0.1:9222/devtools/page/ABC123. Spoljni program nakon što uzme ovaj URL uspostavlja WebSocket konekciju, zatim može da šalje CDP komande.

Svaka CDP komanda je jedna JSON poruka, sadrži id (broj zahteva), method (domena.metod), params (parametri). Pretraživač nakon izvršenja vraća isti JSON odgovor sa id, sadrži result (rezultat). Ako je obaveštenje o događaju, poruku koju pretraživač proaktivno šalje nema id, nego ima method i params, npr. Page.loadEventFired.

chrome-devtools-mcp Puppeteer je ovaj podloga WebSocket transmit-prijem sve lepo pakovao.

Kada Agent poziva MCP alat, ne treba mu da sam slaže JSON poruku, ne treba da upravlja WebSocket konekcijom. Puppeteer interno je takođe obradio serijski broj poruka, timeout ponovno slanje, automatsko ponovno povezivanje nakon prekida konekcije, ovu prljavu poslu Agent ne mora ništa da brine.

CDP deli sposobnosti pretraživača u mnogo „domena“ (Domain), svaka domena je zadužena za jednu klasu funkcionalnosti.

Page domena upravlja navigacijom i životnim ciklusom stranice, DOM domena upravlja upitom elemenata i izmenom osobina, Runtime domena upravlja izvršenjem JavaScript-a, Network domena upravlja presretanjem i monitoringom prometa, Input domena upravlja simulacijom miša i tastature, Target domena upravlja kreiranjem i prebacivanjem tabova.

Sve što mi radimo u DevTools, iza toga su pozivi metoda ovih domena.

chrome-devtools-mcp interno kroz Puppeteer pakuje ove CDP pozive.

Njegova arhitektura je slojevita: MCP Server sloj obrađuje JSON-RPC zahteve i upravljanje sesijom, Tool Adapter sloj mapira MCP pozive alata na CDP domenske metode ili Puppeteer API, Chrome Runtime sloj zaista izvršava operacije pretraživača, Data Collection sloj serijalizuje rezultate i vraća Agent-u.

Odnos čestih alata i CDP domena je približno ovakav: navigate_page i new_page idu ka Page domeni, click, fill, type_text, press_key idu ka Input domeni, evaluate_script ide ka Runtime domeni, take_screenshot ide ka Page domeni captureScreenshot metodu.

take_snapshot je poseban, ide ka Accessibility domeni, dobija stablo pristupačnosti stranice (Accessibility Tree), ovo je strukturirana tekst reprezentacija koju pretraživač održava za pomoćne funkcije (npr. čitač ekrana), čišće od originalnog HTML-a, čitljivije od screenshota.

Kada Agent poziva navigate_page, putanja zahteva je ovakva:

Još jedan primer take_snapshot, on ide ka CDP Accessibility domeni ili DOM domeni, stablo pristupačnosti stranice ili DOM strukturu izvlači kao čist tekst, direktno vraća LLM-u da čita.

A take_screenshot ide ka CDP Page.captureScreenshot, vraća PNG binarne podatke slike.

Cela poruka je dvosmerna.

Agent šalje komande pretraživaču, pretraživač takođe proaktivno šalje događaje nazad. Npr. kada se stranica učita poslaće Page.loadEventFired, kada se mrežni zahtev završi poslaće Network.requestWillBeSent.

chrome-devtools-mcp interno će se pretplatiti na ove događaje, u kombinaciji sa wait_for alatom omogućava Agent-u da čeka da se specifični uslovi pojave pa nastavlja operaciju.

Razumevši ovaj CDP sloj, kasnije dizajn alata chrome-devtools-mcp je veoma lako razumeti: svaki alat je u stvari visoki pakovanje jednog seta CDP metoda, dodaje validaciju parametara, tretman grešaka i formatiranje rezultata, Agent ne mora direktno da se bori niskim detaljima CDP-a.

03, Podrazumevana integracija i iskustvo pokretanja

chrome-devtools u PaiCLI je podrazumevano enabled.

Ako ~/.paicli/mcp.json ne postoji, pri pokretanju će automatski kreirati podrazumevani templejt, u njemu je sadržana chrome-devtools konfiguracija:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--isolated=true"]
    }
  }
}

--isolated=true kaže server-u da svaki put kada se startuje koristi novu privremenu direktorijum korisničkih podataka, ne dira svakodnevne Chrome bookmarks, istoriju, Cookie.

Ovaj mehanizam izolacije treba da se malo proširi.

--isolated=true podloga princip je svaki put kada se Chrome startuje, Puppeteer će kreirati poddirektorijum u sistemskom privremenom direktorijumu kao --user-data-dir, npr. /tmp/puppeteer-dev_profile-abc123.

U ovaj direktorijum se čuvaju svi lokalni podaci pretraživača: Cookie, localStorage, sessionStorage, IndexedDB, keš, stanje prijave. Nakon što se pretraživač zatvori, ovaj privremeni direktorijum će automatski biti očišćen, ne ostavlja trag.

Dobra strana izolacije je: sve operacije koje Agent radi u pretraživaču neće zagađivati svakodnevni Chrome korisnika. Čak i Agent poseti zlonamernu web stranicu, Cookie je promenjen, zatvori pretraživač i sve je očišćeno.

Ali izolacija takođe ima cenu: stanje prijave se ne može deliti.

Ako Agent prijavi na određenu web stranicu, sledeći put kada otvoriš pretraživač, stanje prijave je nestalo, mora se ponovo prijaviti.

Ovo je upravo problem koji ćemo kasnije rešiti: koristeći --browser-url parametar da se poveže sa svakodnevnim otvorenim Chrome-om korisnika, ponovo koristiti postojeće stanje prijave. --browser-url upotreba je --browser-url=http://127.0.0.1:9222, direktno se povezuje sa već otvorenim Chrome instancom, ne ide kroz isolated mod.

Takođe, macOS korisnici prvi put mogu naići na sistemsko dozvolu prozor.

Chrome u isolated modu kada se startuje, macOS može zatražiti „dopuštanje za pomoćne funkcije“ ili „snimanje ekrana“, ovo je nivo bezbednosti operativnog sistema, mora ručno da se dozvoli, inače će se Chrome start ne uspeti. Ako naiđeš na start timeout, prvo proveri da li u sistemskim postavkama postoje neodobrena zahteva za dozvolu.

Možeš koristiti /mcp disable chrome-devtools bilo kada isključiti.

Naravno, podrazumevano enabled će prvi put pokretanje PaiCLI biti posebno sporo.

Da bi se smanjilo korisničko čekanje, u McpServerManager.startAll() posebna nit procesa štampa napredak, svakih 5 sekundi proverava server koji još nije ready, realno štampa vreme čekanja:

🔌 Startujem MCP server (5)...
   ✓ filesystem      stdio   14 alata    1.2s
   ⏳ chrome-devtools stdio   start... (prvi put treba povući paket + start Chrome)
   ✓ zread           http     3 alata    0.8s
   ⏳ chrome-devtools stdio   start... (već čekano 12s)
   ✓ chrome-devtools stdio   28 alata   18.5s
   5/5 spremno, ukupno 60 MCP alata

04, Od mcp.json do registracije alata

Prethodno smo pričali o CDP principu i iskustvu pokretanja, ovaj odeljak ćemo povezati ceo put integracije od konfiguracije do registracije alata, vidimo šta PaiCLI interno radi.

Prvi korak, čitanje konfiguracije.

Main.java pri pokretanju će detektovati da li ~/.paicli/mcp.json postoji.

Ako fajl ne postoji, kreiraće se pomoću podrazumevanog templejta, u njemu je sadržana chrome-devtools konfiguracija. Ako fajl već postoji ali nedostaje chrome-devtools stavka, samo štampa jedan red upozorenja, neće samostalno menjati korisničke konfiguracijske fajlove.

Drugi korak, start server procesa.

McpServerManager.startAll() obilazi sve ne-disabled stavke u mcpServers, za svaki server startuje podproces.

chrome-devtools command je npx, args je ["-y", "chrome-devtools-mcp@latest", "--isolated=true"].

npx će prvo tražiti u lokalnom kešu, ako ne nadalje vuče sa npm, zatim izvršava. Zato prvo startovanje je posebno sporo.

Treći korak, MCP handshake.

Nakon što se podproces pokrenuo, McpClient.initialize() šalje JSON-RPC initialize zahtev, čeka server da vrati capabilities.

Četvrti korak, povlačenje liste alata.

chrome-devtools server u capabilities deklariše tools sposobnost, PaiCLI zato poziva tools/list dobija 28 alata schema definiciju, svaki alat sadrži naziv, opis i format parametara.

Peti korak, registracija u ToolRegistry.

28 alata po mcp__{server}__{tool} formatu registruje, npr. mcp__chrome-devtools__navigate_page, mcp__chrome-devtools__take_snapshot.

Ovi alati i ugrađeni alati i prethodno registrovani drugi MCP alati su u istom Registry-u jedinstveno upravljanju, HITL odobrenje, AuditLog snimanje jedan ne manji.

Ima jednu vrednu stvar: chrome-devtools-mcp pretraživač nije startovan kada se konektuje.

Tek kada Agent prvi put pozove alat vezan za pretraživač, automatski će pokrenuti Chrome instancu. To znači da ako korisnik samo startuje PaiCLI ali ne traži od Agent-a da radi operaciju pretraživača, Chrome proces neće pojaviti, ne zauzima resurse.

05, Nadogradnja sistemskog prompt-a

Samo registrovati alate nije dovoljno, treba Agent-u reći kada koristiti pretraživač, kada web_fetch.

Inače Agent će još uvek prvo pozvati web_fetch kada naiđe na WeChat sadržaj, nakon neuspeha ponoviti pokušaj, mnogo troši token i vreme.

Zato smo u sistemski prompt dodali „web_fetch vs pretraživač MCP“ odlučnu tabelu: Agent.SYSTEM_PROMPT, PlanExecuteAgent.EXECUTION_PROMPT, SubAgent.WORKER_PROMPT.

Ovaj set prompta je ekvivalentno napisao Agent-u „uputstvo za upravljanje pretraživačem“.

06, Scenarijska provera

Kod je napisan, Prompt je podešen, treba ručno verifikovati.

Prompt: test link je ` molim te da vidiš šta ovaj članak priča.

Iz procesa razmišljanja LLM-a vidiš, korisnik želi da čita sadržaj WeChat ekosistema, prvo ću pokušati da koristim web_fetch, ako ne bude moglo, koristiću MCP Chrome-a.

U stvari, u prompt-u je već rečeno, čitanje WeChat ekosistem sadržaja treba koristiti MCP pretraživača, zato direktno poziva mcp__chrome-devtools__new_page, zatim nakon što se sadržaj učita, kroz take_snapshot uzima DOM teksta, na kraju sumira izlaz.

Apsolutno nema problema.

I zaista je otvorio novi Chrome da čita ovaj sadržaj.

Drugi prompt je: screenshot pogledaj početnu stranicu paicoding.com

Tada će pozvati MCP alat chrome-devtools.take_screenshot, zatim proslediti llm-u da čita sadržaj.

U korenskom direktorijumu projekta takođe možeš videti screenshot.

07, Kako napisati PaiCLI u životopis

Naziv projekta: PaiCLI — Browser-Capable Agent CLI

Opis projekta: Na osnovu Jave implementirana AI Agent komandna linija alata, integrisan Chrome DevTools MCP server, Agent ima kompletnu automatsku sposobnost pretraživača, pokriva 28 alata za navigaciju, unos, DOM snapshot, screenshot, monitoring mrežnih zahteva.

Tehnološki stack: Java 21, MCP Protocol, Chrome DevTools Protocol, JSON-RPC 2.0, ConcurrentHashMap, CompletableFuture

Ključne odgovornosti:

Integrisao chrome-devtools-mcp, dizajnirao --isolated=true bezbednosnu izolaciju strategiju, realizovao mcp.json automatsko kreiranje templejta
Dizajnirao web_fetch → pretraživač MCP automatski fallback mehanizam, kada web_fetch zbog SPA / anti-crawl / klijentski renderovanje vraća prazan sadržaj, Agent automatski se prebacuje na Chrome DevTools MCP kroz take_snapshot uzima DOM tekst, pokriva WeChat zvanični nalog, Zhihu koloniju, Juejin ove web_fetch nedostupne scenarije
Dizajnirao MCP server start napredak štampanje nit, svakih 5 sekundi osvežava čekanje trajanje nespremnog servera