FocusGuard - Website Blocker & Focus Timer

A Chrome extension that blocks all websites except your current task site, helping you maintain laser focus and avoid distractions.

🚀 Features

• Complete Website Blocking - Blocks all websites except your designated work site
• Task Tracking - Set and display your current task on blocked pages
• Minimalist Design - Clean black and white interface with red accents
• One-Click Activation - Instantly start and stop focus mode
• Persistent Settings - Your preferences are saved across sessions
• Privacy First - No data collection, everything stays local

📁 Project Structure

allblock/
├── manifest.json           # Extension configuration
├── popup.html             # Extension popup interface
├── popup.css              # Popup styling
├── popup.js               # Popup functionality
├── content.js             # Content script for blocking
├── content.css            # Blocked page overlay styling
├── background.js          # Background service worker
├── icons/                 # Extension icons
│   ├── icon16.png         # 16x16 icon (replace with actual)
│   ├── icon32.png         # 32x32 icon (replace with actual) 
│   ├── icon48.png         # 48x48 icon (replace with actual)
│   ├── icon128.png        # 128x128 icon (replace with actual)
│   └── README.md          # Icon guidelines
├── chrome-web-store-info.md # Publishing information
├── PRIVACY_POLICY.md      # Privacy policy
└── README.md              # This file

🛠 Installation & Testing

For Development/Testing:

1. Enable Developer Mode in Chrome:

   • Go to chrome://extensions/
   • Toggle "Developer mode" in the top right

2. Load the Extension:

   • Click "Load unpacked"
   • Select the allblock folder
   • The extension should now appear in your extensions list

3. Test the Extension:

   • Click the FocusGuard icon in your toolbar
   • Enter a task (e.g., "Working on project research")
   • Navigate to your work website (e.g., Google Docs)
   • Click "Allow Current Site"
   • Click "Start Focus Mode"
   • Try visiting other websites - they should be blocked

For Production:

The extension is ready to be packaged and submitted to the Chrome Web Store using the information in chrome-web-store-info.md.

🎨 Design Theme

The extension follows a black and white minimalist theme with strategic red accents:

• Background: Pure black (#000000)
• Text: White (#ffffff) and light gray (#cccccc)
• Accents: Red (#dc2626) for important elements
• Cards/Sections: Dark gray (#1a1a1a) with subtle borders

📝 How to Use

1. Set Your Task:

   • Click the extension icon
   • Enter what you're working on in the task field

2. Allow Your Work Site:

   • Navigate to the website you need for work
   • Click "Allow Current Site" in the popup

3. Start Focus Mode:

   • Click "Start Focus Mode"
   • All other websites will now be blocked

4. Stay Focused:

   • When you try to visit blocked sites, you'll see a black screen with your task reminder
   • Only your allowed site will be accessible

5. Stop When Done:

   • Click the extension icon and hit "Stop Focus Mode"

🔧 Customization

Replacing Icons:

1. Create PNG icons in the required sizes (16x16, 32x32, 48x48, 128x128)
2. Replace the placeholder files in the icons/ folder
3. Follow the design guidelines in icons/README.md

Modifying Appearance:

• Edit popup.css for popup interface styling
• Edit content.css for blocked page overlay styling
• Maintain the black/white/red color scheme

🚀 Publishing to Chrome Web Store

1. Package the Extension:

   • Create a ZIP file of the entire allblock folder
   • Ensure all placeholder icons are replaced with actual icons

2. Use the Store Information:

   • Copy content from chrome-web-store-info.md
   • Use the provided name, description, and other details

3. Upload Screenshots:

   • Create screenshots showing the popup, blocked overlay, and extension in action
   • Follow the dimensions specified in the store info file

4. Submit Privacy Policy:

   • Host the PRIVACY_POLICY.md content on a website
   • Provide the URL during submission

🔒 Privacy

FocusGuard is built with privacy as a core principle:

• No data collection - Nothing is sent to external servers
• Local storage only - All settings stay on your device
• Minimal permissions - Only requests what's necessary
• See PRIVACY_POLICY.md for complete details

🐛 Troubleshooting

Extension not working:

• Refresh the page after activating focus mode
• Check that developer mode is enabled
• Reload the extension in chrome://extensions/

Sites not being blocked:

• Ensure focus mode is active (check popup)
• Verify you've set an allowed site
• Some special pages (chrome://, extension pages) cannot be blocked

Popup not opening:

• Try right-clicking the extension icon and selecting the extension name
• Check for JavaScript errors in the extension's console

📞 Support

For issues or questions:

• Check this README first
• Review the Chrome developer console for errors
• Contact: [Your support email]

☕ Support the Developer

If you find FocusGuard helpful, consider supporting the developer: Buy me a coffee

📄 License

[Your chosen license - recommend MIT for open source]

---

Version 1.0.0 - Ready for Chrome Web Store submission