📤 Telegram Text Sender

Веб-приложение на чистом JavaScript (Vanilla JS) для отправки выделенного текста с сайта в Telegram-бот.

✨ Возможности

• 🎯 Выделение любого текста на странице
• 📱 Отправка в Telegram-бот одним кликом
• 📸 Опциональная отправка скриншота страницы
• 🔒 Безопасная передача данных через сервер
• 📱 Адаптивный дизайн
• 🚀 Современный JavaScript (ES6+)

🚀 Быстрый старт

1. Клонирование и установка

git clone <repository-url>
cd telegram-text-sender
npm run setup  # Установка зависимостей и создание .env

2. Настройка Telegram бота

Создание бота

1. Откройте Telegram и найдите @BotFather
2. Отправьте команду /newbot
3. Следуйте инструкциям для создания бота
4. Сохраните полученный токен бота

Получение Chat ID

1. Отправьте сообщение боту
2. Откройте в браузере: https://api.telegram.org/bot<YOUR_BOT_TOKEN>/getUpdates
3. Найдите "chat":{"id":...} в ответе - это ваш Chat ID

3. Конфигурация

Отредактируйте файл .env (создан автоматически командой npm run setup):

BOT_TOKEN=ваш_токен_бота_здесь
CHAT_ID=ваш_chat_id_здесь
NODE_ENV=development
PORT=3001
MAX_RETRIES=3
REQUEST_TIMEOUT=30000

4. Запуск

npm start

Откройте http://localhost:3001 в браузере.

📁 Структура проекта

telegram-text-sender/
├── src/                    # Исходный код
│   ├── server.js          # Node.js сервер
│   ├── app.js             # Основная логика (клиент)
│   ├── config.js          # Конфигурация (демо)
│   ├── middleware.js      # Middleware
│   └── public/            # Статические файлы
│       ├── index.html     # Основная HTML страница
│       ├── styles.css     # Стили приложения
│       └── lib/           # Библиотеки
│           └── html2canvas.min.js
├── tests/                 # Тестовые файлы
│   ├── test.html
│   ├── diag.html
│   ├── test-csp.html
│   └── assets/
├── config/               # Конфигурационные файлы
│   ├── docker-compose.yml
│   ├── Dockerfile
│   └── nodemon.json
├── docs/                 # Документация
│   └── README.md
├── backups/              # Резервные копии
├── env-example.txt       # Шаблон переменных окружения
├── package.json          # Зависимости и скрипты
└── .gitignore           # Исключаемые файлы

🔧 API Endpoints

POST /api/send-message

Отправка текстового сообщения

Параметры:

• text (string, required): Выделенный текст (макс. 4096 символов)
• url (string, optional): URL страницы
• timestamp (string, optional): Время отправки

Ответ:

{
  "success": true,
  "message_id": 123,
  "processing_time": 245
}

POST /api/send-with-image

Отправка сообщения с изображением

Параметры:

• text (string, required): Выделенный текст
• url (string, optional): URL страницы
• timestamp (string, optional): Время отправки
• screenshot (file, required): Скриншот страницы (макс. 10MB)

Ответ:

{
  "success": true,
  "message_id": 124,
  "file_size": 245760,
  "processing_time": 1250
}

GET /api/health

Проверка статуса сервера

Ответ:

{
  "status": "ok",
  "timestamp": "2025-12-30T05:00:00.000Z",
  "uptime": 3600,
  "config_valid": true,
  "telegram_connected": true,
  "bot_info": {
    "username": "my_bot",
    "first_name": "My Bot"
  }
}

GET /api/bot-info

Получение информации о боте

POST /api/test-send (только в development)

Тестовая отправка сообщения

🎨 Использование

1. Выделите текст на странице стандартным способом (мышь или тач)
2. Появится кнопка "📤 Отправить в Telegram" рядом с выделением
3. Нажмите кнопку для отправки
4. Опционально: включите скриншот в настройках

🛠️ Технологии

• Frontend: Vanilla JavaScript (ES6+)
• Backend: Node.js + Express
• Безопасность: Helmet, CORS, Rate Limiting
• Telegram API: Bot API с повторными попытками
• Файлы: Multer для обработки загрузок
• Скриншоты: html2canvas
• Контейнеризация: Docker + Docker Compose
• Мониторинг: Health checks, structured logging

🔒 Безопасность

🛡️ Многоуровневая защита токенов

• 🚫 Токены НЕ доступны на фронтенде - удалены из клиентского кода
• 🔐 Хранение только на сервере - в переменных окружения process.env
• 🚪 Блокировка чувствительных файлов - config.js, .env недоступны через HTTP
• 🔒 Защищенные API endpoints - только авторизованные запросы

🛡️ Дополнительные меры безопасности

• ✅ Валидация и санитизация входных данных
• 🛡️ CORS и Helmet для защиты заголовков
• 🚦 Rate limiting (100 запросов/15мин)
• 📁 Лимиты размера файлов (10MB)
• 🔄 Повторные попытки отправки с exponential backoff
• 🩺 Health checks для мониторинга
• 🔒 Graceful shutdown
• 📝 Content Security Policy (CSP) для предотвращения XSS
• 🚫 Origin validation для API запросов

