A modern, customizable browser extension that transforms your new tab page into a powerful developer dashboard with weather, GitHub stats, notes, bookmarks, and more.
- View your GitHub profile statistics
- Language usage charts and commit activity
- Repository and star counts
- Customizable display options
- Real-time weather information
- Multi-day forecasts with hourly details
- Support for multiple cities and coordinates
- Customizable temperature scales (Celsius/Fahrenheit)
- Create, edit, and organize notes
- Task completion tracking
- Color-coded notes with tags
- Deadline management with overdue alerts
- Quick access to your browser bookmarks
- Folder organization with expandable menus
- Customizable icon sizes and labels
- Smooth scrolling navigation
- Multiple search engine support (Google, Bing, DuckDuckGo)
- Auto-complete suggestions
- Keyboard navigation
- Customizable default engine
- Multiple timezone support
- 12/24 hour format options
- Weekday display
- Customizable appearance
- Built-in beautiful backgrounds
- Custom image/video URL support
- Parallax effect with mouse tracking
- Brightness adjustment
-
Clone the repository:
git clone https://github.com/riikon/devtab.git cd devtab -
Install dependencies:
npm install
-
Build the extension:
npm run build
-
Load in browser:
- Chrome/Edge: Go to
chrome://extensions/, enable "Developer mode", click "Load unpacked", select thedistfolder - Firefox: Go to
about:debugging#/runtime/this-firefox, click "Load Temporary Add-on", selectmanifest.jsonfrom thedistfolder
- Chrome/Edge: Go to
Download the latest release from the Releases page and follow the browser-specific installation instructions above.
- Dark/Light Mode: Toggle between themes
- Primary Color: Customize the accent color
- Background: Choose from built-in images or add custom URLs
- Username: Enter your GitHub username
- Cache Duration: Set how long to cache data (1-60 minutes)
- Display Options: Choose which stats to show
- Excluded Languages: Filter out specific programming languages
- Location: Set your city or coordinates
- Temperature Scale: Celsius or Fahrenheit
- Refresh Interval: Update frequency (15-120 minutes)
- Font Size: Adjust text size (10-18px)
- Expanded View: Show detailed note information
- Sort Options: Sort by creation date, deadline, or title
- Deadline Display: Show/hide deadline information
- Background Effects: Transparent background with blur
- Show Labels: Display bookmark titles
- Show Icons: Display favicons
- Show Folders: Include folder bookmarks
- Icon Size: Adjust icon size (8-24px)
- Node.js 18+
- npm or yarn
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Run linting
npm run lint
# Run type checking
npm run type-checksrc/
├── components/ # React components
│ ├── Background/ # Background customization
│ ├── Bookmark/ # Bookmark management
│ ├── Clock/ # Digital clock
│ ├── Github/ # GitHub integration
│ ├── Notes/ # Notes and tasks
│ ├── SearchEngine/ # Search functionality
│ ├── Setting/ # Settings panel
│ └── Weather/ # Weather widget
├── constants/ # Type definitions and constants
├── contexts/ # React contexts
├── hooks/ # Custom React hooks
├── layouts/ # Layout components
├── utils/ # Utility functions
└── main.tsx # Application entry point
- React 18 with TypeScript
- Vite for fast development and building
- Material-UI (MUI) for UI components
- Chart.js for data visualization
- date-fns for date manipulation
- Axios for HTTP requests
- Code Splitting: Dynamic imports for heavy components
- Memoization: React.memo and useMemo for performance
- Bundle Optimization: Manual chunks for vendor libraries
- Lazy Loading: Components loaded on demand
- Caching: Local storage for API responses
- 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
- Follow TypeScript best practices
- Use functional components with hooks
- Add proper error handling
- Include appropriate tests
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- Material-UI for the beautiful UI components
- Chart.js for data visualization
- Vite for the excellent build tool
- React for the amazing framework
- Email: riikon04@gmail.com
- Website: https://riikon.com
- GitHub: https://github.com/riikon
Made with ❤️ by the Riikon Team