Developing a Chrome Extension for Bookmark Decay
Tags: project, extension, devjournal
Published: 2023-07-26 13:57:16

---
title: Developing a Chrome Extension for Bookmark Decay
series: Bookmark Decay
published: true
date: 2023-06-14 14:10:11 UTC
tags: ["project", "extension", "devjournal"]
canonical_url: https://www.thehappycactus.dev/posts/2023-06-14-bookmark-decay-extension/
---

# 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.<sup id="fnref:1"><a href="#fn:1" role="doc-noteref">1</a></sup> 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](https://developer.chrome.com/docs/extensions/mv3/) 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.<sup id="fnref:2"><a href="#fn:2" role="doc-noteref">2</a></sup> 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:

![Annotated screenshot of the Bookmark Decay extension](https://www.thehappycactus.dev/posts/2023-06-14-bookmark-decay-extension/images/extensionScreenShot.png)

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.

![Gif of Peter Griffin from Family Guy attempting to open blinds with the caption 'CSS'](https://media.giphy.com/media/yYSSBtDgbbRzq/giphy.gif)

## 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](https://developer.chrome.com/docs/extensions/whatsnew/#side-panel-launch) 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](https://developer.chrome.com/docs/extensions/reference/storage/#storage-areas) 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! [↩︎](#fnref:1)

2. If you disagree and would like a post on creating a Chrome Extension, let me know! [↩︎](#fnref:2)