--- title: "Создай свое первое расширение для Chrome за 7 шагов" id: "11842" type: "post" slug: "sozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov" published_at: "2026-07-25T09:02:39+00:00" modified_at: "2026-07-25T09:02:49+00:00" url: "https://blog.prodelo.biz/sozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov/" markdown_url: "https://blog.prodelo.biz/sozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov.md" excerpt: "Идея родилась не из желания сделать красивую кнопку, а из раздражения: я часами просматривал обучающие и обзорные ролики на YouTube и постоянно терял цепочку ссылок, структуру темы и временные метки...." taxonomy_category: - "Полезное" taxonomy_post_tag: - "keywords" --- [Главная](https://blog.prodelo.biz) [Полезное](https://blog.prodelo.biz/category/helpful/) Создай свое первое расширение для Chrome за 7 шагов ![Создайте своё уникальное расширение для Chrome с нашим пошаговым руководством! Вы не только освоите веб-технологии и JavaScript, но и сможете улучшить пользовательский интерфейс браузера. Узнайте, как легко реализовать свои идеи!](https://blog.prodelo.biz/wp-content/uploads/2026/07/sozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov-740x414.png)Число просмотров:32 Идея родилась не из желания сделать **красивую кнопку**, а из раздражения: я часами просматривал обучающие и обзорные ролики на YouTube и постоянно терял цепочку ссылок, структуру темы и временные метки. Приходилось вручную открывать описание, копировать ссылки, собирать тайм‑коды, переносить всё это в заметки — рутинная работа, которая отнимала внимание от сути видео. Мне хотелось простого способа «вытянуть» структуру урока и все значимые ссылки одним щелчком, поэтому родилось решение — небольшое расширение для браузера, которое делает видимым то, что обычно спрятано в описании и комментариях. ![Как я сделал своё первое расширение для Chrome](https://lh3.googleusercontent.com/zf09CiXniiFctJQ-z6H-QbLyk5Krk1pN5HZSPBl6CJAK36VaHijCU-pWg3g4Am7lmmtGptrL3QofWcssRbdd2Y5TNA=s800-w800-h504) Я начал с простого наброска: под видеоплеером должна появиться кнопка, при нажатии — панель с **списком ссылок** и структурой видео (разделы и тайм‑коды). Ничего фантастического, но при реализации возникали типичные технические проблемы. Первое, что я сделал — набросал интерфейс в **Figma**, чтобы было понятно, как элемент будет вписываться в страницу YouTube без нарушения пользовательского опыта. Дальше — манифест расширения, контент‑скрипты и простой парсер DOM для извлечения описания и комментариев. Разработка началась в маленьких итерациях: сначала работал только парсер описания, затем подключил обработку тайм‑кодов. Первая версия представляла собой панель, которая появлялась и показывала сырой текст описания с обычными ссылками. На практике это оказалось неудобно: порядок ссылок был хаотичным, иногда авторы оставляют ссылки в комментариях, иногда в пин‑нутом комментарии. Пришлось внедрить логику, которая проверяла несколько мест на странице и группировала ссылки по признаку (офсайт, репозитории, соцсети, ссылки на главы). Основной ошибкой на раннем этапе был подход «всё в одном скрипте». Парсер мешал рендерингу страницы, страдали производительность и время загрузки. Я поменял архитектуру на модульную: отдельный модуль для наблюдения за DOM (MutationObserver), отдельный для извлечения данных и отдельный для UI. Это уменьшило лаги и позволило тестировать части отдельно. В тот момент я и решил, что расширение должно вести себя аккуратно, не тормозить YouTube и не вмешиваться в воспроизведение — это требование к любому интерфейсному расширению по умолчанию. При отладке пригодились **Chrome DevTools** и простая логика тестов: десятки роликов с разной структурой описаний, пин‑комментарии, плейлисты, стримы. Некоторые авторы форматировали тайм‑коды по‑своему, и парсер их не понимал: 1:2:3 вместо 01:02:03, или подписи без двоеточий. Я добавил гибкость, чтобы распознавать разные форматы и корректно нормализовать время. Это мелочь, но в использовании важная — пользователю не нужно вручную править таймеры. ![Как я сделал своё первое расширение для Chrome](https://lh3.googleusercontent.com/UPLnV0LSfkaLTxewVoZAHTBE76seHu6pPKoovDaJwUPGS06sAusXvPtIfhXrrP4luHrcV5ravjXpksRO1neWUucC=s800-w800-h504) Следующим шагом стал UX для кнопки под видео. Казалось бы — просто вставить кнопку рядом с другими элементами, но YouTube постоянно меняет DOM, и жёсткие селекторы ломались при каждом мелком обновлении. Решение — не полагаться на структуру, а искать анкерные элементы по нескольким признакам и добавлять кнопку в наиболее стабильное место. Иногда приходилось эмитировать событие клика, чтобы протестировать поведение панели в разных состояниях (развернутое описание, свернутое, мобильный вид). Это заняло больше времени, чем я ожидал. Технические проблемы перемежались с мелкими, но раздражающими ошибками: права доступа в манифесте, ограничения на использование API, кросс‑доменные запросы, CSP(политика безопасности контента) и необходимость аккуратно обращаться с пользовательскими данными. Я решил хранить минимум: лишь кеш парсинга на время сессии, никаких внешних серверов и логов. Это упрощало модерацию и повышало доверие потенциальных пользователей. В описании магазина расширений я так и написал, что обработка происходит локально — это помогало при обратной связи. Когда собрался рабочий прототип, я запустил небольшой бета‑тест среди коллег и знакомых авторов каналов. Отзывы были ценными: кто‑то хотел более агрессивного парсинга комментариев, кто‑то просил фильтры по типу ссылки, а зрители — возможность быстро копировать список ссылок и экспорта в заметки. Я не стал выполнять все пожелания сразу — фокус оставался на главной задаче: собирать структуру и ссылки быстро и надёжно. На этой стадии встал вопрос названия и подачи продукта. Я решил назвать его просто и честно — именно то, что отражает мою историю, — и итог появился в магазине как [расширение «Как я сделал своё первое расширение для Chrome»](https://chromewebstore.google.com/detail/video-search-ai-%E2%80%94-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8/ekldmdppahpjgpepjcpnmgglhpomcfpg?authuser=0&hl=ru) . Ошибки на финальном этапе были скорее организационные: скриншоты для страницы в магазине, описание на двух языках, и забота о совместимости с разными версиями Chrome. Я использовал тесты на нескольких компьютерах и виртуальных машинах, запускал стресс‑сценарии с плейлистами по 50 видео подряд. И в один из вечеров пришло понимание, что ключевой момент уже достигнут: панель под видео работает быстро, парсер распознаёт большинство форматов, а кнопка появляется именно тогда, когда она нужна. ![Как я сделал своё первое расширение для Chrome](https://lh3.googleusercontent.com/p3Erm8Olsj4jkXvtvmItJGK8YMvjIXb5gqYXcYa2VAF_0IjLgH_3qdPOosj7Kl4R68iNom6-qKFAcbeqbL2Isu4dTHg=s800-w800-h504) Переломный момент пришёл не после очередного фикс‑патча, а когда один из тестировщиков написал: «Я потратил полтора часа на то, чтобы найти все ссылки в этом курсе. С вашей кнопкой я сделал это за минуту». Простая письменная благодарность сильнее любых метрик. Конечно, я смотрел и на статистику: количество срабатываний кнопки, популярные форматы тайм‑кодов, распространённые площадки в ссылках. Для этого пригодились привычные инструменты аналитики — например, сбор анонимных событий без передачи личных данных в отчёты на уровне плагина и отчётность в интерфейсе. Но важно подчеркнуть: пользовательские данные не покидали устройство. На ходу я добавлял небольшие улучшения: выделение ссылок в описании, быстрый поиск по ключевым словам внутри структуры, возможность сворачивать блоки. Ничего глобального — только то, что облегчало работу зрителям и авторам. Люди начали использовать расширение не только для образования: кто‑то быстро сохранял ссылки на софт, кто‑то собирал ссылки на источники в обзорах. Это подтвердило одну простую мысль: инструмент, созданный для себя, часто полезен другой аудитории. В интерфейсе я старался избегать лишней агрессии: никаких всплывающих окон с просьбой оценить, никаких автозапросов на отправку данных. Это помогло получить более тёплую реакцию от аудитории. Когда стал формировать страницу в магазине, я разместил примеры использования и рекомендации по типичным сценариям: подготовка к лекциям, быстрое создание библиографий по видео, сбор ресурсов при изучении новых технологий. И конкретно предложил посмотреть продукт в магазине как [о расширении «Как я сделал своё первое расширение для Chrome»](https://chromewebstore.google.com/detail/video-search-ai-%E2%80%94-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8/ekldmdppahpjgpepjcpnmgglhpomcfpg?authuser=0&hl=ru) , где описаны сценарии и скриншоты работы. За время работы я выучил несколько важных уроков, которыми хочется поделиться: - Всегда тестируйте на реальных страницах, а не на идеализированных примерах. Плейлисты, живые стримы, видео с нестандартными описаниями — всё это ломает парсер. - Разделяйте логику на модули: UI, парсинг, наблюдение за DOM. Так легче отлавливать ошибки и менять поведение. - Уважайте приватность: храните минимум данных и выполняйте обработку локально. Это снижает число вопросов и повышает доверие. - Не пытайтесь сразу угодить всем: фокус — ваше преимущество. Лучше хорошо решить одну задачу, чем плохо — десять. Постепенно расширение обрело характер и конфигурации, которые я не стал менять по первому требованию. Кому‑то было важно экспортировать список в текст, кто‑то просил интеграцию с заметками — эти идеи я записал в план, но запускал в порядке приоритета. Тем временем растущая база отзывов помогала уточнять поведение: где разместить кнопку, как отображать ссылки, какие форматы времени распознавать. В интерфейсе появились подсказки, маленькие чекбоксы для включения продвинутых опций и аккуратная иконка, которая не мешает просмотру. Если кратко, то путь от идеи до работающей кнопки под видео занял несколько месяцев, десятки исправлений и сотни тестов. Я опубликовал расширение в магазине как [с расширением «Как я сделал своё первое расширение для Chrome»](https://chromewebstore.google.com/detail/video-search-ai-%E2%80%94-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8/ekldmdppahpjgpepjcpnmgglhpomcfpg?authuser=0&hl=ru) можно ознакомиться на странице в каталоге — там же привёл рекомендации по использованию и ответы на частые вопросы. ![Как я сделал своё первое расширение для Chrome](https://lh3.googleusercontent.com/zf09CiXniiFctJQ-z6H-QbLyk5Krk1pN5HZSPBl6CJAK36VaHijCU-pWg3g4Am7lmmtGptrL3QofWcssRbdd2Y5TNA=s800-w800-h504) В завершение хочу подчеркнуть: этот проект вырос из личной боли — у меня было желание тратить меньше времени на рутину и больше — на содержание видео и обучение. Сейчас, когда я вижу, как люди используют инструмент в самых разных сценариях, понимаю, что простое решение может стать полезным для многих. Если вам тоже надоело копировать ссылки вручную и терять структуру уроков, посмотрите в магазине на вариант под названием [расширение «Как я сделал своё первое расширение для Chrome»](https://chromewebstore.google.com/detail/video-search-ai-%E2%80%94-%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B8/ekldmdppahpjgpepjcpnmgglhpomcfpg?authuser=0&hl=ru) — возможно, оно сэкономит вам часы рутины и вернёт фокус на главное. Полезные ссылки [🛒 Заказать магазин на Opencart](https://zakaz.prodelo.biz/) [💻 Хостинг для Opencart](https://beget.com/p933918/ru/hosting/virtual/) [🎨 Шаблоны для Opencart](https://prodelo.biz/shabloni-opencart/) [🧩 Модули для Opencart](https://prodelo.biz/moduli-opencart/) [🌐 Интернет без цензуры](https://t.me/VPNDendibot?start=partner_235364012) Наши соц. сети [Telegram канал ProDelo](https://t.me/prodelobiz) [Общий чат ProDelo](https://t.me/prodelochat) [Наш Youtube канал](https://www.youtube.com/@ProDeloTV) [Наш Яндекс Дзен канал](https://dzen.ru/prodelo_opencart) [Наша группа в ВК](https://vkvideo.ru/@prodelobiz) 00голоса Рейтинг статьи [https://vkontakte.ru/share.php?&url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F](https://vkontakte.ru/share.php?&url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F) [https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F&st.client_id=-1](https://connect.ok.ru/dk?cmd=WidgetSharePreview&st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F&st.client_id=-1) [https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F) [https://telegram.me/share/url?url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F&text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%20%D1%81%D0%B2%D0%BE%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B5%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B4%D0%BB%D1%8F%20Chrome%20%D0%B7%D0%B0%207%20%D1%88%D0%B0%D0%B3%D0%BE%D0%B2](https://telegram.me/share/url?url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F&text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%20%D1%81%D0%B2%D0%BE%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B5%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B4%D0%BB%D1%8F%20Chrome%20%D0%B7%D0%B0%207%20%D1%88%D0%B0%D0%B3%D0%BE%D0%B2) [https://api.whatsapp.com/send?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%20%D1%81%D0%B2%D0%BE%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B5%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B4%D0%BB%D1%8F%20Chrome%20%D0%B7%D0%B0%207%20%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%20https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F](https://api.whatsapp.com/send?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%20%D1%81%D0%B2%D0%BE%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B5%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B4%D0%BB%D1%8F%20Chrome%20%D0%B7%D0%B0%207%20%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%20https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F) [viber://forward?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%20%D1%81%D0%B2%D0%BE%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B5%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B4%D0%BB%D1%8F%20Chrome%20%D0%B7%D0%B0%207%20%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%20https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F](viber://forward?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9%20%D1%81%D0%B2%D0%BE%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B5%20%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B4%D0%BB%D1%8F%20Chrome%20%D0%B7%D0%B0%207%20%D1%88%D0%B0%D0%B3%D0%BE%D0%B2%20https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F) [https://web.skype.com/share?url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F](https://web.skype.com/share?url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F) [https://blog.prodelo.biz/sozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov/](https://blog.prodelo.biz/sozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov/) [keywords](https://blog.prodelo.biz/tag/keywords/) [Tweet on Twitter](https://twitter.com/intent/tweet?text=%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%B9+%D1%81%D0%B2%D0%BE%D0%B5+%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B5+%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B5+%D0%B4%D0%BB%D1%8F+Chrome+%D0%B7%D0%B0+7+%D1%88%D0%B0%D0%B3%D0%BE%D0%B2&url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F) [Share on Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F) [Google+](https://plus.google.com/share?url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F) [Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fblog.prodelo.biz%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov%2F&media=https%3A%2F%2Fblog.prodelo.biz%2Fwp-content%2Fuploads%2F2026%2F07%2Fsozday-svoe-pervoe-rasshirenie-dlya-chrome-za-7-shagov.png) ### Вам так же может понравиться [https://blog.prodelo.biz/pozhaluysta-ukazhite-temu-dlya-zagolovka/](https://blog.prodelo.biz/pozhaluysta-ukazhite-temu-dlya-zagolovka/) ## [https://blog.prodelo.biz/pozhaluysta-ukazhite-temu-dlya-zagolovka/](https://blog.prodelo.biz/pozhaluysta-ukazhite-temu-dlya-zagolovka/) [https://blog.prodelo.biz/uproshchaem-prodazhi-pyat-zadach-sellera-v-odnom-interfeyse/](https://blog.prodelo.biz/uproshchaem-prodazhi-pyat-zadach-sellera-v-odnom-interfeyse/) ## [Пять визуальных задач селлера, которые удобно закрыть в одном интерфейсе](https://blog.prodelo.biz/uproshchaem-prodazhi-pyat-zadach-sellera-v-odnom-interfeyse/) [https://blog.prodelo.biz/optimizaciya-kartochek-tovarov-dlya-mobilnogo-shagi-k-uspehu/](https://blog.prodelo.biz/optimizaciya-kartochek-tovarov-dlya-mobilnogo-shagi-k-uspehu/) ## [Как подготовить карточки товаров для мобильного просмотра](https://blog.prodelo.biz/optimizaciya-kartochek-tovarov-dlya-mobilnogo-shagi-k-uspehu/) [https://blog.prodelo.biz/mashtabirovanie-stiliya-edinyi-shablon-dlya-brenda/](https://blog.prodelo.biz/mashtabirovanie-stiliya-edinyi-shablon-dlya-brenda/) ## [Единый визуальный шаблон для бренда: как масштабировать стиль на весь каталог](https://blog.prodelo.biz/mashtabirovanie-stiliya-edinyi-shablon-dlya-brenda/) [https://blog.prodelo.biz/gotovim-visual-tovara-dlya-uspeshnoy-reklamy-na-marketplejse/](https://blog.prodelo.biz/gotovim-visual-tovara-dlya-uspeshnoy-reklamy-na-marketplejse/) ## [Как подготовить визуал товара к запуску рекламы на маркетплейсе](https://blog.prodelo.biz/gotovim-visual-tovara-dlya-uspeshnoy-reklamy-na-marketplejse/) [https://blog.prodelo.biz/kak-vygodno-predstavit-vizualno-podarochnye-nabory/](https://blog.prodelo.biz/kak-vygodno-predstavit-vizualno-podarochnye-nabory/) ## [Изображения для подарочных наборов: как показать состав и сценарий покупки](https://blog.prodelo.biz/kak-vygodno-predstavit-vizualno-podarochnye-nabory/) [https://blog.prodelo.biz/vernite-zhizn-starym-tovaram-s-novymi-kartochkami/](https://blog.prodelo.biz/vernite-zhizn-starym-tovaram-s-novymi-kartochkami/) ## [Как обновить старые карточки товаров и вернуть им современную подачу](https://blog.prodelo.biz/vernite-zhizn-starym-tovaram-s-novymi-kartochkami/) [https://blog.prodelo.biz/kak-podgotovit-foto-dlya-marketpleysa-bez-studiynoy-syomki/](https://blog.prodelo.biz/kak-podgotovit-foto-dlya-marketpleysa-bez-studiynoy-syomki/) ## [Подготовка фото для выхода на маркетплейс без студийной съёмки](https://blog.prodelo.biz/kak-podgotovit-foto-dlya-marketpleysa-bez-studiynoy-syomki/) [https://blog.prodelo.biz/author/maksilo/](https://blog.prodelo.biz/author/maksilo/) #### Об авторе: [Admin](https://blog.prodelo.biz/author/maksilo/) Подписаться 0 комментариев СтарыеНовыеПопулярные Межтекстовые Отзывы Посмотреть все комментарии