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

GitHub → krakotay/ai-translator-chrome ^[1]
Пока только для 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: любой ИИ на выбор

Я не стал вставлять OpenAI API, потому что OpenRouter:

• даёт доступ к десяткам моделей (Claude 4, GPT-4.1, Gemini 2.5 Flash и т.д.)

• можно выбрать любую модель прямо в настройках

• можно платить криптой, даже из России.

• у многих моделей есть бесплатные токены

💸 Сколько стоит?

Я сам пользуюсь каждый день. За месяц потратил $0.16 — и это с тестами и перерасходами.
Для бытового перевода — почти бесплатно.

Что можно улучшить?

Сейчас работает стабильно и качественно. Достаточно, чтобы я пользовался каждый день. Мои идеи на вырост:

• сделать нормальный UI выбора модели

• добавить буфер оригинала / восстановления

• перерисовать иконку (сейчас времянка)

• можно сделать полноценный сервис с аккаунтами и настройками

• Порт на Firefox

• Выбор своего сервера (сейчас возможность выбора LM Studio отключена).

  Но сервис – слишком сложно, остальное “не горит”. Но “по просьбам трудящихся” могу заняться.

Заключение

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

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

👾 https://github.com/krakotay/ai-translator-chrome ^[1]