Comprehensive Extension Architecture Update

- Update ARCHITECTURE.md with detailed feature descriptions
- Add theme system, popup interface, and configuration details
- Enhance documentation for storage, performance, and user experience
- Include sections on development, testing, and maintenance
- Remove Materialize CSS and jQuery dependencies
- Streamline project structure and resources

Author: nalbam

ARCHITECTURE.md

@@ -16,53 +16,116 @@ AWS Colorful Navbar is a browser extension that enhances the AWS Console navigat
   - Region flag display next to region selector
   - Account information display
   - Service-specific favicon updates
+- Implements retry mechanism for region selector
+- Supports dark/light theme adaptation
 
-### 3. Configuration
+### 3. Popup Interface (popup.html, popup.js, popup.css)
+- Settings management interface
+- Features:
+  - Toggle switches with auto-save functionality
+  - Account information JSON editor
+  - Dark/Light theme switcher
+  - Real-time theme preview
+- Uses Font Awesome icons
+- Responsive and accessible design
+
+### 4. Configuration
 - Stored in chrome.storage.local
+- Theme preference in localStorage
 - Configurable features:
   - Background color gradients
   - Region flags
   - Account information
   - Favicon customization
+  - Theme preference
 
-### 4. Resources
+### 5. Resources
 - Flags: Country/region specific flag images
 - Service Icons: AWS service specific SVG icons
-- Styles: Materialize CSS for popup styling
+- Styles: Custom CSS with theme support
 
 ## Features
 
 ### Region Visualization
 - Each AWS region has a unique color gradient
 - Region flags are displayed next to the region selector
 - Supports all AWS regions with specific color schemes
+- Automatic region detection and display
 
 ### Account Management
 - Displays custom account information
 - Account ID detection and mapping
+- JSON-based configuration
+- Real-time validation
 
 ### Service Integration
 - Dynamic favicon updates based on current AWS service
 - Support for all major AWS services
 - Special handling for composite services (e.g., CodeSuite)
+- Automatic service detection
+
+### Theme System
+- Dark/Light mode support
+- Theme persistence across sessions
+- Smooth transition animations
+- AWS-inspired color palette
+- Accessible color contrasts
 
 ### Internationalization
 - Support for multiple languages (ko, jp)
 - Region name translations
+- Global region handling
 
 ## Technical Details
 
 ### Storage
-- Uses chrome.storage.local for configuration persistence
+- Uses chrome.storage.local for extension settings
+- Uses localStorage for theme preference
 - Minimal storage footprint
+- Automatic data validation
+
+### Performance
+- Asynchronous storage operations
+- Efficient resource loading
+- Retry mechanism for region detection
+- Optimized DOM operations
 
 ### Security
 - Minimal permissions required:
   - activeTab: For current tab manipulation
   - storage: For configuration storage
 - Host permissions limited to AWS Console domains
+- Input validation for JSON data
 
-### Performance
-- Lightweight implementation
-- Asynchronous storage operations
-- Efficient resource loading
+### User Experience
+- Instant settings application
+- Auto-save functionality
+- Visual feedback for actions
+- Smooth transitions
+- Responsive interface
+
+### Error Handling
+- JSON validation for account info
+- Region selector retry mechanism
+- Graceful fallbacks
+- Clear error messages
+
+## Development
+
+### Build Process
+- Source code organization
+- Resource management
+- Version control
+- Release packaging
+
+### Testing
+- Manual testing procedures
+- Cross-browser compatibility
+- Theme testing
+- Region detection verification
+
+### Maintenance
+- Code documentation
+- Version history
+- Issue tracking
+- Update procedures

CHANGELOG.md

@@ -2,39 +2,57 @@
 
 All notable changes to this project will be documented in this file.
 
-## [1.7.3] - 2025-03-07
+## [1.7.3] - 2025-03-08
 
 ### Added
-- Support for new AWS regions and services
-- Service-specific favicon updates
-- Account information display feature
+- Dark/Light theme support with persistent settings
+- Auto-save functionality for toggle switches
+- Retry mechanism for region selector (3 attempts)
+- Support for new AWS regions:
+  - ap-south-2 (Hyderabad)
+  - ap-southeast-4 (Melbourne)
+  - eu-south-3 (Milan)
+  - eu-central-3 (Zurich)
+  - me-west-1 (UAE West)
+  - il-central-1 (Israel)
 
 ### Changed
-- Updated to Manifest V3 specification
-- Improved region detection and visualization
-- Enhanced internationalization support
+- Updated popup interface with modern design
+- Improved settings management
+- Enhanced accessibility features
+- Optimized performance with async operations
 
 ### Fixed
