I wanted the freedom to switch around between browsers on different devices and have my bookmarks come with me, so this is a project I've always wanted to do. It's inspired by similar clients that use the popular KeePass password manager protocol.

What it does

It comprises of an electron app and a chrome extension (currently), that allow for seamless storage, sorting and retrieval of your bookmarks. They're stored in a local JSON file which can be moved around between devices. This means I can easily store this on a cloud service and access it from all my devices, or encrypt it with my algorithm of choice.

How I built it

The desktop app is a React app presented using Electron, which deals with reading to and writing to the bookmark file. It also runs a node server (that hosts a web socket) to allow browser extensions to communicate with it.

Speaking of, the Chrome browser extension is just a simple piece of Javascript that connects to the desktop app's socket and sends a newBookmark command when the user clicks on the browser action (the button next to the address bar).

Challenges I ran into

Electron was a little bit tricky to set up but I managed in the end.

I also ran into weird bugs when trying to add all of the bookmarks in the bookmarks file to my redux state all at the same time

Accomplishments that I'm proud of

It's a very functional app and is written using proper code (I even used a code linter).

I actually want to work on this more in the future.

Structure of the json file is optimised for speed, I hash the web address and use that as a key.

What I learned

How to Electron

What's next for Scrapbook

  • Full implementation of the tagging system (going to use a hashtag-style system)
  • Chrome extension to use a popup that allows the user to change details before saving
  • Chrome extension to check if the site is already saved or not, and if it's starred.
  • Search functionality
  • Edit and delete functionality in the app :D
Share this project: