HeadlessChrome101: Як Jit-Browser перетворює Chrome на повнофункціональний браузер-серверний шар
Це покроковий опис того, що робить Jit-Browser з безголовим Chrome, як він використовує власний виконуваний модуль Jit-TR і що ще потрібно, щоб зробити це функцією браузера першого класу, а не просто ще одним скриптом.
Від простого інструменту для зняття скріншотів до Jit-Browser
Ми почали з невеликого інструменту командного рядка: getpage https://example.com page.png. Він запустив Chrome в контейнері Docker, зробив скріншот відрендереного example.com зі сторінки і вийшов.
Корисний доказ концепції. Кожен виклик був холодним стартом. Він нічого не знав про переклад, сесії чи стан. Це була просто безголова камера.
Jit-Browser - це наступний крок. Він все ще використовує справжній Chrome, але тепер:
- Він реєструє, що відбувається всередині сторінки.
- Він впроваджує скрипт Jit-TR як шар перекладу.
- Він може слідувати простим потокам, таким як банери cookie або випадаючі меню.
- Він захоплює повністю перекладений HTML, а не просто скріншот.
Ця сторінка пояснює цей процес, щоб ви могли побачити, що ми не просто говоримо. Ми показуємо, як багатомовний шар на рівні браузера може насправді працювати.
Процес Jit-Browser у 6 кроках
На високому рівні кожне захоплення слідує одній і тій же послідовності.
-
Запустіть справжній Chrome (безголовий) всередині Docker.
Ми використовуємо Puppeteer (pptr.dev), щоб запустити той же движок, який живить звичайні браузери, але без видимого вікна. Ніякого спеціального парсера, ніякого фальшивого рендерингу. -
Застосуйте куки або стан входу (якщо налаштовано).
Для демонстрацій, які потребують сесії з входом, ми відтворюємо ваші куки. Ніякого грубого насильства, ніякого вгадування паролів, ніякого збору облікових записів, які ми не контролюємо. -
Завантажте цільову сторінку точно так, як це робить користувач.
HTML, CSS, JavaScript, шрифти, зображення. Ми чекаємо наnetworkidle2(https://pptr.dev/api/puppeteer.page.waitfornetworkidle), щоб повільні пакети та шрифти могли закінчити завантаження. -
Впровадьте фрагмент Jit-TR як шар.
Ми додаємо тег скрипта, що вказує на наш патентований код виконуваного модуля - наприклад:. Модуль виконуваного коду Jit-TR проходить через відкритий DOM (document.head і document.body), відправляє витягнуте навантаження назад на наш (або будь-який) сервер для обробки, отримує результати (переклад, покращення або нову інформацію), переписує видимий текст і додає нові шари значення поверх оригіналу. Єдині обмеження, які існують, прості: скрипти можуть бути доповнені, але нові інструкції ніколи не можуть заважати власним скриптам сайту. Це зазвичай реалізується за допомогоюMutationObserverекземплярів для спостереження за відповідними змінами в DOM, застосування оновлень у невеликих, цілеспрямованих патчах і уникнення втручання в будь-яку існуючу логіку програми або обробники подій. -
Запустіть необов'язкові потоки: куки, кліки та прокрутка.
Справжні сторінки часто потребують однієї або двох дій: закриття банера cookie, відкриття меню, прокрутка для завантаження більше пропозицій. Jit-Browser може виконати простий сценарій потоку, щоб ці елементи були видимі перед захопленням. -
Захопіть доповнене виведення.
Ми зберігаємо:- Повністю змінений HTML для хостингу або аудиту.
- Трасу часу для виявлення потенційних вузьких місць.
Це основа нашого HeadlessChrome101. Це ментальна модель того, як браузер може розглядати нові або існуючі дані як вбудований шар всередині будь-якого браузера.
Чому це не просто іграшковий скрипт
Jit-Browser важливий, тому що доводить, що шар на рівні браузера може бути побудований з тих же елементів, які постачальники браузерів вже використовують щодня, і що цей шар може безпечно хостити повну взаємодію клієнт-сервер з будь-якою зовнішньою службою, включаючи наш власний виконуваний модуль Jit-TR. Це також точка, де ми додаємо покращення, що враховують SEO, такі як rel="alternate" hreflang="..." посилання та збагачений sitemap.xml входи. На практиці це означає, що ми можемо відкривати доповнену інформацію всередині недеструктивних HTML-областей, таких як елементи зліва або справа від існуючої сторінки, або за допомогою модалів JavaScript, які підключають вибір мови та SmartSearch, не заважаючи оригінальному макету чи скриптам.
-
Справжній движок Chrome.
Все працює на самому Chrome - просто без видимого вікна. Якщо це працює в Chrome для ваших відвідувачів, це працює в Jit-Browser. -
Обізнаний про політику безпеки контенту.
Більшість сайтів обмежують скрипти за допомогою CSP. У безголовому режимі ми можемо використовуватиsetBypassCSP(true)(https://pptr.dev/api/puppeteer.page.setbypasscsp) для впровадження Jit-TR у середовище захоплення. Ми не вимагаємо, щоб жоден з виробничих сайтів послаблював свої політики безпеки. -
Повний таймінг та логування.
Ми фіксуємо часи запуску, часи завантаження сторінок, запуск Jit-TR, етапи потоку та захоплення. Ви можете побачити, куди йдуть мілісекунди і що насправді робить Jit-TR на сторінці. -
Розділення скрипта та шару.
Сьогодні Jit-TR може бути "просто скриптом", який ви додаєте на сайт. У Jit-Browser ми ставимося до нього як до стабільного шару, який завжди працює. Це дуже близько до того, як постачальник браузера міг би інтегрувати його нативно.
Що вже вирішує API Jit-TR
Складна частина - це не безголовий Chrome. Складна частина - надійно перетворювати живі, неохайні веб-сторінки на безпечні багатомовні версії. Наша власна середа виконання на api.jit-tr.com вже виконує цю роботу.
Сьогодні середа виконання обробляє:
-
Вибір мови.
Вона читає параметри, такі якjittr=ES-419, нормалізує крайні випадки та фіксує обрану мову, наприклад:[Jit-TR] Обрана мова → ES-419. -
Витягування DOM, переклад та семантичні переписування.
Середа виконання проходить реальним DOM Chrome, витягує лише видимий текст, створює структуроване навантаження для перекладу та записує результати назад на сторінку. Усі складні крайні випадки автоматичні: послідовності емодзі, HTML-символи, правила пунктуації та пробілів, рядки змішаних мов та перемикання зліва направо / справа наліво. Вона також переписує мовно-специфічні блоки скриптів — включаючита інші теги структурованих даних — забезпечуючи, щоб кожна мова мала правильні, незалежні, кешовані метадані для пошукових систем та систем ШІ. -
Поведінка клієнта.
Вона відображає мовні прапори, поважає небезпечні корені та грає якомога безпечніше з односторінковими додатками та фреймворками.
Усе це вже працює на сайтах Jit-TR сьогодні. Jit-Browser просто повторно використовує це в контрольованому безголовому середовищі.
Що ще потрібно для нативної функції браузера
Що ще потрібно для нативної функції браузера
Щоб перетворити Jit-Browser на вбудовану функцію браузера, ніхто не потребує дива - лише можливості внести невелику, чітко визначену кількість змін, які вже розуміють рушії браузера.
Щоб перетворити Jit-Browser на вбудовану функцію браузера. Це не диво, лише невелика кількість змін, які вже розуміють браузери.
-
Нативний хук у рушії.
Сьогодні ми імітуємо це, впроваджуючи скрипт з безголового Chrome. Реальна інтеграція надасть Jit-TR спеціальне місце для перекладу, щоб він міг читати та записувати текст DOM у правильний момент у конвеєрі рендерингу. -
Стандартний спосіб вираження мовного наміру.
Ми вже використовуємо?jittr=LANGта куки. Рішення на рівні браузера могло б поважати мовні налаштування браузера та вибір користувача, такі як "завжди перекладати цей сайт на ES-419". -
Чітка рамка безпеки та конфіденційності.
Правила щодо того, який текст може залишати пристрій, як довго його можна кешувати та як сайти або користувачі можуть відмовитися, повинні бути чіткими та задокументованими. Нативна реалізація всередині браузера може бути насправді безпечнішою, ніж випадкові скрипти.
Приклад: HarmonyOS в ES-419
Ось конкретний приклад роботи конвеєра.
Ми викликаємо:
getpageJtrBrowser \
"https://www.harmonyos.com/" \
"jittr=ES-419" \
null \
"ES-419/index.php"
Jit-Browser:
- Запускає безголовий Chrome всередині Docker.
- Завантажує
https://www.harmonyos.com/. - Впроваджує фрагмент Jit-TR з параметром ES-419.
- Дозволяє Jit-TR перекладати видимий китайський текст на іспанську (Латинська Америка).
- Зберігає результат як
ES-419/index.php.
Сайт HarmonyOS не потребує змін. З точки зору користувача, виглядає так, ніби сайт просто підтримує їхню мову.
Чому ця сторінка існує
HeadlessChrome101 - це резюме, яке показує:
- Ми використовуємо реальні рушії браузера та реальні правила CSP.
- У нас вже є працююча, власна середа виконання для перекладу.
- Залишковий розрив до нативної функції браузера малий і чітко визначений.
Якщо ви створюєте браузери, операційні системи або великі платформи і хочете універсальний багатомовний шар, який поважає вашу модель безпеки, ми готові поговорити. Код існує. Поведінка вимірюється. Наступний крок - партнерство.