A modern, customizable new tab dashboard for Chrome that replaces your default new tab page with a feature-rich, personalized experience.
- Modular Sections: Create custom sections for apps, websites, bookmarks, and frequently visited sites
- Smart Card Management: Add, edit, delete, and organize cards with drag-and-drop functionality
- Responsive Design: Optimized for all screen sizes from mobile to desktop
- Custom Backgrounds: Set personalized background images
- Theme Options: Light and dark mode support
- Multi-Engine Search: Google, Bing, DuckDuckGo, YouTube, and GitHub integration
- AI-Powered Search: Direct access to ChatGPT, Google Gemini, and Claude AI
- Smart Suggestions: Search history and frequently visited sites suggestions
- Instant Results: Fast, responsive search with gradient animations
- Visit Tracking: Monitor frequently visited websites
- Search Analytics: Track search patterns and preferences
- Privacy-First: All data stored locally in your browser
- Statistics Dashboard: View your browsing habits and trends
- Weather Integration: Current weather conditions with location detection
- World Clock: Multiple timezone support with customizable locations
- Date & Time: Beautiful, always-visible time display
- Daily Quotes: Inspirational quotes to start your day
- One-Click Bookmarking: Save current page with popup extension
- Automatic Categorization: Smart sorting into relevant sections
- Favicon Intelligence: High-quality icon detection and fallbacks
- Bookmark Management: Full CRUD operations for all saved items
- Compact Mode: Minimize header for more content space
- Toggle Components: Show/hide weather, time, search, quotes
- Privacy Controls: Enable/disable tracking and analytics
- Export/Import: Backup and restore your dashboard configuration
-
Download the Extension
git clone https://github.com/TheFakeCreator/chrome-dashboard.git cd chrome-dashboard -
Load in Chrome
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" (toggle in top-right corner)
- Click "Load unpacked extension"
- Select the
chrome-dashboardfolder - The extension will automatically replace your new tab page
- Open Chrome and navigate to
-
Start Customizing
- Open a new tab to see your dashboard
- Click the settings gear icon to customize
- Add your favorite websites and apps
-
Clone and Open
git clone https://github.com/TheFakeCreator/chrome-dashboard.git
-
Open in Browser
- Navigate to the project folder
- Open
newtab.htmlin Chrome - Bookmark the page for easy access
- Click the "+" button to create a new section
- Name your section (e.g., "Work Tools", "Entertainment")
- Add cards by clicking the "+" button within the section
- Enter website URL, name, and icon (optional)
- Click the settings gear icon
- Allow location access when prompted
- Weather will automatically display based on your location
- Customize weather units and display options in settings
- Open settings panel
- Navigate to "Search" section
- Set your default search engine
- Enable/disable AI search options
- Customize search suggestions behavior
The dashboard follows a modular architecture for maintainability and extensibility:
chrome-dashboard/
├── 📁 stylesheets/ # Modular CSS architecture
│ ├── base.css # Core styling and variables
│ ├── header.css # Top navigation bar
│ ├── sections.css # Card grid and sections
│ ├── modal.css # Popup dialogs
│ ├── responsive.css # Mobile responsiveness
│ └── ...
├── 📄 newtab.html # Main dashboard page
├── 📄 popup.html # Extension popup interface
├── 📄 manifest.json # Chrome extension configuration
├── 🔧 main.js # Application entry point
├── 🔧 sections.js # Section and card management
├── 🔧 search.js # Search functionality
├── 🔧 weather.js # Weather widget
├── 🔧 tracking.js # Analytics and usage tracking
├── 🔧 settings.js # Configuration management
├── 🔧 background.js # Extension background script
└── 📦 package.json # Node.js dependencies (for dev server)
- Node.js 16+ (for development server)
- Chrome browser
- Basic knowledge of HTML/CSS/JavaScript
# Clone the repository
git clone https://github.com/TheFakeCreator/chrome-dashboard.git
cd chrome-dashboard
# Install dependencies (for development server)
npm install
# Start development server (optional)
npm start
# Or open directly in browser
open newtab.htmlThe extension is ready for production as-is. For advanced builds:
# Minify assets (optional)
npm run build
# Package extension for Chrome Web Store
npm run package- Create a new CSS file in
stylesheets/themes/ - Import it in
newtab.html - Add theme selector to settings panel
- New Widgets: Add modules in the root directory
- Search Engines: Extend
search.jswith new providers - Analytics: Modify
tracking.jsfor custom metrics
- Local Storage: All data stored in browser's local storage
- No External Servers: No data sent to third-party services (except chosen search engines)
- Optional Tracking: Usage analytics can be completely disabled
- Secure Icons: Icon loading uses secure HTTPS sources with fallbacks
- Clear browser cache (
Ctrl+Shift+Delete) - Hard refresh the page (
Ctrl+F5) - Check if the website has a valid favicon
- Ensure Developer mode is enabled in Chrome
- Reload the extension in
chrome://extensions/ - Check browser console for error messages
- Allow location access when prompted
- Check internet connection
- Verify location services are enabled in browser
We welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Weather data provided by Open-Meteo
- Icons sourced from Clearbit, DuckDuckGo, and Google favicon services
- Inspired by modern dashboard design principles
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: [Create an issue for support requests]
⭐ Star this repository if you find it useful!