HeadlessChrome101: วิธีที่ Jit-Browser เปลี่ยน Chrome ให้เป็นเบราว์เซอร์หลายฟังก์ชันเต็มรูปแบบ–ชั้นเซิร์ฟเวอร์-เบราว์เซอร์

นี่คือการอธิบายด้วยภาษาธรรมดาว่า Jit-Browser ทำอะไรกับ headless Chrome อย่างไร มันใช้ Jit-TR runtime ที่เป็นกรรมสิทธิ์อย่างไร และยังต้องการอะไรบ้างเพื่อทำให้สิ่งนี้เป็นฟีเจอร์เบราว์เซอร์ชั้นหนึ่งแทนที่จะเป็นเพียงสคริปต์อีกตัวหนึ่ง

จากเครื่องมือจับภาพหน้าจอง่ายๆ ไปยัง Jit-Browser

เราเริ่มต้นด้วยเครื่องมือบรรทัดคำสั่งขนาดเล็ก: getpage https://example.com page.png. มันเปิด Chrome ในคอนเทนเนอร์ Docker ถ่ายภาพหน้าจอของ example.com ที่แสดงผลจากหน้า และออกจากระบบ

เป็นการพิสูจน์แนวคิดที่มีประโยชน์ ทุกการเรียกเป็นการเริ่มต้นใหม่ มันไม่รู้เรื่องการแปล เซสชัน หรือสถานะ มันเป็นเพียงกล้องที่ไม่มีหัว

Jit-Browser เป็นขั้นตอนถัดไป มันยังคงใช้ Chrome จริง แต่ตอนนี้:

มันบันทึกสิ่งที่เกิดขึ้นภายในหน้า
มันฉีดสคริปต์ Jit-TR เป็นชั้นการแปล
มันสามารถติดตามการไหลง่ายๆ เช่น แบนเนอร์คุกกี้หรือดรอปดาวน์
มันจับ HTML ที่แปลเต็มรูปแบบ ไม่ใช่แค่ภาพหน้าจอ

หน้านี้อธิบายกระบวนการนั้นเพื่อให้คุณเห็นว่าเราไม่ได้โบกมือ เรากำลังแสดงให้เห็นว่าชั้นหลายภาษาระดับเบราว์เซอร์สามารถทำงานได้จริง

กระบวนการ Jit-Browser ใน 6 ขั้นตอน

ในระดับสูง ทุกการจับภาพจะตามลำดับเดียวกัน

เปิด Chrome จริง (headless) ภายใน Docker
เราใช้ Puppeteer (pptr.dev) เพื่อเริ่มเครื่องยนต์เดียวกันที่ขับเคลื่อนเบราว์เซอร์ปกติ แต่ไม่มีหน้าต่างที่มองเห็นได้ ไม่มีตัวแยกวิเคราะห์ที่กำหนดเอง ไม่มีการแสดงผลปลอม
ใช้คุกกี้หรือสถานะการเข้าสู่ระบบ (ถ้ากำหนดค่าไว้)
สำหรับการสาธิตที่ต้องการเซสชันที่เข้าสู่ระบบ เราเล่นคุกกี้ของคุณใหม่ ไม่มีการใช้กำลัง ไม่มีการเดารหัสผ่าน ไม่มีการขูดบัญชีที่เราไม่ควบคุม
โหลดหน้าเป้าหมายเหมือนผู้ใช้
HTML, CSS, JavaScript, ฟอนต์, รูปภาพ เรารอ networkidle2 (https://pptr.dev/api/puppeteer.page.waitfornetworkidle) เพื่อให้บันเดิลและฟอนต์ที่ช้าสามารถโหลดเสร็จสิ้น
ฉีดสคริปต์ Jit-TR เป็นชั้น
เราเพิ่มแท็กสคริปต์ที่ชี้ไปยังรหัส runtime ที่อยู่ระหว่างการจดสิทธิบัตรของเรา – ตัวอย่างเช่น: