Best Practices for Perfect Clones

Why are some webpages hard to clone?

Modern web applications (SPAs) rely heavily on JavaScript to render content. This means when the page initially loads, the HTML is often empty, and content is fetched dynamically. Furthermore, many webpages use anti-crawler mechanisms, complex CSS variable systems, and Shadow DOM.

To get 100% pixel-perfect clone results, please follow these best practices.

Preparation Before Cloning

1. Ensure Content is Fully Loaded

Lazy Loading is the biggest culprit for incomplete clones. Many images, long lists, and bottom content only load when you scroll to their position.

Correct Approach:

• Slowly scroll from the top to the bottom of the page to ensure all image placeholders are replaced with real images.
• Click "Load More" buttons and expand all the content you want to capture.
• Wait for all font files to finish loading (to avoid text displaying in default fonts).

2. Trigger Specific UI States

If you want to capture a specific interactive state:

• Expand Dropdowns
• Open Modals / Dialogs
• Switch to specific Tabs
• Trigger Hover states (you can force the :hover state of an element via Chrome DevTools)

While these states are active, click the "Start Clone" button on the extension.

3. Handling Multimedia Content

• Video: By default, the extension tries to keep the <video> tag and its src attribute, but will not download huge video files. Ensure the video has a poster (cover image) attribute so it displays a placeholder when offline.
• Canvas / WebGL: Elements rendered dynamically like this cannot be captured by traditional DOM serialization. The extension will automatically try to convert Canvas into static Base64 images, but complex WebGL scenes may not be perfectly restored.
• Iframe: Cross-origin Iframes (e.g., embedded YouTube videos, third-party comment systems) cannot be deeply cloned for security reasons. They will retain their original src links.

Advanced Configuration Tips

In the extension settings panel, there are several key options that affect clone quality:

Remove Scripts vs. Keep Scripts

• Select "Remove All JS" (Recommended for display only): This generates a completely static page. The advantage is small file size, absolute security, and no popup ads or tracking codes will execute. The downside is that interactive features like carousels and accordions will not work.
• Select "Keep Core Interactions" (Beta Feature): The extension will try to filter out analytics scripts (like GA) while keeping scripts that control the UI. Note: Complex SPA pages might show a blank screen if JS is kept and opened locally because they cannot find backend APIs.

Resource Path Conversion

Ensure the "Convert Absolute Paths to Relative Paths" option is enabled. This allows the generated ZIP package to be opened directly on your local hard drive (via the file:// protocol) without losing styles due to path issues.

Handling Extreme Cases

Pages Containing Shadow DOM

Some modern component libraries use Shadow DOM, making their internal structure invisible by default. Solution: The CloneWebsite core engine includes an experimental shadow-dom-flattener that attempts to traverse all shadow roots and extract their content and styles into the main DOM tree. If you find missing components, please enable "Force Flatten Shadow DOM" in the settings.

Blocked by CSP (Content Security Policy)

On some extremely strict websites (like banks, large corporate intranets), you might see the following error in the Console: Refused to execute inline script because it violates the following Content Security Policy directive...

Solution: Currently, this is a hard security limit of the browser. You can try searching for "Disable CSP" auxiliary plugins in the Chrome store to temporarily turn off the target website's CSP during cloning.

Summary Checklist

1. Scrolled to the bottom of the page? ✅
2. Modals and menus expanded? ✅
3. Extension settings match your needs? ✅
4. Click clone and wait for completion! 🚀