Sitemap URL Extractor Technical Specification

Overview

A high-performance, single-file browser utility designed for SEO professionals to extract all URLs from an XML sitemap. The application performs all parsing client-side, ensuring user privacy and data security.

Core Features

• XML Parsing Engine: Uses the browser's native DOMParser to accurately identify and isolate all <loc> nodes within XML sitemap files.
• Real-time Processing: Fetches the sitemap URL via the Fetch API with immediate feedback on progress.
• Error Handling: Graceful error UI for invalid URLs, network timeouts, or non-XML responses (using custom alert-style UI components, no native alert()).
• One-Click Export: Native implementation of Blob-based downloads for generating .txt files containing the list of URLs.
• Clipboard Interaction: A "Copy All" button that interacts with the Clipboard API to allow immediate pasting into Excel, Google Sheets, or SEO auditing tools.
• Result Statistics: Displays the total count of extracted links instantly upon parsing.

UI Layout

• Header: Minimalist top navigation with a clear, descriptive title.
• Tool Body:
  • A prominent URL input field with a "Fetch and Extract" button.
  • A result section that includes a status indicator (loading spinner), URL count, and action buttons (Copy/Download).
  • A read-only textarea displaying the raw list of URLs, allowing users to verify data before exporting.
• Aesthetic: A clean, professional "SaaS" interface. Use of high-contrast typography, rounded-corner input fields, and drop-shadows on card elements. Strict light-mode only.

Technical Implementation Constraints

• Single-File Architecture: All CSS, HTML, and Vanilla JavaScript must be contained in a single index.html file.
• No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. The application state must be stored in volatile variables.
• No Third-Party Backend: All processing must occur within the browser. Use no-cors or proxy considerations (though CORS may apply if the target server restricts it; handle gracefully with error messages).
• Responsive Design: The layout must use Flexbox/Grid to stack elements on mobile and expand into a multi-column view on desktop devices.
• Dependencies: Use CDN-hosted Tailwind CSS for styling and FontAwesome for iconography.

Color Palette

• Primary: Indigo (#4F46E5) for main action buttons.
• Background: Off-white (#F9FAFB).
• Surface: White (#FFFFFF) for content cards.
• Text: Slate (#1F2937) for headers, Gray (#6B7280) for body text.
• Border: Gray (#E5E7EB).
• Success/Action: Emerald (#10B981) for copy confirmation and export actions.

Animations & Transitions

• Use transition-all and duration-300 on buttons for hover effects.
• Smooth fade-in animation when the results section appears after successful parsing.
• Micro-interaction for the "Copy" button (changing text/color temporarily on click).