🐳 Docker Deployment

Сборка и запуск

# Сборка образа
docker build -t telegram-sender .

# Запуск контейнера
docker run -p 3001:3001 --env-file .env telegram-sender

# Или с Docker Compose
docker-compose up -d

Переменные окружения для Docker

# В .env файле
BOT_TOKEN=your_token
CHAT_ID=your_chat_id
NODE_ENV=production

🌐 Поддержка браузеров

• ✅ Chrome (последние 2 версии)
• ✅ Firefox (последние 2 версии)
• ✅ Edge (последние 2 версии)
• ⚠️ Safari (частичная поддержка скриншотов)

📝 Настройка для продакшена

Переменные окружения

NODE_ENV=production
BOT_TOKEN=ваш_токен
CHAT_ID=ваш_chat_id
PORT=3001

Запуск с PM2

npm install -g pm2
pm2 start src/server.js --name telegram-sender
pm2 save
pm2 startup

Nginx конфигурация

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

🔧 Разработка

Локальная разработка

npm run dev  # с nodemon для авто-перезагрузки

Добавление новых функций

1. Модифицируйте src/app.js для клиентской логики
2. Добавьте API endpoints в src/server.js
3. Обновите стили в src/public/styles.css

🐛 Устранение неполадок

Бот не получает сообщения

1. Проверьте токен бота в .env
2. Убедитесь что бот добавлен в чат
3. Проверьте Chat ID

Скриншот не создается

1. Проверьте загрузку html2canvas
2. Проверьте CORS настройки
3. Попробуйте в другом браузере

Сервер не запускается

1. Проверьте установку зависимостей: npm install
2. Проверьте порт (может быть занят)
3. Проверьте переменные окружения

📄 Лицензия

MIT License - см. файл LICENSE для деталей.

🔧 Устранение неполадок

Сообщения не приходят в Telegram

Симптомы:

• Приложение пишет "Отправлено успешно"
• Но сообщения не появляются в Telegram

Возможные причины и решения:

1. Неправильный Chat ID:

   # Получите правильный Chat ID:
   # 1. Напишите сообщение боту в Telegram
   # 2. Откройте: https://api.telegram.org/bot<ВАШ_BOT_TOKEN>/getUpdates
   # 3. Найдите "chat":{"id":...} в ответе

2. Бот не имеет доступа к чату:

   • Убедитесь, что начали чат с ботом
   • Бот должен быть добавлен в группу (если отправка в группу)

3. Проверьте токен бота:

   curl https://api.telegram.org/bot<ВАШ_BOT_TOKEN>/getMe

4. Тестовая отправка:

   curl -X POST http://localhost:3001/api/send-message \
     -H "Content-Type: application/json" \
     -d '{"text":"Тест от API"}'

Проблемы с API (503 Service Unavailable)

Симптомы:

• Ошибка 503 при запросе к /api/health
• "Failed to load resource" для API endpoints
• content.js ошибки в консоли браузера

Решения:

1. Очистите кэш браузера:

   # Chrome: Ctrl+Shift+R
   # Firefox: Ctrl+F5
   # Safari: Cmd+Shift+R

2. Проверьте работу API:

   curl http://localhost:3001/api/health

3. Используйте диагностическую страницу: Откройте: http://localhost:3001/diag.html

4. Перезапустите сервер:

   npm start

5. Проверьте в приватном окне браузера

Проблемы с загрузкой ресурсов (TLS/SSL ошибки)

Симптомы:

• Ошибки "Cross origin requests are only supported for HTTP"
• "Failed to load resource: Через помилку TLS не вдалося встановити захищене зʼєднання"

Решения:

1. Всегда открывайте через HTTP сервер:

   npm start
   # Затем в браузере: http://localhost:3001

2. Очистите кэш браузера:

   • Chrome: Ctrl+Shift+R
   • Firefox: Ctrl+F5
   • Safari: Cmd+Shift+R

3. Проверьте, что сервер запущен:

   curl http://localhost:3001/api/health

4. Не открывайте файлы локально:

   • ❌ file:///path/to/src/public/index.html
   • ✅ http://localhost:3001

Проблемы с Telegram ботом

Бот не получает сообщения:

1. Проверьте токен бота в .env
2. Убедитесь что бот добавлен в чат
3. Проверьте Chat ID: https://api.telegram.org/bot<TOKEN>/getUpdates

Скриншот не создается:

1. Проверьте что html2canvas загружен
2. Попробуйте в другом браузере
3. Отключите настройку скриншота

Сервер не запускается

Порт занят:

# Найти процесс
lsof -ti:3001
# Остановить процесс
kill -9 <PID>

Отсутствуют зависимости:

rm -rf node_modules package-lock.json
npm install

🤝 Вклад в проект

1. Fork проект
2. Создайте feature branch (git checkout -b feature/AmazingFeature)
3. Commit изменения (git commit -m 'Add some AmazingFeature')
4. Push в branch (git push origin feature/AmazingFeature)
5. Откройте Pull Request

📞 Контакты

Если у вас есть вопросы или предложения, создайте issue в репозитории.