Как я создал переводчик для Thunderbird на чистом JavaScript с помощью Deepseek: от задумки до релиза в официальном каталоге

Я обычный пользователь компьютера, и программирование для меня — непознанная территория. Единственный опыт, если его можно так назвать, сводится к базовым экспериментам с HTML и PHP еще в далеких двухтысячных. Сейчас изучаю Python онлайн, но что я сделал — сделано практически без понимания кода.Мотивация появилась из рутины: работая с международной перепиской в Thunderbird, постоянно приходилось копировать текст в браузер для перевода и возвращать обратно. Это отнимало кучу времени. В голову пришла мысль — а почему бы не встроить переводчик прямо в почтовый клиент? На момент задумки подобных решений не существовало, поэтому я решил создать его сам. Плюс, прочитав про Vibe Coding, захотелось попробовать на практике.Для реализации выбрал Deepseek — мощный бесплатный ИИ, которым на тот момент мало кто пользовался для создания ПО (все вокруг обсуждали платный GPT-4). Решил проверить, на что способен. Все технические детали и описание трудностей тоже сгенерировал с его помощью.

CopyBuxarTranslate/

├── src/ # Исходники │

├── background.js # Фоновый скрипт │

├── content.js # Работа с DOM │

└── popup/ # Всплывающий интерфейс

├── docs/ # Документация

├── scripts/ # Скрипты сборки

└── build/ # Собранные пакеты

JavaScriptCopyfunctionshowTranslation(originalText, translatedText){// Быстрое уведомление browser.notifications.create({type:"basic",title:"Перевод",message: translatedText.substring(0,100)+"..."});// Детальное окноshowDetailedWindow(originalText, translatedText);}

JavaScriptCopybrowser.menus.create({id:"translate-text",title:"Перевести на %s",contexts:["selection"]}); browser.menus.onClicked.addListener((info, tab)=>{if(info.menuItemId==="translate-text"){translateSelectedText(info.selectionText);}});

Английский, русский, немецкий, испанский, французский, итальянский через систему локалей Thunderbird.

Задача: Показывать иконку перевода сразу после выделения текста в письме — как в браузере.Почему не сработало (по мнению Deepseek):

Неудачная попытка:JavaScriptCopydocument.addEventListener('selectionchange',function(){const selection =window.getSelection();if(selection.toString().trim()){showTranslateIcon(selection.getRangeAt(0));}});Вопрос читателям: Кто-то реализовал такое в Thunderbird? Какие API использовать?

Задача: Открывать окно перевода под иконкой, но оно мгновенно закрывалось нативными уведомлениями Thunderbird.Пробовал:

Решение: Отказался от привязки к панели, сделал отдельное независимое окно.Вопрос сообществу: Как правильно управлять жизненным циклом окон в расширениях Thunderbird?

Задача: Отсчет секунд для показа прогресса.Проблема: Таймер то зависал, то показывал неправильное время.JavaScriptCopylet seconds =0;const timer =setInterval(()=>{ seconds++;document.getElementById('timer').textContent= seconds +' сек';},1000);// Сбивался постоянноВопрос: Как работать с таймерами в окнах расширений Thunderbird?

Задача: Пройти модерацию в официальном магазине.Что не нравилось валидатору (по верси Deepseek):

На самом деле проблема была с HTML-кодом внутри JavaScript — валидатор не пропускал. Deepseek быстро переписал все на чистый JS.Фикс:JavaScriptCopy// Было (опасно):const result =eval('('+ jsonResponse +')');// Стало:const result =JSON.parse(jsonResponse);// Было (XSS): element.innerHTML= userContent;// Стало: element.textContent= userContent;

Решение: Универсальный код с проверкой возможностей:JavaScriptCopyif(browser.menus.onShown){ browser.menus.onShown.addListener(handleContextMenu);}else{ browser.menus.create({/* базовое меню */});}

Задача: Закрывать окно при клике вне его.Пробовал разные методы:

Временное решение: Кнопка закрытия, таймер, стандартное поведение ОС.Вопрос: Есть ли кроссплатформенное решение для Windows/Linux/macOS?

bashCopyzip-r buxartranslate.xpi src/ manifest.json locales/

Использовал HTML-форматирование для красивого вида на странице расширения.

Если у вас есть опыт — поделитесь в комментариях!

Deepseek говорит красиво, а я так считаю: разработка с ИИ — увлекательный процесс. На основной функционал ушло 14 часов, доработки и переводы — еще 10. Плюс освоение Git, Eclipse, публикация... Всего около 30-40 часов (2 недели по вечерам).Сколько бы потратил профи без ИИ? Интересно сравнить.Логотрисовал в Алисе (ИИ).Не судите строго по коду — я новичок. Жду фидбэка!Ссылки: