Aura Downloader v1.0 - Chrome Extension
A powerful Chrome Extension I built to extract and download a webpage’s HTML, CSS, and JS with precision—featuring shadow DOM support, custom save locations, and a sleek dual-theme UI!
![[Project Name] Showcase](img/Aura-detail01.png)
Project Overview
Hey, I whipped up Aura Downloader v1.0 after a late-night coding spree, and it’s a game-changer for frontend devs! This Chrome Extension lets you grab a webpage’s full HTML (including shadow DOM), all CSS (inline and external), and JavaScript (inline and external) with a single click. It’s designed to tackle those tricky sites where Inspect fails, delivering accurate code straight to your machine. The UI is clean and modern, with light and dark themes for a pro feel, making it a must-have tool for analyzing or replicating web designs.
- Core Extraction Engine: Leverages chrome.scripting.executeScript to inject content.js, parsing the DOM with XMLSerializer for full HTML (including doctype and shadow roots) and querying link, style, and script tags for CSS and JS resources.
- Flexible Download System: Default mode uses chrome.downloads.download with data URLs (e.g., data:text/html;charset=utf-8,...) for instant saves to Downloads, supporting conflictAction: 'uniquify' to avoid overwrites. Custom location mode employs the Native File System API via an offscreen document (offscreen.html), created with chrome.offscreen.createDocument, allowing directory picker integration.
- State Management: Utilizes chrome.storage.session to persist directory handles and names, ensuring seamless multi-session use with chrome.runtime.sendMessage for inter-component communication.
- User Feedback: Implements chrome.notifications.create for real-time status updates (e.g., “Download Complete”) and a dynamic status area in the popup, driven by message passing.
- UI & Accessibility: Built with popup.js to handle theme toggling via matchMedia and custom checkbox logic, styled with CSS variables (--brand-color, --bg-dark) for a responsive, dual-theme experience (light: white background/black text; dark: black background/white text).