Media
5 items
Description
Clone webpages pixel-perfect. Extract HTML, CSS, images, fonts & JS to ZIP. Convert clones to React/Vue with Magic Paste. CloneWebsite is a powerful Chrome extension that lets you clone any webpage with 100% pixel-perfect accuracy. Whether you're a developer studying UI patterns, a designer capturing inspiration, or a team building a component library, CloneWebsite gives you a complete, self-contained snapshot of any page in seconds — exportable as a ZIP or as editable Figma layers. ★ Key Features • Pixel-Perfect Cloning — Captures the full computed styles, DOM structure, and visual layout of any page exactly as it appears in the browser. • Resource Extraction — Automatically downloads and bundles images, fonts, CSS, and JavaScript files into a single ZIP archive. • Smart Script Filtering — Removes tracking, analytics, and other non-essential scripts so your clone stays clean and lightweight. • Local Project Library — Save cloned pages to IndexedDB for offline access. No account or cloud sync required. • Workbench — Preview, edit, and re-export saved projects without leaving the extension. • Magic Paste — Convert cloned HTML into ready-to-use React or Vue component code with a single click. • BYOK AI — Bring your own OpenAI-compatible API key to stream AI-assisted code modifications directly in the Workbench. • ZIP Download — Every clone is packaged as a standalone ZIP with a clean folder structure, ready to open locally. • Export to Figma — Send any capture to Figma as editable layers and frames via a local .cdesign archive. The free CloneWebsite Figma plugin imports it fully offline — no cloud upload. ★ How It Works 1. Click the extension icon on any page you want to clone. 2. Choose "Clone Page" for the full page or "Clone Component" to select a specific element. 3. CloneWebsite freezes the DOM, extracts all resources, and builds a self-contained HTML file. 4. Download the ZIP, save to your local project library, or open the Workbench to preview and edit. 5. Use Magic Paste to generate React/Vue component code from the cloned HTML. 6. Or toggle the Figma output target to export an editable .cdesign archive for the CloneWebsite Figma plugin. ★ Privacy First All cloning and processing happens locally in your browser. CloneWebsite does not collect, store, or transmit your personal data. AI features are optional and only connect to endpoints you explicitly configure. ★ Who Is It For? • Frontend developers studying real-world CSS layouts and component patterns • UI/UX designers capturing design references and visual inspiration • Teams building internal component libraries from existing pages • Educators and learners exploring how websites are built ★ Technical Details • Built with Plasmo (MV3), React, and TypeScript • Uses Chrome scripting + storage APIs • Enhanced Figma capture additionally uses the Chrome `debugger` API. This is a required install-time permission (Chrome does not allow it to be optional). It is attached only while you explicitly run an Enhanced Figma capture and detached the moment capture ends, and is used solely to read the rendered page (emulated viewport/theme, component pseudo-states, local screenshots). It never intercepts network traffic, cookies, storage, or auth tokens, and no captured data leaves your browser. • No background data collection • Optional AI integration via user-provided OpenAI-compatible endpoints