-- Region name translation issues
+- Region selector detection reliability
 - Account ID detection improvements
 - Resource loading optimizations
+- JSON validation handling
 
 ## Features Evolution
 
 ### Region Visualization
 - Custom color gradients for each AWS region
 - Region flags display
 - Support for all AWS global regions
+- Automatic region detection
 
 ### Account Management
 - Account information display
 - Account ID detection and mapping
 - Custom account labels
+- JSON configuration
 
 ### Service Integration
 - Dynamic favicon updates
 - Support for AWS service icons
 - Special handling for composite services
+- Automatic service detection
+
+### Theme System
+- Dark/Light mode toggle
+- Theme persistence
+- Smooth transitions
+- AWS-inspired colors
 
 ### Internationalization
 - Multi-language support (ko, jp)

README.md

@@ -11,6 +11,8 @@
 * Region flag display next to region selector
 * Service-specific favicon updates
 * Account information display
+* Dark/Light theme support
+* Auto-save settings
 * Support for all AWS global regions
 * Multi-language support (ko, jp)
 
@@ -20,20 +22,15 @@
 * [Microsoft Edge](https://chrome.google.com/webstore/detail/aws-colorful-navbar/kgifmgnlchjjippdpkblbdlfidcpceme)
 * [Mozilla Firefox](https://addons.mozilla.org/firefox/addon/aws-colorful-navbar/)
 
-## For Developers
-
-* Open the Extension Management page by navigating to `chrome://extensions`
-* Enable `Developer Mode` by clicking the toggle switch
-* Click the `LOAD UNPACKED` button and select the extension directory
-
 ## Configuration
 
 The extension supports the following configuration options:
 
 * `background`: Enable/disable navbar color customization
 * `flag`: Enable/disable region flag display
 * `favicon`: Enable/disable service-specific favicon
-* `info`: Custom account information display
+* `info`: Custom account information display (JSON format)
+* `theme`: Dark/Light mode preference
 
 ## Supported Regions
 
@@ -47,6 +44,21 @@ See [flags/README.md](flags/README.md) for a complete list of supported regions
 
 ![after](images/aws-navbar-extension-01.png)
 
+## For Developers
+
+### Installation
+
+* Open the Extension Management page by navigating to `chrome://extensions`
+* Enable `Developer Mode` by clicking the toggle switch
+* Click the `LOAD UNPACKED` button and select the extension directory
+
+### Development
+
+* Clone the repository
+* Make changes to the source code
+* Test locally using the unpacked extension
+* Submit pull requests for improvements
+
 ## Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.

VERSION

@@ -0,0 +1 @@
+1.8.5

css/materialize.min.css

@@ -1,7 +1,7 @@
 {
   "name": "AWS Colorful Navbar",
   "description": "Change navbar color and flag according to AWS region",
-  "version": "1.8.0",
+  "version": "1.0.0",
   "manifest_version": 2,
   "icons": {
     "128": "icon.png"

js/jquery.min.js

@@ -1,7 +1,7 @@
 {
   "name": "AWS Colorful Navbar",
   "description": "Change navbar color and flag according to AWS region",
-  "version": "1.8.4",
+  "version": "1.0.0",
   "manifest_version": 3,
   "icons": {
     "128": "icon.png"

js/materialize.min.js

@@ -66,17 +66,21 @@ _prepare() {
 ################################################################################
 
 _package() {
-  VERSION=$(cat ./manifest.json | jq '.version' -r)
+  VERSION=$(cat ./VERSION)
 
-  echo $VERSION >./target/VERSION
+  echo $VERSION > ./target/VERSION
+
+  # Update version in manifest.json
+  cat ./manifest.json | jq '.version = $VERSION' --arg VERSION $VERSION > ./manifest.json.tmp
+  mv ./manifest.json.tmp ./manifest.json
 
   ITEMS="manifest.json icon.png main.js background.js popup.html popup.js css flags images js svcs"
 
   # mv3
   zip -r ${RUN_PATH}/release/$REPONAME-$VERSION.zip $ITEMS
 
   # mv2
-  cat ./manifest-v2.json | jq '.version = $VERSION' --arg VERSION $VERSION >./manifest.json
+  cat ./manifest-v2.json | jq '.version = $VERSION' --arg VERSION $VERSION > ./manifest.json
   zip -r ${RUN_PATH}/release/$REPONAME-$VERSION-mv2.zip $ITEMS
 }