🔒 SecureTab - Website Blocker with Password Protection

A powerful Chrome/Edge browser extension that allows you to block websites with password protection. Maintain a list of blocked sites and require a password to access them.

✨ Features

• Password Protection: Secure your blocked sites with a password
• Easy Management: Add/remove sites from the block list via settings
• Enable/Disable: Toggle the blocking feature on/off
• Cross-Tab Protection: Works across multiple tabs and windows
• Session Management: Temporarily unlock sites for 30 minutes after password entry
• Modern UI: Clean, responsive design with dark mode support
• Backup & Restore: Export and import your settings
• Quick Actions: Block current site directly from the popup
• Secure Storage: Passwords are hashed and salted, never stored in plain text
• Password Verification: Current password required for changes, removal, and disabling

🚀 Installation

Method 1: Production Build (Recommended)

1. Download/Clone this repository to your local machine
2. Install dependencies and build:

   npm install
   npm run build:prod

3. Load the extension from the dist/ directory:
   • Chrome: chrome://extensions/ → Enable Developer Mode → Load unpacked → Select dist/ folder
   • Edge: edge://extensions/ → Enable Developer Mode → Load unpacked → Select dist/ folder
4. Pin the extension to your toolbar for easy access

Method 2: Development Build

1. Download/Clone this repository to your local machine
2. Generate Icons:

   npm install
   npm run generate-icons

3. Load the extension from the root directory (same steps as above)

Method 3: Generate Icons Only

The extension comes with a script to automatically generate PNG icons from the SVG source:

npm run generate-icons

Or manually:

node generate-icons.js

This will create all required icon sizes:

• 16x16 pixels → icons/icon16.png
• 32x32 pixels → icons/icon32.png
• 48x48 pixels → icons/icon48.png
• 128x128 pixels → icons/icon128.png

📖 Usage

Initial Setup

1. Click the SecureTab icon in your browser toolbar
2. Click "Settings" to open the options page
3. Set a password (minimum 4 characters)
4. Add websites to your block list
5. Enable the extension using the toggle switch

Managing Blocked Sites

Via Settings Page

1. Open the extension settings
2. In the "Blocked Websites" section, enter a URL or domain
3. Click "Add" to block the site
4. Use the "Remove" button next to any site to unblock it

Via Popup

1. Navigate to a website you want to block
2. Click the SecureTab icon
3. Click "Block This Site" in the popup

Password Management

• Set Password: Enter a new password and confirm it
• Change Password: Enter current password, then new password and confirm it
• Remove Password: Enter current password to verify before removing protection

Accessing Blocked Sites

When you try to access a blocked website:

1. A password prompt will appear
2. Enter your password
3. Click "Unlock" to proceed
4. The site will be temporarily unlocked for 30 minutes
5. Use "Go Back" to return to the previous page

Note: After entering the correct password, the site remains unlocked for 30 minutes. You can manage unlock sessions in the settings page.

🔧 Configuration

Extension Settings

• Enable/Disable: Toggle website blocking on/off (password required to disable from options/popup)
• Password Management: Set, change, or remove your password
• Blocked Sites: Add or remove websites from the block list
• Unlock Sessions: View and manage temporarily unlocked sites
• Backup & Restore: Export settings to a file or import from a backup

Supported URL Formats

The extension accepts various URL formats:

• Full URLs: https://example.com
• Domains: example.com
• Subdomains: sub.example.com

🛡️ Security Features

• Password Hashing: Uses SHA-256 with salt for password storage
• Secure Storage: All data stored in browser's local storage
• No Plain Text: Passwords are never stored in plain text
• Salt Generation: Unique salt for each password

📁 File Structure

SecureTab/
├── manifest.json              # Extension manifest
├── background.js              # Background service worker
├── content.js                 # Content script
├── password-prompt.html       # Password prompt page
├── password-prompt.css        # Password prompt styles
├── options.html               # Settings page
├── options.css                # Settings page styles
├── options.js                 # Settings page logic
├── popup.html                 # Extension popup
├── popup.css                  # Popup styles
├── popup.js                   # Popup logic
├── icons/                     # Extension icons
│   ├── icon.svg               # Source SVG icon
│   ├── icon16.png             # 16x16 icon
│   ├── icon32.png             # 32x32 icon
│   ├── icon48.png             # 48x48 icon
│   └── icon128.png            # 128x128 icon
├── generate-icons.js          # Icon generation script
└── README.md                  # This file

🔍 How It Works

1. Web Request Interception: Uses Chrome's webRequest API to intercept navigation
2. Domain Matching: Checks if the requested URL matches any blocked domains
3. Password Prompt: Redirects to a custom password prompt page
4. Password Verification: Hashes the entered password and compares with stored hash
5. Access Control: Only allows access if the password is correct
6. State Synchronization: Automatically syncs extension state between browser management and internal settings

🚨 Limitations

• Incognito Mode: May not work in incognito/private browsing mode
• Browser Extensions: Cannot block access to browser extension pages
• Local Files: Cannot block access to local files (file:// URLs)
• Browser Settings: Cannot block access to browser settings pages

🐛 Troubleshooting

Extension Not Working

1. Check if the extension is enabled in browser settings
2. Verify that website blocking is enabled in the extension settings
3. Ensure you have set a password
4. Check the browser console for any error messages

Password Not Working

1. Make sure you're entering the correct password
2. Try resetting the password in the settings
3. Check if the password was set correctly

Sites Not Being Blocked

1. Verify the site is in your blocked list
2. Check the URL format (try both with and without https://)
3. Ensure the extension is enabled
4. Try refreshing the page

🔄 Updates

To update the extension:

1. Download the latest version
2. Remove the old extension from your browser
3. Load the new version as an unpacked extension
4. Your settings will be preserved in browser storage

📝 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

🏪 Store Submission

SecureTab is production-ready for Chrome Web Store and Microsoft Edge Add-ons Store submission.

Quick Submission

npm run build:prod

This creates:

• Production-ready extension in dist/
• ZIP archive for store upload
• Store assets and documentation

Submission Resources

• Store Listing: See STORE_LISTING.md for detailed description
• Privacy Policy: See PRIVACY.md for privacy information
• Submission Guide: See SUBMISSION_GUIDE.md for step-by-step instructions

Store Requirements Met

✅ Privacy policy compliant with GDPR/CCPA
✅ Professional store listing content
✅ High-quality icons and assets
✅ Proper permission justification
✅ Security-focused design
✅ Production-ready code quality

📞 Support

If you encounter any issues or have questions:

1. Check the troubleshooting section above
2. Review the browser console for error messages
3. Create an issue in the project repository

---

Note: This extension is for personal use and productivity. Please respect website terms of service and use responsibly.