Второй проект, который мы запустили в рамках челленджа — это браузерное расширение для скачивание писем из 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.

Логика работы:

1. Обработка DOM-дерева.

Я прохожу по каждому узлу DOM, получаю размеры и стили элементов через:

node.getBoundingClientRect() — размеры и положение элемента на экране.

window.getComputedStyle() — CSS-стили (шрифты, цвета, границы).

2. Элементы добавляются в PDF, используя методы jsPDF.

Для текста:

doc.text(value, x, y);

Для изображений:

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. Это органический трафик, который позволяет протестировать продукт без вложений в маркетинг.

Сколько мы вложили

• Разработка — $0 и 4 недели своего времени.

• Маркетинг — $0 и 1 неделя на SEO и контент-маркетинг.

Выводы и планы

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

В планах:

• Добавить новые функции: загрузка в Google Drive, объединение нескольких писем в 1 PDF.

• Улучшить конвертацию. Чтобы корректно сохранять сложные письма с нестандартной версткой.

• Протестировать платную версию.

• Эксперименты с контентом и новыми каналами трафика.

Заходите к нам в Телеграм-канал «Инди-хакеры: стартапы из ? и ?» и следите за нашим челленджем «12 проектов за 12 месяцев».