Code. Code by Symbolon from the Noun Project

Building Momentum

So you’ve probably seen people using a Chrome Extension called Momentum. It looks like this:

It describes itself like this:

Momentum is a personal dashboard designed to eliminate distraction and provide inspiration, focus, and productivity.

They’ve got a team of 8 people and are hiring two developers, and you can unlock the premium features for $3.33/month. Tim Ferris says lot’s of nice things about it.

There’s nothing wrong with any of that. If you can conquer the Premium New Browser Tab market, good for you.

But then again, it’s just a nicely designed starter page. And I’m a developer, and sometimes I like to make things for myself.


So here’s maybe a combined two hours of messing around.

Tada! That was easy!

Chrome extensions are just folders with a manifest.json inside. Here’s mine:

  "name": "My private new tab",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Just for me.",
  "homepage_url": "",
  "chrome_url_overrides": {
    "newtab": "index.html"
  "chrome_settings_overrides": {
    "homepage": "index.html"

That’s all. The key line is the newtab and homepage overrides.1 index.html is a web page with some regular old CSS and JS attached. Load as an unpacked extension through Chrome settings and you’re done.

The art is centered on travel. If I’ve been there, the photos are mine. If I’m going in the future, I borrowed something from Unsplash. Which makes me realize that I should have taken better pictures in Montreal.

I set up an object of dates I want to countdown to and iterate over them.2 Honestly the hardest part of all of this is working through all the dumb things in the javascript Date API.

There’s a small button in the corner to show work-related links (Slack, Github, Jira, etc.) It remembers that preference in localStorage.

The emoji on the clock changes between ☕️,🍷, and 💤 based on the time of day.

The only thing I didn’t get to was weather, which needs an API key.

And just because I can, there’s always a 2% chance during waking hours that a new tab will be interrupted by a beagle.

Can we go outside?


Everything is hard coded because this is a toy and it doesn’t matter. If I wanted to-do lists or something that actually need dynamic data, Firebase would make a lot of sense.

I could probably get my Pocket feed to pull in too. There’s an API for it.

To their credit, Momentum can integrate with Asana/Basecamp/Github issues/Todoist etc. That’s actually a good chunk of work. In v2.0 I will attempt to make my tab sync with my giant paper notebook, but I suspect that’s a long shot.

Because it only needs to work in your browser, all of ES6+ is fair game, as are CSS variables, async/await and other shiny new things that you can’t normally use without a transpiler.


It’s a fun completely unnecessary project that doesn’t take that long. If you find yourself going “hey, I could do that,” please share a screenshot.

A few words on compatibility

Firefox and Chrome now use the same extension APIs. In Firefox you can load dev extensions under: about:debugging#/runtime/this-firefox, but it won’t remember it between restarts.

To make it stick, you need to bypass Firefox’s security settings and package the extension as an xpi (a zip file by another name).

I’m reading this only works in Firefox Developer Edition, Betas, etc.

In about:config, set xpinstall.signatures.required to false, which allows you to install extensions without tying into the public ecosystem. Add the following to your manifest:

"browser_specific_settings": {
  "gecko": {
    "id": ""

Why? No clue. But apparently Firefox wants to see it.

Then compress the files —not the folder of files—into a zip and rename the extension .xpi. You should be able to load that in about:addons using Install Add-On from File.

This isn’t the best process, in part because I like to tinker with things and leaving them in dev mode forever takes some of the friction out of that, but it does work.

See All Writing