HeadlessChrome101: Hogyan alakítja a Jit-Browser a Chrome-ot egy teljes, többfunkciós böngészővé – Szerver-Böngésző réteg
Ez egy egyszerű nyelvezetű útmutató arról, hogy mit csinál a Jit-Browser a headless Chrome-mal, hogyan használja a szabadalmaztatott Jit-TR futtatókörnyezetet, és mi szükséges még ahhoz, hogy ez egy elsőrangú böngészőfunkció legyen, ne csak egy újabb szkript.
Egy egyszerű képernyőképkészítő eszköztől a Jit-Browserig
Kezdtünk egy kis parancssori eszközzel: getpage https://example.com page.png. Ez elindította a Chrome-ot egy Docker konténerben, készített egy képernyőképet a renderelt example.com-ról az oldalról, majd kilépett.
Hasznos bizonyíték a koncepcióra. Minden hívás hideg indítás volt. Semmit sem tudott a fordításról, munkamenetekről vagy állapotról. Csak egy headless kamera volt.
A Jit-Browser a következő lépés. Még mindig valódi Chrome-ot használ, de most:
- Rögzíti, mi történik az oldalon belül.
- Beilleszti a Jit-TR szkriptet mint fordítási réteget.
- Képes követni egyszerű folyamatokat, mint például a süti banner vagy legördülő menük.
- Teljesen lefordított HTML-t rögzít, nem csak egy képernyőképet.
Ez az oldal magyarázza el ezt a folyamatot, hogy láthasd, hogy nem csak légből kapott dolgokat mondunk. Megmutatjuk, hogyan működhet valójában egy böngészőszintű többnyelvű réteg.
A Jit-Browser folyamat 6 lépésben
Magas szinten minden rögzítés ugyanazt a sorrendet követi.
-
Indítsd el a valódi Chrome-ot (headless) a Dockerben.
A Puppeteer-t (pptr.dev) használjuk, hogy elindítsuk ugyanazt a motort, amely a normál böngészőket működteti, de látható ablak nélkül. Nincs egyedi elemző, nincs hamis renderelés. -
Alkalmazd a sütiket vagy a bejelentkezési állapotot (ha be van állítva).
Azokhoz a bemutatókhoz, amelyek bejelentkezett munkamenetet igényelnek, visszajátszuk a sütijeidet. Nincs brutális erő, nincs jelszó kitalálás, nincs olyan fiókok feltérképezése, amelyeket nem irányítunk. -
Töltsd be a célnak megfelelő oldalt pontosan úgy, mint egy felhasználó.
HTML, CSS, JavaScript, betűtípusok, képek. Várunk anetworkidle2(https://pptr.dev/api/puppeteer.page.waitfornetworkidle), hogy a lassú csomagok és betűtípusok befejezhessék a betöltést. -
Illessze be a Jit-TR kódot mint réteget.
Hozzáadunk egy szkript címkét, amely a szabadalmaztatás alatt álló futtatókörnyezetünkre mutat – például:. A Jit-TR futtatómodul bejárja az exponált DOM-ot (document.head és document.body), visszaküldi az kinyert terhelést a mi (vagy bármely) szerverünkre feldolgozásra, megkapja az eredményeket (fordítás, fejlesztés vagy új információ), átírja a látható szöveget, és új jelentésrétegeket ad hozzá az eredeti fölé. Az egyetlen létező korlátozás egyszerű: a szkriptek bővíthetők, de az új utasítások soha nem zavarhatják meg az oldal saját szkriptjeit. Ezt általában aMutationObserverpéldányok használatával valósítják meg, hogy figyeljék a releváns változásokat a DOM-ban, kis, célzott javításokat alkalmazzanak, és elkerüljék a meglévő alkalmazáslogika vagy eseménykezelők megérintését. -
Futtass opcionális folyamatokat: sütik, kattintások és görgetés.
A valódi oldalak gyakran igényelnek egy vagy két műveletet: egy süti banner bezárása, egy menü megnyitása, görgetés a további ajánlatok betöltéséhez. A Jit-Browser egyszerű folyamat szkriptet futtathat, így ezek az elemek láthatóak a rögzítés előtt. -
Rögzítsd a kibővített kimenetet.
Mentjük:- A teljesen módosított HTML-t a hosztoláshoz vagy auditáláshoz.
- Egy időzítési nyomot a potenciális szűk keresztmetszetek azonosításához.
Ez a HeadlessChrome101 magja. Ez a mentális modell arról, hogy egy böngésző hogyan kezelheti az új vagy meglévő adatokat beépített rétegként bármely böngészőben.
Miért nem csak egy játékszkript
A Jit-Browser fontos, mert bizonyítja, hogy egy böngészőszintű réteg felépíthető ugyanazokkal az elemekkel, amelyeket a böngészőszolgáltatók már minden nap használnak, és hogy ez a réteg biztonságosan képes teljes kliens-szerver interakciót lebonyolítani bármely külső szolgáltatással, beleértve a saját Jit-TR futtatókörnyezetünket is. Ez az a pont is, ahol SEO-tudatos fejlesztéseket adunk hozzá, mint például rel="alternate" hreflang="..." linkek és gazdag sitemap.xml bejegyzések. A gyakorlatban ez azt jelenti, hogy kibővített információkat tudunk megjeleníteni nem zavaró HTML területeken, mint például elemek a meglévő oldal bal vagy jobb oldalán, vagy JavaScript modálok használatával, amelyek nyelvi választásokat és SmartSearch-t csatolnak anélkül, hogy zavarják az eredeti elrendezést vagy szkripteket.
-
Valódi Chrome motor.
Minden a Chrome-on fut - csak látható ablak nélkül. Ha működik a Chrome-ban a látogatóid számára, akkor működik a Jit-Browser-ben is. -
Tartalom Biztonsági Politika tudatos.
A legtöbb oldal letiltja a szkripteket CSP-vel. Headless módban használhatjuk a ChromesetBypassCSP(true)(https://pptr.dev/api/puppeteer.page.setbypasscsp) a Jit-TR injektálásához a rögzítési környezetbe. Nem kérjük, hogy a termelési oldalak gyengítsék a biztonsági politikáikat. -
Teljes időzítés és naplózás.
Rögzítjük a kezdési időket, az oldalak betöltési idejét, a Jit-TR indítását, a folyamatlépéseket és a rögzítést. Látni fogja, hová mennek a milliszekundumok, és hogy a Jit-TR valójában mit csinál az oldalon. -
A szkript és a réteg elválasztása.
Ma a Jit-TR lehet "csak egy szkript", amit hozzáadsz egy webhelyhez. A Jit-Browserben úgy kezeljük, mint egy stabil réteget, ami mindig fut. Ez nagyon közel áll ahhoz, ahogyan egy böngészőszolgáltató natívan integrálhatná.
Mit old meg már a Jit-TR API
A nehéz rész nem a fej nélküli Chrome. A nehéz rész megbízhatóan átalakítani az élő, zűrzavaros weboldalakat biztonságos, többnyelvű verziókká. A saját fejlesztésű futtatónk a api.jit-tr.com már végzi ezt a munkát.
Ma az API futási idő a következőket kezeli:
-
Nyelv kiválasztása.
Olyan paramétereket olvas, mintjittr=ES-419, normalizálja a szélsőséges eseteket, és naplózza a választott nyelvet, például:[Jit-TR] Kiválasztott nyelv → ES-419. -
DOM kinyerés, fordítás és szemantikai átkonfigurálás.
A futási idő a valódi Chrome DOM-ot járja be, csak a látható szöveget vonja ki, felépíti a strukturált fordítási terhet, és visszaírja az eredményeket az oldalra. Minden nehéz szélsőséges eset automatikus: emoji sorozatok, HTML entitások, írásjelek és térköz szabályok, vegyes nyelvű szövegek, valamint balról jobbra / jobbról balra váltás. Emellett átírja a nyelvspecifikus szkript blokkokat — beleértveés más egyéb strukturált adatcímkék — biztosítva, hogy minden nyelv helyes, független, gyorsítótárazott metaadatokkal rendelkezzen a keresőmotorok és mesterséges intelligencia rendszerek számára. -
Ügyfél viselkedés.
Nyelvi zászlókat jelenít meg, tiszteletben tartja a nem biztonságos gyökereket, és a lehető legbiztonságosabban működik egyoldalas alkalmazásokkal és keretrendszerekkel.
Mindez már ma is működik a Jit-TR webhelyeken. A Jit-Browser egyszerűen újrahasználja ezt egy ellenőrzött fej nélküli környezetben.
Mire van még szükség egy natív böngésző funkcióhoz
Mire van még szükség egy natív böngésző funkcióhoz
A Jit-Browser-t beépített böngészőfunkcióvá alakítani nem igényel csodát - csak egy kis, jól meghatározott változtatáscsomag elhelyezésének képességét, amelyet a böngészőmotorok már értenek.
A Jit=-Böngészőt beépített böngészőfunkcióvá alakítani. Ez nem csoda, csupán egy kis változtatás, amit a böngészők már értenek.
-
Egy natív horgony a motorban.
Ma ezt úgy szimuláljuk, hogy egy scriptet injektálunk a headless Chrome-ból. Egy valódi integráció dedikált fordítási helyet adna a Jit-TR-nek, hogy a renderelési folyamat megfelelő pontján olvashassa és írhassa a DOM szöveget. -
A nyelvi szándék kifejezésének standard módja.
Már használjuk?jittr=NYELVés sütik. Egy böngésző szintű megoldás tiszteletben tarthatja a böngésző nyelvi beállításait és a felhasználói választásokat, mint például az "ezt az oldalt mindig fordítsd le ES-419-re". -
Egy világos biztonsági és adatvédelmi keretrendszer.
A szabályoknak, hogy milyen szöveg hagyhatja el az eszközt, mennyi ideig tárolható, és hogyan mondhatnak le a webhelyek vagy felhasználók, világosnak és dokumentáltnak kell lenniük. A böngészőn belüli natív megvalósítás valójában biztonságosabb lehet, mint az ad-hoc szkriptek.
Példa: HarmonyOS az ES-419-ben
Itt van egy konkrét példa a csővezeték működésére.
Hívjuk:
getpageJtrBrowser \
"https://www.harmonyos.com/" \
"jittr=ES-419" \
null \
"ES-419/index.php"
Jit-Böngésző:
- Fejlesztett Chrome indítása Dockerben.
- Terhek
https://www.harmonyos.com/. - Beilleszti a Jit-TR kódot az ES-419 paraméterrel.
- Hagyjuk, hogy a Jit-TR lefordítsa a látható kínai szöveget spanyolra (Latin-Amerika).
- Mentse az eredményt mint
ES-419/index.php.
A HarmonyOS weboldalnak nem kell megváltoznia. A felhasználó szempontjából úgy tűnik, hogy az oldal egyszerűen támogatja a nyelvüket.
Miért létezik ez az oldal
A HeadlessChrome101 egy összefoglaló, amely megmutatja:
- Valódi böngészőmotorokat és valódi CSP-szabályokat használunk.
- Már van egy működő, saját fordító futtatónk.
- A hátralévő rés a natív böngésző funkcióhoz kicsi és jól meghatározott.
Ha böngészőket, operációs rendszereket vagy nagy platformokat építesz, és szeretnél egy univerzális, többnyelvű réteget, amely tiszteletben tartja a biztonsági modelledet, készen állunk a beszélgetésre. A kód létezik. A viselkedés mérhető. A következő lépés a partnerség.