Руководство по расширению Chrome

Обзор расширения

Расширение CloneWebsite Chrome — это основной инструмент для захвата состояний веб-страниц. В отличие от традиционных веб-краулеров, оно работает в контексте вашего браузера, что означает возможность:

1. Обходить ограничения CORS: Напрямую обращаться и скачивать кросс-доменные ресурсы (например, изображения и шрифты, размещенные у третьих лиц).
2. Захватывать истинное отображаемое состояние: Получать финальные DOM и CSS после динамических вычислений JavaScript.
3. Получать доступ к авторизованному контенту: Клонировать страницы, требующие входа (например, панели управления, системы администрирования).

Интерфейс и функции

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

Плавающая панель инструментов имеет две цели вывода: Веб-сайт сохраняет существующий рабочий процесс HTML/ZIP, тогда как Figma создает локальный архив .cdesign для плагина Figma CloneWebsite. Полный рабочий процесс и модель разрешений см. в разделе Экспорт веб-страниц в Figma.

Настройки клонирования

Перед началом клонирования можно настроить следующие параметры:

• Режим глубокого клонирования: Пытается захватить содержимое iframe и более глубокие динамические ресурсы (может увеличить время обработки).
• Обработка изображений:
  • Извлечь как файлы (рекомендуется): Извлекает все изображения как независимые .png/.jpg файлы, сохраненные в папке assets.
  • Сохранить Base64: Сохраняет изображения как встроенные данные в HTML (приведет к огромному размеру HTML-файла).
• Фильтр конфиденциальности:
  • Удалить скрипты отслеживания: Автоматически удаляет известные коды отслеживания, такие как Google Analytics, Facebook Pixel и т. д.
  • Удалить весь JS: Создает полностью статичную, неинтерактивную копию страницы (самая безопасная).
• Автоисправление внешних ссылок: Преобразует абсолютные пути в относительные для обеспечения плавного офлайн-просмотра.

Подробный процесс клонирования

1. Этап подготовки

1. Прокрутите страницу, чтобы убедиться, что все отложенно загруженные изображения и контент полностью загружены.
2. Разверните любые выпадающие меню, аккордеоны или модальные окна, которые вы хотите захватить.
3. Дождитесь, пока все скелетные экраны не будут заменены реальным контентом.

2. Этап выполнения

После нажатия Начать клонирование расширение выполняет следующие шаги:

1. Заморозить DOM: Приостанавливает все CSS-анимации и мутации DOM, запускаемые таймерами, чтобы предотвратить изменение страницы во время захвата.
2. Извлечь ресурсы: Обходит DOM-дерево, чтобы найти все указанные изображения, шрифты и внешние таблицы стилей.
3. Вычислить стили: Получает финальные вычисленные стили для всех элементов, чтобы обеспечить визуальную согласованность между средами.
4. Очистить избыточность: Удаляет невидимые элементы, пустые заполнители и известные бесполезные теги скриптов.
5. Упаковать и скачать: Использует JSZip для построения файловой структуры в памяти и инициирует действие скачивания браузера.

3. Обработка больших страниц

Если вы сталкиваетесь с проблемами при клонировании очень больших или сложных страниц (например, длинные списки или панели с бесконечной прокруткой):

• Попробуйте клонировать по частям: разворачивайте только те части, которые вас больше всего интересуют.
• Закройте другие нерелевантные вкладки, чтобы освободить память браузера.
• Если браузер показывает «Страница не отвечает», выберите «Ждать»; сложный процесс сериализации может занять некоторое время.

Горячие клавиши и распространенные действия

• Alt + Shift + C (Mac: Option + Shift + C): Однократный клон текущей страницы с настройками по умолчанию.
• Контекстное меню: Щелкните правой кнопкой мыши по пустой области страницы и выберите CloneWebsite -> Clone this page.

Частые ошибки и решения

В: Почему макет загруженной страницы искажен?
О: Обычно это происходит потому, что страница использует сложные переменные CSS или полагается на определенную логику JavaScript для динамического вычисления размеров. Попробуйте включить опцию «Принудительно инлайнить критические стили» в настройках.

В: Почему значки не отображаются?
О: Некоторые значки шрифтов (например, FontAwesome) могут иметь защиту от хотлинкинга. Расширение пытается их получить, но если сервер отказывает, значки отображаются как квадраты. Мы постоянно оптимизируем кросс-доменную стратегию для шрифтов.

В: При нажатии «клонировать» ничего не происходит?
О: Откройте Инструменты разработчика Chrome (F12) и переключитесь на панель Консоль для проверки ошибок. Некоторые крайне строгие политики безопасности контента (CSP) могут блокировать выполнение скриптов расширения.