🕐 Break Reminder Chrome Extension

A modern Chrome extension that reminds you to take regular breaks with engaging content from free public APIs.

✨ Features

• 4 Action Types: Choose from jokes, quotes, fun facts, or exercise tips
• Quick Interval Adjustment: +5/-5 minute buttons for easy time management
• Free API Integration: Real-time content from public APIs
• Dual Notification System: Browser notifications + in-page modals
• Snooze Functionality: Postpone breaks by 5 minutes when needed
• Persistent Settings: Your preferences are saved automatically

🎯 Content Types

• 🤣 Random Jokes - Funny jokes from Official Joke API
• 💭 Motivational Quotes - Inspiring quotes from Quotable API
• 🧠 Fun Facts - Interesting facts from Useless Facts API
• 🧘 Exercise Tips - Curated stretching and movement reminders

🚀 Installation

1. Clone or download this repository
2. Run npm install to install dependencies
3. Run npm run build to build the extension
4. Open Chrome and go to chrome://extensions/
5. Enable "Developer mode" in the top right
6. Click "Load unpacked" and select the dist folder
7. The extension icon will appear in your toolbar

📱 Usage

1. Click the extension icon in your Chrome toolbar
2. Select your preferred action type (jokes, quotes, facts, or exercise)
3. Set your break interval using the input field or +5/-5 buttons
4. Click "Save Settings"
5. The extension will remind you to take breaks at your specified interval

🔧 Development

Prerequisites

• Node.js (v16 or higher)
• npm

Setup

npm install
npm run dev    # Development mode
npm run build  # Production build

Project Structure

src/
├── popup/           # Extension popup UI
│   ├── Popup.jsx   # Main popup component
│   └── index.html  # Popup HTML
├── background.js    # Service worker
├── content.js      # Content script for modals
└── index.css       # Global styles

🌐 APIs Used

All APIs are free and don't require authentication:

• Jokes: Official Joke API
• Quotes: Quotable API
• Facts: Useless Facts API

🎨 Technologies

• React - UI framework
• Vite - Build tool
• Tailwind CSS - Styling
• Chrome Extension Manifest V3 - Extension framework

💡 Pro Tips

• Start with 15-20 minute intervals if you're new to regular breaks
• Try different action types to keep your breaks interesting
• Use the snooze feature when you're in the middle of important work
• The in-page modal provides better visibility than just notifications

📝 License

MIT License - feel free to modify and distribute!

🤝 Contributing

Contributions are welcome! Feel free to submit issues or pull requests.

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

Testing the Custom Modal

New Features Added:

1. 🎭 Test Custom Modal - This will show the beautiful custom overlay modal that appears directly on your webpage
2. 🔔 Test System Notification - This shows the regular Chrome notification in the sidebar

Custom Modal Features:

• Beautiful gradient background with blur effects
• Large animated emoji that pulses
• Custom styling with rounded corners and smooth animations
• Two action buttons: Dismiss and Snooze 5 min
• Auto-close after 30 seconds
• Smooth slide-in/slide-out animations
• Works in fullscreen mode and on most web pages

How to Test:

1. Load the extension in Chrome (Developer mode)
2. Click the extension icon to open the popup
3. Click "🎭 Test Custom Modal" to see the custom break reminder
4. The modal should appear as a beautiful overlay on your current webpage
5. Try setting a 1-minute timer to see the full break experience

Note:

• The custom modal won't work on Chrome system pages (chrome://...)
• It works best on regular websites like Google, YouTube, etc.
• Both the custom modal AND system notification will appear during actual breaks
• The custom modal is now the primary notification method