Chrome Extension Guide

Extension Overview

The CloneWebsite Chrome Extension is the core tool for capturing webpage states. Unlike traditional web crawlers, it runs within the context of your browser, which means it can:

1. Bypass CORS Restrictions: Directly access and download cross-origin resources (such as third-party hosted images and fonts).
2. Capture True Rendered State: Obtain the final DOM and CSS after JavaScript dynamic calculations.
3. Access Authenticated Content: Clone pages that require login (such as dashboards, admin systems).

Interface and Features

Click the extension icon in the top right corner of your browser to open the main control panel.

The floating toolbar has two output targets: Website keeps the existing HTML/ZIP workflow, while Figma creates a local .cdesign archive for the CloneWebsite Figma plugin. See Export webpages to Figma for the full workflow and permission model.

Clone Settings

Before starting a clone, you can configure the following options:

• Deep Clone Mode: Attempts to capture iframe content and deeper dynamic resources (may increase processing time).
• Image Processing:
  • Extract as Files (Recommended): Extracts all images as independent .png/.jpg files saved in the assets folder.
  • Keep Base64: Retains images as inline data within the HTML (will result in a huge HTML file size).
• Privacy Filtering:
  • Remove Tracking Scripts: Automatically removes known tracking codes like Google Analytics, Facebook Pixel, etc.
  • Remove All JS: Generates a completely static, non-interactive copy of the page (safest).
• Auto-fix External Links: Converts absolute paths to relative paths to ensure a smooth offline browsing experience.

Detailed Cloning Process

1. Preparation Phase

1. Scroll through the page to ensure all lazy-loaded images and content are fully loaded.
2. Expand any dropdown menus, accordion components, or modals you want to capture.
3. Wait for all skeleton screens to be replaced with real content.

2. Execution Phase

After clicking Start Clone, the extension performs the following steps:

1. Freeze DOM: Pauses all CSS animations and DOM mutations triggered by timers to prevent the page from changing during capture.
2. Extract Resources: Traverses the DOM tree to find all referenced images, fonts, and external stylesheets.
3. Calculate Styles: Obtains the final computed styles for all elements to ensure visual consistency across environments.
4. Clean Redundancy: Removes invisible elements, empty placeholders, and known useless script tags.
5. Package and Download: Uses JSZip to build the file structure in memory and triggers the browser's download action.

3. Handling Large Pages

If you encounter issues when cloning very large or complex pages (like long lists or infinite scrolling dashboards):

• Try cloning in chunks: Only expand the parts you care about most.
• Close other unrelated tabs to free up browser memory.
• If the browser prompts "Page unresponsive", select "Wait"; the complex serialization process may take some time.

Shortcuts and Common Actions

• Alt + Shift + C (Mac: Option + Shift + C): One-click clone the current page using default settings.
• Context Menu: Right-click on an empty area of the page and select CloneWebsite -> Clone this page.

Common Errors and Solutions

Q: Why is the layout of the downloaded page messed up?
A: This is usually because the page uses complex CSS variables or relies on specific JavaScript logic to dynamically calculate dimensions. Try enabling the "Force Inline Critical Styles" option in the settings.

Q: Why are icons not displaying?
A: Some font icons (like FontAwesome) may have hotlinking protection. The extension tries to fetch them, but if the server forcibly refuses, the icons will display as squares. We are continuously optimizing the cross-origin strategy for fonts.

Q: Nothing happens when I click clone?
A: Please open Chrome Developer Tools (F12) and switch to the Console panel to check for errors. Some extremely strict Content Security Policies (CSP) may block the execution of extension scripts.