nuTab
A browser extension that replaces your new tab page.
nuTab lets you keep notes, todos and favorite links in a place where you won't ever forget them.
Motivations
As a proper information junkie, I'm always searching for the best way to write and organize my notes. The main unsolved part of my note-taking process was the top of the funnel. Where should I put the quick thoughts, interesting snippets from the web, or small todos? Many people use sticky notes for that, and I did too.
That resulted in various annoyances like a messy table and lost notes. Looking for an alternative, I stumbled upon (now inactive) project called Papier, that simply showed a markdown editor on the new tab of the browser. Brilliant. As I was happily using it for many months, I started to miss some features that would make such extension even better.
Long story short, Papier got shut down and I decided to make my own, better version. And learn how to make & publish a browser extension at the same time.
Timeline
- 2020, April: Started development as a little side project
- 2020, May: Released the first version on Chrome and MS Edge store
- 2020, June: Received a $99 donation!
- 2020, December: Reached 1000 users and released a Firefox version
Tech stack
Since it's a browser extension, there's not much of a "stack" to talk about currently. It's basically a Vue.js app using the wonderful TipTap editor. I already started to expand nuTab to feature a cloud sync and other "Pro" features, that will require more technologies.
What I learned
Despite that browser extensions are "just" simple web pages, their development requires a different mindset. Especially around handling user data and communicating with the browser APIs.
The biggest technical challenge was setting up the process for developing Chromium and Firefox versions from a single codebase. Thankfully, the WebExtension format standardized most of the key differences between Firefox and Chromium extension APIs.
The most interesting design challenge was creating the best text editing experience. nuTab editor allows you to use Markdown to style your notes, but acts as a WYSIWYG editor at the same time. You don't need to even know what "Markdown" means to use it to its full potential. Dynamic todos with a proper checkmark mechanism that you can reorder by dragging are delightful to use. I'm the most proud of this part and I invite you to try it.
“One of the best "new tabs" out there. Really active development and improvements.”
“I've tried many tabs similar to this but this is my favourite”