🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Проект от подписчика!
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Всем привет! Меня зовут Роман, я фуллстек-разработчик, 5+ лет в вебе — фриланс и работа в команде, в основном фронтенд. Давно читаю «Будни разработчика», так что вдвойне приятно оказаться здесь уже со своим материалом. Хочу рассказать про инструмент, который сделал под собственную боль и которым теперь пользуюсь сам каждый день.
Когда верстаешь адаптив, постоянно скачешь между десктопом и мобильной версией: то DevTools в режиме устройства, то ресайз окна, то открыть на телефоне. Десктоп и мобайл при этом никогда не видны вместе — один прячется, когда смотришь на другой. А показывать заказчику «узкое окно браузера» по видеосвязи — так себе демонстрация.
Готовые симуляторы есть (Mobile First, U-eyes и другие — со своей задачей справляются). Но почти все открывают превью в отдельном окне или своей области. Мне же нужно было другое: рамка телефона прямо поверх десктопной страницы, на той же вкладке, одновременно с ней. Не нашёл такого — сделал сам.
🟣 Как устроено (коротко по технике)
Страница внутри себя. Очевидный путь — iframe с тем же URL, сужённый до ширины телефона. Но большинство сайтов отдают X-Frame-Options и CSP: frame-ancestors, и iframe просто не грузится. Через declarativeNetRequest (MV3) динамически срезаю X-Frame-Options, вырезаю только директиву frame-ancestors из CSP (остальной CSP не трогаю) и подменяю User-Agent на мобильный. Правило живёт только пока открыто превью, привязано к конкретной вкладке, ничего не блокируется и не отправляется — меняются лишь заголовки ответа.
Изоляция стилей. Весь UI оверлея (рамка, панель, кнопки) — в Shadow DOM, чтобы CSS сайта и расширения не ломали друг друга.
Синхронизация. Скролл, клики и ввод проксируются между десктопом и превью — заполняешь форму на десктопе, видишь, как она заполняется в телефоне. Самое муторное — маппинг элементов и защита от бесконечных циклов событий.
🟣 Скриншоты снимаются и обрезаются локально, сохраняются файлом — ничего никуда не грузится.
🟣 Запись экрана. Честно про текущее состояние: в опубликованной версии работает штатным путём — через диалог захвата экрана браузера, видео кодируется локально (WebM и MP4, MP4 пока тестово). Параллельно допиливаю бесшовный вариант без промпта на расшаривание (chrome.tabCapture + getUserMedia в offscreen, перекодирование через WebCodecs + mp4/webm-muxer) — но это пока в разработке.
🟣 Приватность как ограничение архитектуры. Нет бэкенда, аналитики и удалённого кода. Настройки — в chrome.storage.local, не покидают устройство. Разрешения в манифесте — ровно под задачу.
Итог: Mobile View — десктоп и мобайл одновременно на вкладке, синхронизация, скриншоты, запись. Бесплатно, лежит в Chrome Web Store.
Буду рад любому фидбэку. И если найдёте баги на своей ОС/версии браузера — напишите подробно, по возможности со скрином или записью: веду проект в одиночку, так баги фиксятся куда быстрее.
Chrome Web Store: Ссылка скрыта
Сайт: Ссылка скрыта
Статья на Хабре: Ссылка скрыта