krakotay Jul 7 at 17:08

Как я навайбкодил ИИ-переводчик для браузера, потому что остальные — унылый мусор

Medium

2 min

4.8K

Artificial IntelligenceBrowser extensionsWebsite development*ReactJS*TypeScript*

Case

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 v3
Vibe-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 отключена).
Но сервис - слишком сложно, остальное "не горит". Но "по просьбам трудящихся" могу заняться.

Заключение

Идея оказалась проще, чем я думал. Работает приятно, пользуюсь сам — почти как встроенная функция браузера.

Почему такого до сих пор никто не сделал — не понимаю.
Обратная связь на гитхабе и в комментариях всячески приветсвуется.

👾 https://github.com/krakotay/ai-translator-chrome

Hubs: