Ultra Notes, a simple note taking Chrome extension built with Svelte

The journey began when I sought a straightforward note-taking app for my everyday needs. Several months ago, I experimented with various online note-taking platforms for work. However, my boss, upon noticing my utilization of these apps, emphatically insisted that I refrain from entering any information into online note-taking tools due to security concerns that were not approved by the company.

While my employer provided a robust tool in the form of Confluence—a powerful documentation platform—it posed a challenge. Confluence, designed for long-term documentation, proved cumbersome for quick note-taking. Despite attempting to adapt it for personal note-taking, its lack of convenience and speed became apparent. Creating a quick note in Confluence necessitated opening a new (Chrome) tab, navigating to my personal space, creating a new page, and then initiating the writing process—only deciding later whether to publish or keep it as a draft. However, drafts were not easily visible for later review.

Similar challenges were encountered with other documentation systems such as Google Docs, Notion, and Evernote. What I sought was simplicity and speed—a tool that required minimal deliberation. I envisioned a process where I could open the tool and immediately start typing, devoid of unnecessary steps and decisions. The aim was to easily review and decide whether to retain or delete these quick notes later.

Faced with this need for a secure and convenient note-taking solution, I explored various options, including online note-taking apps, Chrome extensions, and applications. However, none met my criteria, as they were either too complex, had poor user experiences, or lacked the necessary security measures.

Problems

1. Documenting tools are powerful but not suitable for quick note-taking.
2. Trust issue. Online taking notes apps are not secure enough (we are ).
3. Current Chrome Note-taking extensions don't offer a good user experience and don't guarantee security.

Solution

Chrome Extension

What I need in this use case is a simple note-taking app that is secure and convenient to use, that seems to be a Chrome extension. There are reasons for this choice:

1. Chrome extensions are easy to install and use.
2. Chrome extensions are secure because they are sandboxed (localStorage that only this extension can access).
3. Data is saved in a Local Storage, which is fast to access.
   • It is not shared with any third party.
   • Can be used offline, which is convenient for me to use on the go.
   • The only downside is that it is not synced across devices and is limited in size, but I don't need it in this use case. Maybe in the future, I will consider to add the option to sync data across devices.
4. It provides a good user experience with sidePanel, that users don't need to open new or switch to another tab to take notes.

Svelte or not Svelte?

Prior to developing Ultra Notes, I had previously gained experience creating a couple of straightforward Firefox add-ons and Chrome extensions using vanilla JavaScript.

Here are the projects I worked on:

• Firefox add-on Count Word Professional in 2013, a decade ago, which has since been deprecated.
• Chrome extension X Word Replacer in 2018, five years prior.

However, for a more intricate user experience, specifically incorporating a Directory Tree with multiple levels of folders and reused components, I opted to use a frontend framework this time. Among the available options like React and Svelte, I chose Svelte due to its lightweight nature, a crucial property of Chrome Extension, to respond fast with limited resource in the browser. Additionally, this decision aligns with my desire to learn Svelte, making this project an ideal opportunity for hands-on learning. After all, the best way to learn is by doing, isn't it? Instead of creating the project from scratch, I used the SvelteKit and instruction from Writing Chrome Extensions using Svelte Kit and Manifest V3.

There is another good writing from the same author, that I think it is good to read before deciding to use Svelte or not in your Chrome extension project, Why I chose Svelte for my Chrome Extension.

Conclusion

I developed the extension to cater to my specific needs, with the hope that it proves equally useful for you. As of the time of writing this post, the Ultra Notes extension stands at version 1.0.8 and is available on the Chrome Web Store for users' convenience.

The Ultra Notes extension seamlessly utilizes the Chrome built-in feature known as the sidePanel, providing a satisfactory user experience. Looking ahead, to further enhance the user interface and experience in future versions, I plan to incorporate Content scripts. For instance, envision a floating button or UI on any web page, surpassing the current Icon button on the top bar. Achieving this may involve exploring ways to integrate Svelte into the content script or considering the use of another framework, such as React. The goal is to continually improve and expand the functionality of the Ultra Notes extension to meet the diverse needs of users.

One possible solution at the moment for bundling needed JS files for the content script is to use Rollup, which is the bundler used by SvelteKit, or Webpack.

References

The extension is hosted on Github at Chrome Extension Ultra Notes, that is currently private, but will be made public/open source soon. For the community trust, that your data is not sent to any third party, you can check the source code of the extension.

• https://github.com/lhviet/chrome-extension-ultra-notes/
• https://dev.to/michmich112/writing-chrome-extensions-using-svelte-kit-and-manifest-v3-mkd
• https://dev.to/michmich112/why-i-chose-svelte-for-my-chrome-extension-3j4j
• https://rollupjs.org/
• https://webpack.js.org/