{"id":48552255,"url":"https://github.com/reflexdemon/world-clock-wallpaper","last_synced_at":"2026-04-08T09:01:38.591Z","repository":{"id":337143209,"uuid":"1152163167","full_name":"reflexdemon/world-clock-wallpaper","owner":"reflexdemon","description":"A customizable Chrome extension that displays multiple digital world clocks as your new tab wallpaper.","archived":false,"fork":false,"pushed_at":"2026-02-08T00:35:34.000Z","size":258,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-02-08T08:59:11.852Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reflexdemon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-07T13:11:15.000Z","updated_at":"2026-02-08T00:35:37.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/reflexdemon/world-clock-wallpaper","commit_stats":null,"previous_names":["reflexdemon/world-clock-wallpaper"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/reflexdemon/world-clock-wallpaper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fworld-clock-wallpaper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fworld-clock-wallpaper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fworld-clock-wallpaper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fworld-clock-wallpaper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reflexdemon","download_url":"https://codeload.github.com/reflexdemon/world-clock-wallpaper/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflexdemon%2Fworld-clock-wallpaper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31547845,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"online","status_checked_at":"2026-04-08T02:00:06.127Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-08T09:01:37.823Z","updated_at":"2026-04-08T09:01:38.585Z","avatar_url":"https://github.com/reflexdemon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# World Clock Wallpaper Chrome Extension\n\nA customizable Chrome extension that displays multiple digital world clocks as your new tab wallpaper. Built with modern web technologies and designed for both users and developers.\n\n## 🚀 Quick Start for Chrome Users\n\n### Installation\n\n1. **Download the extension**:\n   - Clone this repository: `git clone git@github.com:reflexdemon/world-clock-wallpaper.git`\n\n2. **Install in Chrome**:\n   - Open Chrome and navigate to `chrome://extensions/`\n   - Enable \"Developer mode\" in the top right corner\n   - Click \"Load unpacked\" and select the `dist` folder\n   - The extension will be installed and ready to use\n\n3. **For Chrome Web Store Users**:\n   - Install directly from the [Chrome Web Store](https://chromewebstore.google.com/detail/madpbadiegoiilphfnoglipniphjndig?utm_source=item-share-cb)\n\n### Basic Usage\n\n1. **Open a new tab** - Your world clock wallpaper will appear\n2. **Customize your display**:\n   - Click the **⚙️ Settings** button (bottom right)\n   - Adjust colors, fonts, and formats to your preference\n   - Add world timezones from the dropdown menu\n3. **Save your configuration** - Click \"Save Configuration\" to apply changes\n4. **Get help** - Click the **❓ Help** button for detailed guidance\n\n### Key Features\n\n- 🌍 **Main Central Clock**: Your local timezone with prominent display\n- 🕐 **Multiple World Clocks**: Add up to 6 additional timezone clocks\n- 🎨 **Full Customization**: Colors, fonts, sizes, and formats\n- 📱 **Responsive Design**: Works perfectly on all devices\n- 💾 **Persistent Settings**: Automatically saves across devices via Chrome sync\n- ❓ **Built-in Help**: Comprehensive documentation included\n\n## 📁 Project Structure\n\n```\nworld-clock-wallpaper/\n├── package.json           # Dependencies and build scripts\n├── webpack.config.js       # Webpack bundling configuration\n├── src/                  # Source code directory\n│   ├── manifest.json       # Chrome Extension Manifest V3\n│   ├── index.html         # New tab page (main clock display)\n│   ├── popup.html         # Extension popup interface\n│   ├── script.js          # Main application logic\n│   ├── popup.js           # Popup functionality\n│   ├── background.js       # Service worker\n│   ├── styles.css         # Global styles and responsive design\n│   └── assets/\n│       └── icons/        # Extension icons (16x16, 32x32, 48x48, 128x128)\n│           ├── icon16.png\n│           ├── icon32.png\n│           ├── icon48.png\n│           └── icon128.png\n├── dist/                 # Built extension (auto-generated)\n│   ├── manifest.json\n│   ├── index.html\n│   ├── popup.html\n│   ├── script.js\n│   ├── popup.js\n│   ├── background.js\n│   └── icons/\n└── README.md             # This file\n```\n\n## 👨‍💻 Developer Guide\n\n### Prerequisites\n\n- Node.js 16+ and npm\n- Modern web browser (Chrome/Edge for development)\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/your-repo/world-clock-wallpaper.git\ncd world-clock-wallpaper\n\n# Install dependencies\nnpm install\n```\n\n### Development Commands\n\n```bash\n# Production Build\nnpm run build\n# Creates optimized, minified extension in dist/ folder\n# Ready for Chrome Web Store submission\n\n# Development Build with Watch Mode\nnpm run dev\n# Builds extension and watches for file changes\n# Auto-rebuilds when source files are modified\n# Use during development for faster iteration\n\n# Clean Build Directory\nnpm run clean\n# Removes the dist/ folder completely\n# Useful before fresh builds\n\n# Build and Create Chrome Web Store Package\nnpm run zip\n# Runs production build and creates world-clock-wallpaper.zip\n# Direct upload-ready package for Chrome Web Store\n```\n\n### Development Workflow\n\n1. **Start development**: Run `npm run dev` for live reloading\n2. **Load in Chrome**: Use \"Load unpacked\" with `dist` folder\n3. **Make changes**: Edit files in `src/` directory\n4. **Auto-rebuild**: Webpack automatically updates `dist/`\n5. **Refresh extension**: Click reload button in Chrome extensions page\n6. **Test changes**: Open new tab to see updates\n\n## 🧪 Testing Guide\n\n### Manual Testing\n\n1. **Functionality Testing**:\n   ```bash\n   npm run build\n   # Load dist/ in Chrome and test all features:\n   # - Clock display accuracy\n   # - Configuration panel functionality\n   # - Timezone addition/removal\n   # - Settings persistence\n   # - Help and About popups\n   ```\n\n2. **Cross-device Testing**:\n   - Test on desktop (Chrome, Edge)\n   - Test on mobile devices (Chrome mobile)\n   - Verify responsive design at different screen sizes\n\n3. **Chrome Extension Testing**:\n   - Enable/disable extension\n   - Test popup functionality\n   - Verify new tab override works\n   - Check permissions and storage\n\n### Automated Testing (Future)\n\n```bash\n# Run tests (when implemented)\nnpm test\n\n# Check code quality\nnpm run lint\nnpm run typecheck\n```\n\n### Common Issues \u0026 Solutions\n\n| Issue | Solution |\n|-------|----------|\n| Extension not loading | Check manifest.json syntax and permissions |\n| Clocks not updating | Ensure Chrome extension has proper permissions |\n| Settings not saving | Verify Chrome sync is enabled |\n| Build fails | Run `npm clean` then `npm install` |\n\n## 🤝 Contributing Guidelines\n\n### Getting Started\n\n1. **Fork the repository** on GitHub\n2. **Create a feature branch**: `git checkout -b feature/amazing-feature`\n3. **Make your changes** following our style guidelines\n4. **Test thoroughly** using the testing guide above\n5. **Submit a pull request** with detailed description\n\n### Code Style Guidelines\n\n#### JavaScript\n- Use **ES6+** features (const/let, arrow functions, template literals)\n- Follow **camelCase** for variables and functions\n- Use **PascalCase** for classes\n- Add **JSDoc comments** for complex functions\n- Maintain **consistent indentation** (2 spaces)\n\n```javascript\n// Good ✅\nconst updateClock = (timezone) =\u003e {\n  // Update clock display for given timezone\n  const element = document.getElementById(`clock-${timezone}`);\n  element.textContent = formatTime(timezone);\n};\n\n// Bad ❌\nfunction update_clock(timezone){\n  var element=document.getElementById('clock-'+timezone);\n  element.innerHTML = formatTime(timezone);\n}\n```\n\n#### HTML/CSS\n- Use **semantic HTML5** elements\n- Follow **BEM methodology** for CSS classes\n- Use **mobile-first responsive design**\n- Include **accessibility attributes** where needed\n\n```css\n/* Good ✅ */\n.clock-container {\n  display: flex;\n  justify-content: center;\n}\n\n.clock-container__time {\n  font-size: 2rem;\n  color: var(--primary-color);\n}\n\n/* Bad ❌ */\n.div1 {\n  display: flex;\n  text-align: center;\n}\n```\n\n#### File Organization\n- Keep files **small and focused** (\u003c 500 lines when possible)\n- Use **descriptive filenames**\n- Group related functionality\n- Maintain **consistent directory structure**\n\n### Commit Guidelines\n\n- **Conventional Commits**: Use semantic commit messages\n  ```\n  feat: add timezone search functionality\n  fix: resolve clock display issue on mobile\n  docs: update README with installation guide\n  style: improve button hover effects\n  refactor: simplify configuration logic\n  test: add unit tests for timezone conversion\n  ```\n\n- **Small, focused commits**: One logical change per commit\n- **Clear descriptions**: Explain what and why, not just what\n\n### Pull Request Process\n\n1. **Update tests** if applicable\n2. **Update documentation** for new features\n3. **Ensure CI passes** (when implemented)\n4. **Request code review** from maintainers\n5. **Address feedback** promptly\n\n### Areas for Contribution\n\n- 🐛 **Bug fixes** and performance improvements\n- ✨ **New features** (open issue first for discussion)\n- 📚 **Documentation** improvements\n- 🎨 **UI/UX enhancements**\n- 🧪 **Test coverage** expansion\n- 🌍 **Internationalization** support\n\n## 📋 Browser Compatibility\n\n- ✅ Chrome 88+\n- ✅ Edge 88+ (Chromium-based)\n- ✅ Opera 74+ (Chromium-based)\n- ❌ Firefox (Different extension architecture)\n- ❌ Safari (Different extension architecture)\n\n## 🛠️ Technical Stack\n\n- **Frontend**: Vanilla JavaScript, HTML5, CSS3\n- **Build Tool**: Webpack 5\n- **Extension**: Chrome Manifest V3\n- **Storage**: Chrome Storage Sync API\n- **Timezones**: Intl.DateTimeFormat API\n- **Responsive**: CSS Media Queries \u0026 Flexbox/Grid\n- **Icons**: PNG (16x16, 32x32, 48x48, 128x128)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n### MIT License Summary\n\n✅ **What you can do**:\n- Commercial use\n- Modification\n- Distribution\n- Private use\n- Sublicensing\n\n❌ **What you must do**:\n- Include the original copyright and license\n- State changes if you modify the code\n\nℹ️ **No liability**: The software is provided \"as is\" without warranty.\n\n## 📞 Support \u0026 Community\n\n- 🐛 **Bug Reports**: [GitHub Issues](https://github.com/reflexdemon/world-clock-wallpaper/issues)\n- 💡 **Feature Requests**: [GitHub Discussions](https://github.com/reflexdemon/world-clock-wallpaper/issues)\n\n## 🙏 Acknowledgments\n\n- [Open Code](https://opencode.ai/) to help me build this extension\n- Chrome Extension documentation and community\n- Intl.DateTimeFormat API contributors\n- Open source community for inspiration and tools\n- All users and contributors who make this project better\n\n---\n\n**Made with ❤️ for the global community** 🌍","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freflexdemon%2Fworld-clock-wallpaper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freflexdemon%2Fworld-clock-wallpaper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freflexdemon%2Fworld-clock-wallpaper/lists"}