Nest Tab is a simple Google Chrome extension that replaces your New Tab page with a clean looking page that contains tools to help you be productive. Simplicity and usefulness is the main focus of Nest Tab. It currently features a Todo list and a Pomodoro clock that works together, a Shelf to dump urls that you want to take a look at later, and a Bookmark quick acess tool. More features are to be added soon. This project was built as part of the Chingu Build to Learn program.
The packaged extension file can be downloaded here. Also, An in-browser demo is available here. I'm planning to submit it in Chrome Web Store as well.
Some of the main features of Nest Tab:
- A Todo app that let's you add details for items, mark them as done/not-done etc
- A Pomodoro app that works in sync with Todo app to let you track your time working on specific tasks from Todo list. You can see how much time you've worked on task from task details in Todo app.
- A Shelf where you can leave url for visiting at a later time. Shelf attemps to collect metadata of your url to keep things organised.
- A Bookmark browser that lets you browse all your saved bookmark in quick and easy way and also open them in a new tab.
- Detects and shows weather information for your current location.
- Google search from the home screen.
- Fetches specially curated wallpapers from the internet. It updates the wallpaper every hour if you leave the tab open. Alternatively, You can update it anytime using the Change Wallpaper button on the top left corner.
More features are in plan to be implemented. If you have any feature idea, please create an issue here.
I've used below technology to create Nest Tab:
- HTML5
- CSS3
- SASS
- React (with create-react-app boilerplate )
- Unsplash API for images
- DarkSkies API for weather data
- Chrome API
- Google Material Icons
If you want to contribute or just want to run the project locally, Follow these steps:
- Clone this repo
- Inside the project directory, run
npm install - Once all the packages are installed, run
npm start - The previous command will start the local dev server and will open the project in browser tab automatically. If it doesn't manually open
http://localhost:3000/(Please note that features which rely on data from Chrome API will show an error since the API can not be used fromlocalhost. You need to build the project and run it inside chrome as an extension (see below) to use those feature). - You're ready to go! Your change in codes will be reflected in browser automatically.
If you want to run the project inside chrome as an extension, follow these steps:
- While in project folder, run
npm run buildto create a build of the project - Open Chrome and enter
chrome://extensionsin url box - Check the Developer Mode box
- Click the Open unpacked extension... button and select the
buildfolder which created inside of the project folder. - Open a new tab and start testing.
- Version 0.0.1: Initial Release
I'd specially like to thank Eddy Willson, Bartek Lewandowski and the entire Chingu Voyage community for their help and support. They were by my side everytime I was on verge of giving up. This project wouldn't come to light without them. So, Thank you! :)