The Journey So Far

I’m building a web app/chrome extension pair that allows your bookmarks to “decay” (grow old and disappear) over time; the intention is to encourage you to actually read those tabs you have open as opposed to letting them linger until your browser crashes.¹ The first step I’m taking on this project is creating a Chrome Extension to easily bookmark pages and save that data locally.

The docs on creating a Chrome Extension are actually really good, so I won’t waste my time doing any sort of “how to” when it comes to actually building the extension.² I’ll just talk about the decisions I’ve made so far and how they’ve worked out.

Current Progress

Here’s the first iteration of the Bookmark Decay Extension:

1. Title header, duh
2. Button for bookmarking your current tab
3. Button for clearing all your bookmarks, though technically it actually clears all your chrome.storage data for Bookmark Decay, which includes the decayRate number and recentlyDeceased array. I initially added this just as a development tool, but I could see a case for keeping it.
4. Currently set decay rate, not really essential for the user here and may be removed
5. Header for your latest (last 5) bookmarks
6. Intended to be a link to your Bookmark Decay page, not implemented yet
7. Bookmark, currently only displaying the bookmark name (title of the page when bookmarked). Clicking opens a new tab to that URL.

Technical Decisions

Interesting little sidebar to start with: one of the cool things about creating an extension was that it forced me to go back to my vanilla JS roots. After working within frameworks for so long, it’s good (er, well at least new) to flex some vanilla muscles. I cannot say the same about being forced to use vanilla CSS.

Popup

Visually a Popup (vs. a Dropdown) seemed like the right choice for extension type. A popup is exactly what it sounds like, and would give me the real estate to both display some a simple “Bookmark” button and a list of the latest bookmarked URLs.

When I started the project Chrome had actually just announced a Side Panel API I was intrested in, but at the time it was only availble in a beta, unstable version of Chrome. By the time I’ve posted this it’ll have be available in the stable version, so maybe in the near-future I’ll shift this to a Side Panel.

chrome.storage.local storage

Something neat: extensions have their own Storage API under the chrome.storage namespace, which has access to different storage types that behave slightly differently:

• local
  • Locally stored data, ~5MB of storage
• sync
  • Data synced with all your logged-in Chrome browsers - neat! 100kb of storage
• session
  • Stores data for the browser’s session, ~10MB of storage

Initially I had planned on using localStorage since I was already familiar with it in developing web apps, but it turns out that wasn’t going to work - extensions use their own window, so localStorage wasn’t something that would be easily shareable between it and the browser. Using the Storage API with the local storage type seemed to fit my needs - session obviously wouldn’t work since I wanted the data to persist, and I wasn’t sure if sync would allow for enough storage space (I’d definitely consider swapping to it, though, if it turned out I was wrong).

Next Steps

The extension works! Since styling isn’t my forté, I’ve decided this little MVP fits my needs for proceeding to the next portion of the project, the web app!

1. Yes, I’m aware Chrome saves your tabs and lets you retrieve them upon reopening your browser - but I think that exacerbates the problem! ↩︎

2. If you disagree and would like a post on creating a Chrome Extension, let me know! ↩︎