Guide de l'extension Chrome

Présentation de l'extension

L'extension Chrome de CloneWebsite est l'outil principal pour capturer les états des pages web. Contrairement aux robots d'exploration web traditionnels, elle s'exécute dans le contexte de votre navigateur, ce qui signifie qu'elle peut :

1. Contourner les restrictions CORS : Accéder et télécharger directement des ressources inter-origines (telles que des images et polices hébergées par des tiers).
2. Capturer le véritable état rendu : Obtenir le DOM et CSS finaux après les calculs dynamiques de JavaScript.
3. Accéder au contenu authentifié : Cloner des pages nécessitant une connexion (comme des tableaux de bord, des systèmes d'administration).

Interface et fonctionnalités

Cliquez sur l'icône de l'extension en haut à droite du navigateur pour ouvrir le panneau de contrôle principal.

La barre d'outils flottante a deux cibles de sortie : Site web conserve le flux HTML/ZIP existant, tandis que Figma crée une archive locale .cdesign pour le plugin Figma de CloneWebsite. Voir Exporter des pages web vers Figma pour le flux de travail complet et le modèle d'autorisations.

Paramètres de clonage

Avant de lancer un clonage, vous pouvez configurer les options suivantes :

• Mode de clonage profond : Tente de capturer le contenu des iframes et des ressources dynamiques plus profondes (peut augmenter le temps de traitement).
• Traitement des images :
  • Extraire en tant que fichiers (Recommandé) : Extrait toutes les images sous forme de fichiers .png/.jpg indépendants enregistrés dans le dossier assets.
  • Conserver Base64 : Conserve les images en tant que données en ligne dans le HTML (entraînera une taille de fichier HTML énorme).
• Filtrage de confidentialité :
  • Supprimer les scripts de suivi : Supprime automatiquement les codes de suivi connus comme Google Analytics, Facebook Pixel, etc.
  • Supprimer tout JS : Génère une copie de la page complètement statique et non interactive (la plus sûre).
• Correction automatique des liens externes : Convertit les chemins absolus en chemins relatifs pour garantir une expérience de navigation hors ligne fluide.

Processus de clonage détaillé

1. Phase de préparation

1. Faites défiler la page pour vous assurer que toutes les images et contenus à chargement différé sont entièrement chargés.
2. Déroulez les menus déroulants, composants d'accordéon ou modales que vous souhaitez capturer.
3. Attendez que tous les écrans de chargement (skeleton screens) soient remplacés par le contenu réel.

2. Phase d'exécution

Après avoir cliqué sur Démarrer le clonage, l'extension effectue les étapes suivantes :

1. Geler le DOM : Met en pause toutes les animations CSS et les mutations DOM déclenchées par des minuteurs pour empêcher la page de changer pendant la capture.
2. Extraire les ressources : Parcourt l'arbre DOM pour trouver toutes les images, polices et feuilles de style externes référencées.
3. Calculer les styles : Obtient les styles calculés finaux pour tous les éléments afin d'assurer la cohérence visuelle entre environnements.
4. Nettoyer les redondances : Supprime les éléments invisibles, les espaces réservés vides et les balises de script inutiles connues.
5. Empaqueter et télécharger : Utilise JSZip pour construire la structure de fichiers en mémoire et déclenche l'action de téléchargement du navigateur.

3. Gestion des grandes pages

Si vous rencontrez des problèmes lors du clonage de pages très grandes ou complexes (comme des listes longues ou des tableaux de bord à défilement infini) :

• Essayez de cloner par blocs : ne déroulez que les parties qui vous intéressent le plus.
• Fermez les autres onglets non liés pour libérer la mémoire du navigateur.
• Si le navigateur affiche « La page ne répond pas », choisissez « Attendre » ; le processus de sérialisation complexe peut prendre un certain temps.

Raccourcis et actions courantes

• Alt + Maj + C (Mac : Option + Maj + C) : Clone en un clic la page actuelle avec les paramètres par défaut.
• Menu contextuel : Cliquez avec le bouton droit sur une zone vide de la page et sélectionnez CloneWebsite -> Clone this page.

Erreurs courantes et solutions

Q : Pourquoi la mise en page de la page téléchargée est-elle brouillée ?
R : Cela est généralement dû au fait que la page utilise des variables CSS complexes ou repose sur une logique JavaScript spécifique pour calculer dynamiquement les dimensions. Essayez d'activer l'option « Forcer les styles critiques en ligne » dans les paramètres.

Q : Pourquoi les icônes ne s'affichent-elles pas ?
R : Certaines icônes de police (comme FontAwesome) peuvent avoir une protection contre le hotlinking. L'extension tente de les récupérer, mais si le serveur refuse, les icônes s'afficheront sous forme de carrés. Nous optimisons continuellement la stratégie inter-origines pour les polices.

Q : Rien ne se passe quand je clique sur cloner ?
R : Ouvrez les Outils de développement Chrome (F12) et passez au panneau Console pour vérifier les erreurs. Certaines politiques de sécurité du contenu (CSP) extrêmement strictes peuvent bloquer l'exécution des scripts de l'extension.