GitHub → krakotay/ai-translator-chrome
Пока только для Chromium-браузеров.
Зачем вообще это всё
Google Translate — неплох, но переводит сухо, глупо, а иногда — просто криво.
пример
DeepL — качественнее, но:
часто теряет часть текста
не работает с встроенным текстом на странице — только через попап
и да, он просто не встроен в браузер нативно
А ведь очевидно: для перевода идеально подошёл бы ИИ-переводчик, вроде GPT или Claude. Но готовых решений я не нашёл. То, что есть в open source — либо мертво, либо ужасно.
пруф
Т.н. AI Translate на самом деле гуглоперевод. По остальному там тухло
Поэтому я решил: навайбкодим своё.
My Honest Opinion про css
Как устроено расширение
Идея простая: взять контекстный фрагмент DOM, в котором находится выделенный текст → перевести его через ИИ → вставить обратно без ломания страницы.
Вот базовая схема архитектуры:
content.ts (выделение и разметка текста)
↓
background.ts (прокси из-за ограничений расширений)
↓
openaiTranslator.ts (через OpenRouter API → модель → перевод)
↓
content.ts (вставка перевода)Стек:
React + Vite
TypeScript
OpenRouter API (Claude, Gemini, GPT-4, Qwen и т.д.)
Браузерный
manifest v3Vibe-IDE: Windsurf
Пример кода: как я собираю текстовые узлы
// Проходит по всему поддереву и собирает видимые Text-ноды
function collectVisibleTextNodes(root: Node) {
const out: { node: Text; original: string }[] = [];
const walker = document.createTreeWalker(
root,
NodeFilter.SHOW_TEXT,
{
acceptNode(node) {
if (!node.nodeValue?.trim()) return NodeFilter.FILTER_REJECT;
const el = node.parentElement as HTMLElement | null;
if (!el) return NodeFilter.FILTER_REJECT;
const cs = getComputedStyle(el);
if (cs.display === "none" || cs.visibility === "hidden") {
return NodeFilter.FILTER_REJECT;
}
return NodeFilter.FILTER_ACCEPT;
},
}
);
Функция проходит по дереву и собирает только видимые текстовые ноды. Это позволяет не переводить скрытый или технический мусор. Одна из прошлых реализаций переводила вообще всё, весь HTML. Работало качественно, но дольше, и вызвало большой расход токенов. Сейчас это исправлено.
Перевод происходит прямо в контексте, что особенно приятно на страницах типа документации или форумов.
OpenRouter: любой ИИ на выбор
Я использовал OpenRouter endpoint, потому что:
даёт доступ к десяткам моделей (Claude 4, GPT-4.1, Gemini 2.5 Flash и т.д.)
можно выбрать любую модель прямо в настройках
можно платить криптой, даже из России.
? Сколько стоит?
Я сам пользуюсь каждый день. За месяц потратил $0.16 — и это с тестами и перерасходами.
Для бытового перевода — почти бесплатно.
Что можно улучшить?
Сейчас работает стабильно и качественно. Достаточно, чтобы я пользовался каждый день. Мои идеи на вырост:
сделать нормальный UI выбора модели
добавить буфер оригинала / восстановления
перерисовать иконку (сейчас времянка)
можно сделать полноценный сервис с аккаунтами и настройками
Порт на Firefox
-
Выбор своего сервера (сейчас возможность выбора LM Studio отключена).
Но сервис - слишком сложно, остальное "не горит". Но "по просьбам трудящихся" могу заняться.
Заключение
Идея оказалась проще, чем я думал. Работает приятно, пользуюсь сам — почти как встроенная функция браузера.
Почему такого до сих пор никто не сделал — не понимаю.
Обратная связь на гитхабе и в комментариях всячески приветсвуется.
Комментарии (21)
ScavS
07.07.2025 17:14Желательно добавить openai api endpoint что бы можно было использовать локально запущенные llm, зачем платить если можно локально, например маленькая модель Ministral-8B-Instruct отлично переводит.
worfect
07.07.2025 17:14Почему такого до сих пор никто не сделал — не понимаю.
Все юзают православный Яндекс браузер и не парятся
dimonier
07.07.2025 17:14Не удаётся установить по инструкции в Chrome (https://github.com/krakotay/ai-translator-chrome?tab=readme-ov-file#installation) ни одним способом:
1. При перетаскивании в окно chrpme://extensions появляется сообщение CRX_REQUIRED_PROOF_MISSING, и CRX-файл удаляется, не устанавливаясь.
2. Папкиdistв исходных файлах нет.
krakotay Автор
07.07.2025 17:14Забавно... Архив crx есть в release, попробуйте там. Сейчас выложу на гитхаб и папку dist
krakotay Автор
07.07.2025 17:14Кажется, выяснил причину, ответил Вам на гитхабе
dimonier
07.07.2025 17:14Спасибо, получилось установить из dist.
Переводит прекрасно :)
Как бы ещё сделать кнопку для перевода страницы целиком (а не только выделенного элемента)?krakotay Автор
07.07.2025 17:14Я не делал такое сознательно. "во всей странице" может быть очень много знаков, тут можно и ИИ перегрузить. Ну или неприятно долго ждать ответ
janvarev
Есть опенсорсное расширение для браузеров chatGPTBox - через AI делается переводы, объяснение кода, суммаризация и прочее, включая свои кастомные промты. Chrome, Edge, Firefox.
Если кому надо - пример использования и инструкция по подключению через OpenAI-совместимое API (для себя делал, поэтому там конкретная точка доступа, а так можно к любой подключать)
krakotay Автор
Спасибо!
Но как я вижу, это не расширение перевода, это интеграция в браузер, через попапы и отдельные менюшки.
janvarev
Не умаляя достоинств расширений перевода, все-таки обычно хочется контролировать для ИИ контекст и выход. А то, например, будет статья на 64К знаков - так там в выходе сеть что-нибудь потеряет. Или будет переводить что-то скрытое в DOM ненужное...
В chatGPTBox просто довольно эффективно это сделано - выделил фрагмент, ткнул менюшку, читаешь в попапе. Плюс другие допинструменты там же.
Если что, я сам юзаю это расширение года 2 уже как, и очень доволен, один из реально постоянно используемых рабочих инструментов.
А расширения конкретно перевода.... да, там, пардон, в маркете расширений просто каждый тупо продвинуться пытается, поэтому и найти что-то нормальное сложно. Я и это-то в свое время (в 2023) с трудом нашел, уже тогда было все забито "ChatGPT в браузере", ведущими на свои платные сервисы.
krakotay Автор
Хороший аргумент. Но как у меня происходит
Скрытые элементы не учитываются
if(cs.display === "none" || cs.visibility === "hidden") {returnNodeFilter.FILTER_REJECT;64к знаков это, по меркам gemini 2.5 flash lite с контекстом 1м токенов - ни о чём.
Конечно, это не значит, что моё расширение конкурирует с chatGPTBox. Я его пока не поставил, но, думаю, поставлю сам, протестирую у себя.
janvarev
А вы выход смотрели - оно норм все 64К переводит? Потому что проблема не во входе, а в умении модели держать выход, еще недавно были ограничения в 4-8К.
Опять же, для кучи моделей (я использую Sonnet в основном) такие ограничения на выход есть.
krakotay Автор
64k это слов или токенов?
А так, я гнал в перевод весьма немаленький текст по размеру, отлично держал.