Второй проект, который мы запустили в рамках челленджа — это браузерное расширение для скачивание писем из Gmail в PDF. В этой статье я расскажу про то, как мы нашли идею, разработали продукт и бесплатно привлекли 896 установок за 3 месяца.
Привет! Я Антон Георгиев. Работаю Frontend-разработчиком, а после работы делаю свои пет-проекты. Мы с другом решили запустить 12 стартапов за 12 месяцев. Про это пишем в нашем Телеграм-канале «Инди-хакеры: стартапы из 💩 и 🥢».
Эта история про наш 2-й продукт из 12. Весь путь от идеи до запуска мы прошли за 1 месяц. А первых 100 пользователей мы привлекли уже через 2 недели, не потратив ни копейки на маркетинг. Вот результаты за 90 дней жизни продукта Save Emails from Gmail as PDF:
Выбор идеи
Идея возникла довольно просто. Мы изучали рынок расширений для Google Chrome, перебирали разные направления, пока не наткнулись на нишу плагинов для Gmail. Заинтересовались, начали глубже копать и нашли компанию CloudHQ, которая делает исключительно расширения для работы с сервисами Google.
Мы нашли все их расширения и отсортировали по самым популярным. Среди топ-5 их расширений был продукт «Save Emails as PDF», у которого было 100 000 пользователей. Это функция сохранения писем и вложений из Gmail в формате PDF. Можно выделить сразу несколько писем, нажать кнопку экспорт и все письма вместе с файлами, картинками, видосиками и документами сохраняются на компьютер.
Я сразу вспомнил личный опыт. Однажды мне нужно было выгрузить около 50 писем, чтобы заверить переписку у нотариуса. Делать это вручную, особенно с вложениями, оказалось неудобно и заняло несколько часов.
Мы проверили спрос по ключевым словам в поиске и изучили обсуждения на Reddit. Оказалось, у многих такая же проблема. Пользователи ищут способы массово сохранять письма из Gmail в PDF.
Так родилась идея создать простое расширение, которое одним кликом формирует PDF-документ со всеми выбранными письмами и вложениями.
Разработка
Разработка оказалась непростой. Сначала я изучил множество библиотек для конвертации HTML в PDF и JPEG в PDF на фронтенде, но большинство из них были устаревшими и плохо справлялись с задачей. Я рассматривал вариант делать обработку на backend. Просто отправлять туда HTML или URL и генерировать PDF на сервере. Но быстро понял, что это небезопасно. Важно было избежать пересылки и хранения личных данных.
В итоге я решил реализовать всё полностью на frontend. Чтобы разобраться, как это лучше сделать, я даже скачал исходники расширения одного из конкурентов. Посмотрел, как все устроено у них. Понял, что идея собирать PDF из HTML с помощью JavaScript, вполне рабочая. Это позволило сохранить верстку писем и оставить текст выделяемым.
Самой сложной проблемой была «плавающая» верстка. Элементы постоянно смещались, ломались стили. После множества экспериментов мне удалось подобрать оптимальное решение. Сейчас большинство писем и вложений отображаются корректно.
Весь контент в PDF (текст, изображения, линии) позиционируется вручную по координатам x, y. Для этого используется библиотека jsPDF.
Логика работы:
Я прохожу по каждому узлу DOM, получаю размеры и стили элементов через:
node.getBoundingClientRect() — размеры и положение элемента на экране.
window.getComputedStyle() — CSS-стили (шрифты, цвета, границы).
2. Элементы добавляются в PDF, используя методы jsPDF.
doc.addImage(imageData, 'PNG', x, y, width, height);
Для линий (границ элементов):
doc.line(x1, y1, x2, y2); — значения x, y здесь - это абсолютные координаты относительно текущей страницы PDF.
Я выделил несколько особенностей:
Каждая страница PDF имеет фиксированный размер (например, Letter — 612x792 pt).
Чтобы текст и изображения не упирались в края, я использую padding. Всё содержимое размещается внутри страницы, ограниченной отступами.
Если элемент не помещается в оставшееся пространство текущей страницы, то я вставляю невидимые элементы-заполнители (fake-объекты), чтобы автоматически переместить контент на следующую страницу. Из-за этого на странице бывают пустоты.
Загрузка вложений и изображений
Сначала я простым селектором “.att a” нахожу все ссылки на вложения и изображения из письма, а потом скачиваю их. Данные загружаются в виде Blob, затем преобразуются в DataURL с помощью FileReader. SVG конвертируется в PNG при помощи библиотеки Canvg, чтобы затем вставить в PDF:
const v = await Canvg.fromString(ctx, svgText);
await v.render();
const pngDataUrl = canvas.toDataURL('image/png');
const img = document.createElement('img');
img.dataset.fileName = fileName;
img.src = pngDataUrl;
// Вычисляем коэффициент масштабирования:
// Если изображение больше доступного пространства, то scale < 1, иначе scale === 1 (не увеличиваем)
const scale = Math.min(1, availableWidth / origWidth, availableHeight / origHeight);
const renderWidth = origWidth * scale;
const renderHeight = origHeight * scale;
img.style.width = renderWidth + 'px';
img.style.height = renderHeight + 'px';
Изображения масштабируются так, чтобы вписаться в доступную область страницы без искажений.
Заполнение fake-объектами и перенос контента
Если масштабированное изображение не помещается в оставшееся пространство на текущей странице, я вставляю fake-объекты (пустые HTML-элементы), которые сдвигают контент на следующую страницу.
Логика вставки fake-объекта:
function addFakeElement(rect, element, pageHeight, padding) {
const effectivePageHeight = pageHeight - padding;
const finalTop = rect.top % effectivePageHeight;
const availableSpace = pageHeight - padding / 2 - finalTop;
if (rect.height > availableSpace) {
const filler = document.createElement('div');
filler.style.setProperty('display', 'block', 'important');
filler.style.setProperty('padding-top', availableSpace + 'px', 'important');
filler.style.setProperty('width', '100%', 'important');
element.parentNode.insertBefore(filler, element);
}
}
Как это работает
Я рассчитываю, сколько свободного места осталось до конца текущей страницы (availableSpace).
Если высота текущего элемента (например, изображения) больше, чем свободное место, перед ним вставляется пустой элемент-заполнитель с нужной высотой (padding-top).
Этот заполнитель «толкает» следующий элемент вниз, автоматически перемещая его на следующую страницу PDF.
Этот подход обеспечивает предсказуемое расположение изображений и вложений в PDF-документе, несмотря на сложности, связанные с разметкой и размерами исходных данных из Gmail.
Дизайн и лендинг
Дизайн интерфейса, иконки и изображения для Chrome Store мы сделали на основе конкурентов. Главной задачей было сделать яркую иконку и привлекательную картинку для превью, которая выводится в результатах поиска и в блоке рекомендаций.
На главной картинке для страницы расширения мы показали решаемую проблему и основные преимущества продукта. На остальных картинках показали, как работает расширение в интерфейсе Gmail.
Сделали простой лендинг на Google Sites. Быстро и самое главное бесплатно. Вот что получилось - https://sites.google.com/view/email-to-pdf/. Наша цель — привязать сайт в форме публикации расширения, чтобы получить статус «Verified publisher». Также лендинг позволяет нам поставить ссылку на страницу расширения, чтобы передать немного веса для SEO.
SEO и локализация
Для оптимизации страницы расширения под поисковые запросы нам нужно было найти ключевые слова, которые люди вводят в Google, когда ищут способы сохранения или конвертации писем из Gmail в PDF. Мы проанализировали конкурентов, Google Trends, сервис WordStream и составили список ключевых слов.
Ключевые слова с самым высоким спросом мы использовали в названии расширения, а остальные вписывали в описание. В генерации описания на английском языке нам помогал DeepSeek.
Мы составили промт, с помощью которого получили уникальный текст с вписанными ключевыми словами и с учетом функций расширения. За основу брали тексты конкурентов. Вот такой промт у нас получился:
Представь себя в роли копирайтера, SEO-специалиста и носителя английского языка.
Напиши описание для браузерного расширения, которое сохраняет e-mail письма из Gmail как PDF файлы.
Функции моего расширения:
- Сохранение 1 письма или всей истории переписки
- Сохранение облегченной версии письма без картинок и без вложений
- Сохранение полной версии письма с картинками и с вложениями. Картинки и PDF-файлы из письма выводятся в экспортированном PDF-файле
- Сохранение нескольких выделенных писем. Сохранение до 50 выделенных писем с 1 страницы.
- Выбор формата экспортируемого файлы: A0-A8, Letter, Legal
Проанализируй описания конкурентов моего расширения ниже, объедини их в 1 самый подробный текст, который включает в себя смыслы и факты из всех текстов написанных ниже.
Используй в тексте следующие ключевые слова для SEO, не нарушая грамматику:
Ключевые слова:
[Тут список ключевых слов]
-----
Описание конкурента 1:
[Тут текст 1]
-----
Описание конкурента 2:
[Тут текст 2]
После нескольких итераций правок в DeepSeek мы получили практический готовый текст. Немного подредактировали его вручную и довели вхождения ключевых слов в нужном количестве.
Затем мы перевели описание и интерфейс расширения на 55 языков с помощью API ChatGPT. Так мы получаем более широкий охват потенциальных пользователей за счет языковых версий страницы расширения.
Бесплатный маркетинг
Мы попросили друзей оставить первые отзывы, чтобы повысить доверие пользователей и получить звездочки рейтинга. На этом этапе расширение было полностью упаковано.
Далее мы подали заявку на фичеринг. Про то как получить статус «Featured» я писал в предыдущем посте. Это позволило увеличить показы расширения в Chrome Store.
Для привлечения первых пользователей в наши продукты, мы активно используем бесплатные площадки и SEO.
Мы разместили ссылки на UGC-площадках: ProductRadar, ProductHunt, VC, Reddit, Quora, Stackoverflow, Github, Medium, Dev.to, indiehackers.com. Это дало немного новых установок, но в большей степени ссылки увеличивают вес для SEO в Google.
Пример размещения на Reddit:
Пример размещения на Dev.to:
Запуск на ProductHunt
Запуск на ProductRadar
Результаты
Что мы имеем за 3 месяца:
896 установок.
696 активных пользователей в неделю.
Получили статус «Featured» в Chrome Store 🏆.
Получили обратную связь от пользователей, поправили баги и залили уже 3-ю версию.
Самая большая доля по странам — это пользователи из США, Сербии и Индии. А основные источники трафика — Chrome Store (попадает в Direct и Unassigned) и поиск Google. Это органический трафик, который позволяет протестировать продукт без вложений в маркетинг.
Сколько мы вложили
Выводы и планы
Наш опыт подтвердил, что даже небольшие инструменты для повседневных задач могут найти свою аудиторию. А востребованный продукт можно создать с нулевым бюджетом, если выявить потребность, проанализировать конкурентов и грамотно применить SEO.
Добавить новые функции: загрузка в Google Drive, объединение нескольких писем в 1 PDF.
Улучшить конвертацию. Чтобы корректно сохранять сложные письма с нестандартной версткой.
Протестировать платную версию.
Эксперименты с контентом и новыми каналами трафика.
Заходите к нам в Телеграм-канал «Инди-хакеры: стартапы из 💩 и 🥢» и следите за нашим челленджем «12 проектов за 12 месяцев».
