GitHub → krakotay/ai-translator-chrome
Пока только для Chromium-браузеров.

Зачем вообще это всё

Google Translate — неплох, но переводит сухо, глупо, а иногда — просто криво.

пример
Мой (через gemini 2.5 flash lite)
Мой (через gemini 2.5 flash lite)
google translate
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

Комментарии (11)


  1. janvarev
    07.07.2025 17:14

    Есть опенсорсное расширение для браузеров chatGPTBox - через AI делается переводы, объяснение кода, суммаризация и прочее, включая свои кастомные промты. Chrome, Edge, Firefox.

    Если кому надо - пример использования и инструкция по подключению через OpenAI-совместимое API (для себя делал, поэтому там конкретная точка доступа, а так можно к любой подключать)


    1. krakotay Автор
      07.07.2025 17:14

      Спасибо!

      Но как я вижу, это не расширение перевода, это интеграция в браузер, через попапы и отдельные менюшки.


      1. janvarev
        07.07.2025 17:14

        Не умаляя достоинств расширений перевода, все-таки обычно хочется контролировать для ИИ контекст и выход. А то, например, будет статья на 64К знаков - так там в выходе сеть что-нибудь потеряет. Или будет переводить что-то скрытое в DOM ненужное...

        В chatGPTBox просто довольно эффективно это сделано - выделил фрагмент, ткнул менюшку, читаешь в попапе. Плюс другие допинструменты там же.

        Если что, я сам юзаю это расширение года 2 уже как, и очень доволен, один из реально постоянно используемых рабочих инструментов.

        А расширения конкретно перевода.... да, там, пардон, в маркете расширений просто каждый тупо продвинуться пытается, поэтому и найти что-то нормальное сложно. Я и это-то в свое время (в 2023) с трудом нашел, уже тогда было все забито "ChatGPT в браузере", ведущими на свои платные сервисы.


        1. krakotay Автор
          07.07.2025 17:14

          Хороший аргумент. Но как у меня происходит

          1. Скрытые элементы не учитываются
            if (cs.display === "none" || cs.visibility === "hidden") { return NodeFilter.FILTER_REJECT;

          2. 64к знаков это, по меркам gemini 2.5 flash lite с контекстом 1м токенов - ни о чём.

          Конечно, это не значит, что моё расширение конкурирует с chatGPTBox. Я его пока не поставил, но, думаю, поставлю сам, протестирую у себя.


          1. janvarev
            07.07.2025 17:14

            1. 64к знаков это, по меркам gemini 2.5 flash lite с контекстом 1м токенов - ни о чём.

            А вы выход смотрели - оно норм все 64К переводит? Потому что проблема не во входе, а в умении модели держать выход, еще недавно были ограничения в 4-8К.

            Опять же, для кучи моделей (я использую Sonnet в основном) такие ограничения на выход есть.


            1. krakotay Автор
              07.07.2025 17:14

              64k это слов или токенов?
              А так, я гнал в перевод весьма немаленький текст по размеру, отлично держал.


  1. ScavS
    07.07.2025 17:14

    Желательно добавить openai api endpoint что бы можно было использовать локально запущенные llm, зачем платить если можно локально, например маленькая модель Ministral-8B-Instruct отлично переводит.


    1. krakotay Автор
      07.07.2025 17:14

      Там используется библиотека openai как раз, через chat complections. Endpoint это base_url которая. Если вам нужно, я добавлю поддержку.


      1. janvarev
        07.07.2025 17:14

        Это всего один настраиваемый параметр, так что лучше добавить, конечно - очень много вариативности дает.


  1. worfect
    07.07.2025 17:14

    Почему такого до сих пор никто не сделал — не понимаю.

    Все юзают православный Яндекс браузер и не парятся


  1. anshdo
    07.07.2025 17:14

    В Edge, если я не ошибаюсь, встроенный переводчик через ChatGPT работает.