Show HN: Replace Chrome new tab with a blank WYSIWYG editor for taking notes (opens in new tab)

(github.com)

6 pointshakaneskici11mo ago7 comments

minimalistab is an extension for Chrome that replaces the default "New tab" page with a blank WYSIWYG editor for taking notes.

Sometimes I need a blank screen to stare at, especially when context switching between tasks; so I made this Chrome extension with basic note taking capabilities.

I kept the code as simple as possible, formatted for developers with dyslexia. Let me know your opinions.

I hope you find it useful. Feel free to personalize and hack your own copy. Feedback very welcome.

DEMO: https://raw.githubusercontent.com/hakaneskici/minimalistab/r...

Install as an extension: https://github.com/hakaneskici/minimalistab

Features:

* Take notes with formatting

* CMD/CTRL + {B, I, U} or toolbar

* Works offline by design

* Auto save to local storage

* Download as .html file

* Dark/light system theme

* Paste images and links

* Plain JS, no dependencies

* No tracking, no telemetry, no cookies

* Works without JS too (no saving)

* 100% handcrafted human code (TM)

Here's the primary trick that makes this possible:

https://news.ycombinator.com/item?id=43179649

Previous discussions and tools:

[1] Nash - https://news.ycombinator.com/item?id=43358914

[2] Notetime - https://news.ycombinator.com/item?id=43434152

[3] NoteUX - https://news.ycombinator.com/item?id=43492415

[4] TiddlyWiki - https://tiddlywiki.com/

7 comments

hakaneskiciOP11mo ago

I found more tools from previous discussions:

https://tabnotes.page/

https://original.littr.me/

https://feather.wiki/

https://zareith.github.io/chillmd/

Although most tools use the "contenteditable" trick, I noticed some save the *entire page* as HTML. I used a different approach to enable downloading just the editable content:

  const blob = new Blob([content], { type: "text/html" });
  const url = URL.createObjectURL(blob);

edoceo11mo ago

I made one like this for myself. Love this. Mine has two panels. One for notes and the left side is just a tall menu, big buttons of my favorite sites/tools - saves a few clicks. Custom newtab is underrated.

hakaneskiciOP11mo ago

Awesome! I'd love to see it.

One of my goals was to make the code "hackable", so that you can take this as a starting point, then extend and personalize it, to make it "yours".

> Custom newtab is underrated

Exactly. I'm surprised myself how handy this turned out :)

beardyw11mo ago

I haven't really looked but my immediate reaction was - why an extension? Wouldn't a web page be capable of of this?

hakaneskiciOP11mo ago

The only reason is that it shows up on all new tabs. It's just always there.

Backstory: My primary goal was to have a blank screen when I open a new browser tab. It helps me with context switching, to stop and think. Later I added an editable area to jot down a few quick notes before typing a URL that takes me to my next distraction :)

beardyw11mo ago

But on most browsers you can set any page as the default.

1 more reply

j / k navigate · click thread line to collapse

Show HN: Replace Chrome new tab with a blank WYSIWYG editor for taking notes (opens in new tab)

(github.com)

6 pointshakaneskici11mo ago7 comments

minimalistab is an extension for Chrome that replaces the default "New tab" page with a blank WYSIWYG editor for taking notes.

Sometimes I need a blank screen to stare at, especially when context switching between tasks; so I made this Chrome extension with basic note taking capabilities.

I kept the code as simple as possible, formatted for developers with dyslexia. Let me know your opinions.

I hope you find it useful. Feel free to personalize and hack your own copy. Feedback very welcome.

DEMO: https://raw.githubusercontent.com/hakaneskici/minimalistab/r...

Install as an extension: https://github.com/hakaneskici/minimalistab

Features:

* Take notes with formatting

* CMD/CTRL + {B, I, U} or toolbar

* Works offline by design

* Auto save to local storage

* Download as .html file

* Dark/light system theme

* Paste images and links

* Plain JS, no dependencies

* No tracking, no telemetry, no cookies

* Works without JS too (no saving)

* 100% handcrafted human code (TM)

Here's the primary trick that makes this possible:

https://news.ycombinator.com/item?id=43179649

Previous discussions and tools:

[1] Nash - https://news.ycombinator.com/item?id=43358914

[2] Notetime - https://news.ycombinator.com/item?id=43434152

[3] NoteUX - https://news.ycombinator.com/item?id=43492415

[4] TiddlyWiki - https://tiddlywiki.com/

7 comments

hakaneskiciOP11mo ago

I found more tools from previous discussions:

https://tabnotes.page/

https://original.littr.me/

https://feather.wiki/

https://zareith.github.io/chillmd/

Although most tools use the "contenteditable" trick, I noticed some save the *entire page* as HTML. I used a different approach to enable downloading just the editable content:

  const blob = new Blob([content], { type: "text/html" });
  const url = URL.createObjectURL(blob);

edoceo11mo ago

hakaneskiciOP11mo ago

Awesome! I'd love to see it.

One of my goals was to make the code "hackable", so that you can take this as a starting point, then extend and personalize it, to make it "yours".

> Custom newtab is underrated

Exactly. I'm surprised myself how handy this turned out :)

beardyw11mo ago

I haven't really looked but my immediate reaction was - why an extension? Wouldn't a web page be capable of of this?

hakaneskiciOP11mo ago

The only reason is that it shows up on all new tabs. It's just always there.

beardyw11mo ago

But on most browsers you can set any page as the default.

1 more reply

j / k navigate · click thread line to collapse