April 9, 2014

Mortalitab, a Chrome Extension

I noticed something weird the other day. The resolution of my laptop screen is 1440 x 900, which means I have a total of 1,296,000 pixels on my screen. That is a lot of pixels. In my whole life, assuming I live to the same age as the average American male, 80, I will live only 80 x 365 x 24 hours, or 700,800 hours. I have over 1.8 pixels on my screen for every hour of my expected lifetime. This is perhaps one of the weirdest ratios I have ever found.

Naturally, I couldn’t just let that ratio sit there, I had to do something with it! So, with the help of Rose, I built Mortalitab, a Chrome extension that replaces your new tab screen with a personal countdown to your expected death.

Mortalitab screenshot

If you view the above image at full resolution, there is one pixel in each hour of my expected lifespan, according to US actuarial tables. The dark pixels are hours I’ve already lived, and the light pixels are hours I have yet to live. The tiny flashing white dot is the current hour. I see this screen every time I open a new tab. Yay!

Drawing the rectangle was relatively simple with a canvas element. We used requestAnimationFrame to update the color of the flashing pixel, which means if the tab is inactive, it won’t keep redrawing. We also only redraw the whole rectangle once an hour to advance the pixel over one. The rest of the time, we only draw over the one flashing pixel, in an effort to keep resource use low.

To get the expected age, I found some US actuarial tables on the social security website, copied the HTML, and used some Sublime Text macros to wrangle it into JSON. Feel free to use the JSON actuarial tables in your own project, if you’d like.

Making a Chrome Extension

Once we had an HTML page with the proper behavior, turning it into a Chrome extension was perhaps the easiest part of the whole project. All we needed was a manifest.json in the same directory as the HTML and JS files:

{
  "manifest_version": 2,
  "name": "Mortalitab",
  "version": "1.0",
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
}

The manifest file specifies the extension name, the version number, and that Chrome’s new tab page should be overridden by index.html. In the final version of the manifest, we also added a description, a settings page, and a couple icons:

  "description": "Replace your new tab page with a personal reminder that you will die.",
  "options_page": "index.html#settings",
  "icons": {
    "48": "48.png",
    "128": "128.png"
  }

But frankly, turning our html page into the default new tab page was extremely simple.

Overall, Mortalitab was a great foray into writing Chrome extensions! If you’re interested in writing your own new tab page, I highly recommend it as an easy and fun project. Or, if you’d like to check out Mortalitab, the source is on Github and the download is on the Chrome web store.