Идея родилась не из желания сделать красивую кнопку, а из раздражения: я часами просматривал обучающие и обзорные ролики на YouTube и постоянно терял цепочку ссылок, структуру темы и временные метки. Приходилось вручную открывать описание, копировать ссылки, собирать тайм‑коды, переносить всё это в заметки — рутинная работа, которая отнимала внимание от сути видео. Мне хотелось простого способа «вытянуть» структуру урока и все значимые ссылки одним щелчком, поэтому родилось решение — небольшое расширение для браузера, которое делает видимым то, что обычно спрятано в описании и комментариях.
Я начал с простого наброска: под видеоплеером должна появиться кнопка, при нажатии — панель с списком ссылок и структурой видео (разделы и тайм‑коды). Ничего фантастического, но при реализации возникали типичные технические проблемы. Первое, что я сделал — набросал интерфейс в Figma, чтобы было понятно, как элемент будет вписываться в страницу YouTube без нарушения пользовательского опыта. Дальше — манифест расширения, контент‑скрипты и простой парсер DOM для извлечения описания и комментариев.
Разработка началась в маленьких итерациях: сначала работал только парсер описания, затем подключил обработку тайм‑кодов. Первая версия представляла собой панель, которая появлялась и показывала сырой текст описания с обычными ссылками. На практике это оказалось неудобно: порядок ссылок был хаотичным, иногда авторы оставляют ссылки в комментариях, иногда в пин‑нутом комментарии. Пришлось внедрить логику, которая проверяла несколько мест на странице и группировала ссылки по признаку (офсайт, репозитории, соцсети, ссылки на главы).
Основной ошибкой на раннем этапе был подход «всё в одном скрипте». Парсер мешал рендерингу страницы, страдали производительность и время загрузки. Я поменял архитектуру на модульную: отдельный модуль для наблюдения за DOM (MutationObserver), отдельный для извлечения данных и отдельный для UI. Это уменьшило лаги и позволило тестировать части отдельно. В тот момент я и решил, что расширение должно вести себя аккуратно, не тормозить YouTube и не вмешиваться в воспроизведение — это требование к любому интерфейсному расширению по умолчанию.
При отладке пригодились Chrome DevTools и простая логика тестов: десятки роликов с разной структурой описаний, пин‑комментарии, плейлисты, стримы. Некоторые авторы форматировали тайм‑коды по‑своему, и парсер их не понимал: 1:2:3 вместо 01:02:03, или подписи без двоеточий. Я добавил гибкость, чтобы распознавать разные форматы и корректно нормализовать время. Это мелочь, но в использовании важная — пользователю не нужно вручную править таймеры.
Следующим шагом стал UX для кнопки под видео. Казалось бы — просто вставить кнопку рядом с другими элементами, но YouTube постоянно меняет DOM, и жёсткие селекторы ломались при каждом мелком обновлении. Решение — не полагаться на структуру, а искать анкерные элементы по нескольким признакам и добавлять кнопку в наиболее стабильное место. Иногда приходилось эмитировать событие клика, чтобы протестировать поведение панели в разных состояниях (развернутое описание, свернутое, мобильный вид). Это заняло больше времени, чем я ожидал.
Технические проблемы перемежались с мелкими, но раздражающими ошибками: права доступа в манифесте, ограничения на использование API, кросс‑доменные запросы, CSP(политика безопасности контента) и необходимость аккуратно обращаться с пользовательскими данными. Я решил хранить минимум: лишь кеш парсинга на время сессии, никаких внешних серверов и логов. Это упрощало модерацию и повышало доверие потенциальных пользователей. В описании магазина расширений я так и написал, что обработка происходит локально — это помогало при обратной связи.
Когда собрался рабочий прототип, я запустил небольшой бета‑тест среди коллег и знакомых авторов каналов. Отзывы были ценными: кто‑то хотел более агрессивного парсинга комментариев, кто‑то просил фильтры по типу ссылки, а зрители — возможность быстро копировать список ссылок и экспорта в заметки. Я не стал выполнять все пожелания сразу — фокус оставался на главной задаче: собирать структуру и ссылки быстро и надёжно. На этой стадии встал вопрос названия и подачи продукта. Я решил назвать его просто и честно — именно то, что отражает мою историю, — и итог появился в магазине как расширение «Как я сделал своё первое расширение для Chrome».
Ошибки на финальном этапе были скорее организационные: скриншоты для страницы в магазине, описание на двух языках, и забота о совместимости с разными версиями Chrome. Я использовал тесты на нескольких компьютерах и виртуальных машинах, запускал стресс‑сценарии с плейлистами по 50 видео подряд. И в один из вечеров пришло понимание, что ключевой момент уже достигнут: панель под видео работает быстро, парсер распознаёт большинство форматов, а кнопка появляется именно тогда, когда она нужна.
Переломный момент пришёл не после очередного фикс‑патча, а когда один из тестировщиков написал: «Я потратил полтора часа на то, чтобы найти все ссылки в этом курсе. С вашей кнопкой я сделал это за минуту». Простая письменная благодарность сильнее любых метрик. Конечно, я смотрел и на статистику: количество срабатываний кнопки, популярные форматы тайм‑кодов, распространённые площадки в ссылках. Для этого пригодились привычные инструменты аналитики — например, сбор анонимных событий без передачи личных данных в отчёты на уровне плагина и отчётность в интерфейсе. Но важно подчеркнуть: пользовательские данные не покидали устройство.
На ходу я добавлял небольшие улучшения: выделение ссылок в описании, быстрый поиск по ключевым словам внутри структуры, возможность сворачивать блоки. Ничего глобального — только то, что облегчало работу зрителям и авторам. Люди начали использовать расширение не только для образования: кто‑то быстро сохранял ссылки на софт, кто‑то собирал ссылки на источники в обзорах. Это подтвердило одну простую мысль: инструмент, созданный для себя, часто полезен другой аудитории.
В интерфейсе я старался избегать лишней агрессии: никаких всплывающих окон с просьбой оценить, никаких автозапросов на отправку данных. Это помогло получить более тёплую реакцию от аудитории. Когда стал формировать страницу в магазине, я разместил примеры использования и рекомендации по типичным сценариям: подготовка к лекциям, быстрое создание библиографий по видео, сбор ресурсов при изучении новых технологий. И конкретно предложил посмотреть продукт в магазине как о расширении «Как я сделал своё первое расширение для Chrome», где описаны сценарии и скриншоты работы.
За время работы я выучил несколько важных уроков, которыми хочется поделиться:
- Всегда тестируйте на реальных страницах, а не на идеализированных примерах. Плейлисты, живые стримы, видео с нестандартными описаниями — всё это ломает парсер.
- Разделяйте логику на модули: UI, парсинг, наблюдение за DOM. Так легче отлавливать ошибки и менять поведение.
- Уважайте приватность: храните минимум данных и выполняйте обработку локально. Это снижает число вопросов и повышает доверие.
- Не пытайтесь сразу угодить всем: фокус — ваше преимущество. Лучше хорошо решить одну задачу, чем плохо — десять.
Постепенно расширение обрело характер и конфигурации, которые я не стал менять по первому требованию. Кому‑то было важно экспортировать список в текст, кто‑то просил интеграцию с заметками — эти идеи я записал в план, но запускал в порядке приоритета. Тем временем растущая база отзывов помогала уточнять поведение: где разместить кнопку, как отображать ссылки, какие форматы времени распознавать. В интерфейсе появились подсказки, маленькие чекбоксы для включения продвинутых опций и аккуратная иконка, которая не мешает просмотру.
Если кратко, то путь от идеи до работающей кнопки под видео занял несколько месяцев, десятки исправлений и сотни тестов. Я опубликовал расширение в магазине как с расширением «Как я сделал своё первое расширение для Chrome» можно ознакомиться на странице в каталоге — там же привёл рекомендации по использованию и ответы на частые вопросы.
В завершение хочу подчеркнуть: этот проект вырос из личной боли — у меня было желание тратить меньше времени на рутину и больше — на содержание видео и обучение. Сейчас, когда я вижу, как люди используют инструмент в самых разных сценариях, понимаю, что простое решение может стать полезным для многих. Если вам тоже надоело копировать ссылки вручную и терять структуру уроков, посмотрите в магазине на вариант под названием расширение «Как я сделал своё первое расширение для Chrome» — возможно, оно сэкономит вам часы рутины и вернёт фокус на главное.
Полезные ссылки
🛒 Заказать магазин на Opencart
💻 Хостинг для Opencart
🎨 Шаблоны для Opencart
🧩 Модули для Opencart
🌐 Интернет без цензуры
Наши соц. сети
Telegram канал ProDelo
Общий чат ProDelo
Наш Youtube канал
Наш Яндекс Дзен канал
Наша группа в ВК
