Release v3.0: Settings, Dark Mode, and Export Functionality

Major Features:
- ⚙️ Settings page with full customization options
- 🌙 Dark mode with smooth theme transitions
- 📤 Export results (JSON, CSV, Markdown)
- 🔒 Data sharing opt-in UI (backend ready for v3.1)

Settings Page (options.html):
- Dark mode toggle
- Configurable history limit (5 to unlimited)
- Desktop notifications toggle
- Anonymous data sharing opt-in
- Export/import settings
- Reset to defaults

Dark Mode:
- CSS variable-based theming
- Syncs across popup and settings
- Smooth transitions
- Persists user preference

Export Functionality:
- JSON format for developers
- CSV format for spreadsheets
- Markdown format for documentation
- Includes all analysis data

UI Improvements:
- Settings gear icon in popup header
- Export buttons after analysis
- Better theme compatibility
- Improved visual hierarchy

Technical Changes:
- Added options_page to manifest.json
- Created options.html and options.js
- Rewrote popup.js with new features
- Updated popup.html with new layout
- Uses chrome.storage.sync for settings
- Fixed message passing error handling
- Version bumped to 3.0

Version Updates:
- manifest.json: 3.0
- popup.html footer: v3.0
- README.md: v3.0 with new features listed
- CHANGELOG.md: Comprehensive v3.0 entry

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: dzienisz

CHANGELOG.md

@@ -5,6 +5,50 @@ All notable changes to the CSR vs SSR Detector extension will be documented in t
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0] - 2025-10-20
+
+### Added
+- **⚙️ Settings Page**: Full-featured options page (`options.html`)
+  - Dark mode toggle with smooth theme transitions
+  - Configurable history limit (5, 10, 25, 50, 100, or unlimited)
+  - Desktop notifications toggle
+  - Anonymous data sharing opt-in (UI ready for v3.1 backend)
+  - Export settings as JSON
+  - Reset to defaults functionality
+- **🌙 Dark Mode**: Beautiful dark theme throughout the extension
+  - CSS variable-based theming system
+  - Syncs between popup and settings page
+  - Smooth transitions and animations
+  - Persists user preference across sessions
+- **📤 Export Functionality**: Download analysis results in multiple formats
+  - **JSON export**: Structured data for developers
+  - **CSV export**: Spreadsheet-friendly format
+  - **Markdown export**: Documentation-ready reports
+  - Includes URL, timestamp, all metrics, and indicators
+- **🔒 Data Sharing Opt-in**: Privacy-first anonymous data collection (v3.1)
+  - Clear explanation of what data is shared
+  - Fully GDPR-compliant UI
+  - Currently logs to console (backend coming in v3.1)
+- **🎨 UI Improvements**:
+  - Settings gear icon in popup header
+  - Export buttons appear after analysis
+  - Better visual hierarchy
+  - Improved dark mode compatibility
+
+### Changed
+- Updated popup UI with settings access
+- History limit now respects user preference from settings
+- All UI elements support both light and dark themes
+- Improved loading state animations with theme awareness
+
+### Technical
+- Added `options_page` to manifest.json
+- Created `options.html` and `options.js` for settings management
+- Completely rewrote `popup.js` with dark mode, export, and settings integration
+- Updated `popup.html` with new header layout and export buttons
+- Uses `chrome.storage.sync` for settings persistence
+- Bumped version to 3.0 in manifest.json
+
 ## [2.3] - 2025-10-20
 
 ### Changed

README.md

@@ -2,7 +2,7 @@
 
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/v/fhiopdjeekafnhmfbcfoolhejdgjpkgg)](https://chromewebstore.google.com/detail/csr-vs-ssr-detector/fhiopdjeekafnhmfbcfoolhejdgjpkgg)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Version](https://img.shields.io/badge/version-2.3-blue.svg)](https://github.com/dzienisz/chrome-ssr-csr/releases)
+[![Version](https://img.shields.io/badge/version-3.0-blue.svg)](https://github.com/dzienisz/chrome-ssr-csr/releases)
 
 The **CSR vs SSR Detector** is a Chrome extension that helps developers and SEO specialists identify whether a webpage is rendered using Client-Side Rendering (CSR), Server-Side Rendering (SSR), or a hybrid approach. Understanding this distinction is essential for making informed decisions about SEO, page performance, and overall application architecture.
 
@@ -18,8 +18,14 @@ The **CSR vs SSR Detector** is a Chrome extension that helps developers and SEO
   - Rendering type classification (5 categories)
   - Performance metrics (DOM ready time, First Contentful Paint)
   - Key detection indicators
-- **📜 History Tracking**: Stores your last 10 analyses locally
-- **🔒 Privacy-First**: All analysis happens locally, no data sent to external servers
+- **🌙 Dark Mode**: Beautiful dark theme with smooth transitions
+- **📤 Export Results**: Download analysis as JSON, CSV, or Markdown
+- **⚙️ Customizable Settings**:
+  - Configurable history limit (5 to unlimited)
+  - Desktop notifications toggle
+  - Export/import your settings
+- **📜 Smart History**: Stores analyses with customizable limits
+- **🔒 Privacy-First**: All analysis happens locally, optional anonymous data sharing (v3.1+)
 - **⚡ Instant Results**: One-click analysis with clear visual feedback
 
 ## 🎨 What's the Difference?

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "CSR vs SSR Detector",
-  "version": "2.3",
+  "version": "3.0",
   "description": "Detect if a webpage is using Client-Side Rendering or Server-Side Rendering",
   "permissions": ["activeTab", "scripting", "storage", "notifications"],
   "action": {
@@ -12,6 +12,7 @@
       "128": "icon128.png"
     }
   },
+  "options_page": "options.html",
   "background": {
     "service_worker": "background.js"
   },