Developing a custom new tab page extension for Firefox

I’m a big fan of the Momentum Chrome extension that replaces your new tab page with beautiful photography and some useful widgets. I use both Chrome and Firefox so I was disappointed to see there was no Firefox version available despite a thread on their forums from over 2 years ago requesting it so I decided to have a go at implementing something similar to Momentum myself.

The end result is Zen, a website and Firefox extension (if that direct link doesn’t work, open the menu in the corner of the site and follow the instructions) to set the site as your new tab page.

The site

The site was fairly straightforward to build.

The daily randomized background images come from the ‘featured’ feed of Unsplash’s developer API which was super easy to implement thanks to their Universal JavaScript SDK. The site doesn’t have feature parity with Momentum and won’t be as performant because the assets aren’t stored locally but it’s a start!

The Firefox extension

This was a bit more complicated to get working in an acceptable way.

When you open the default new tab page in Chrome & Firefox the address bar stays empty and the cursor is focused there to allow you to enter a URL or search for something easily. The problem is all the Firefox new tab URL replacement add-ons I found change the address bar contents and don’t focus it, making it much less convenient.

Chrome provides a useful API that allows you to simply override a URLs content, such as the new tab page, with an HTML file bundled with the extension. Firefox, on the other hand, provides an API to change the new tab URL but that changes the address bar content – not ideal! It also provides an API to modify a page’s content with JavaScript & CSS but I couldn’t find an easy way to swap out the existing HTML with some bundled custom HTML.

The solution I ended up with was to use the pageMod API to replace the default new tab page content with an iframe (and some CSS to make the iframe fill the viewport). Quick, simple, reusable and, most importantly, no address bar changes!

// index.js
const pageMod = require( 'sdk/page-mod' );
const tabs    = require( 'sdk/tabs' );

const NEW_TAB_URL = 'about:newtab';

// Inject the mods
pageMod.PageMod({
    include           : [ NEW_TAB_URL ],
    contentScriptFile : './app.js',
    contentStyleFile  : './app.css',
});


// Listen for tab openings
tabs.on( 'open', function onOpen( tab ) {
    if ( tab.url === NEW_TAB_URL ) {
        // Redirect so pageMod can intercept
        tab.url = NEW_TAB_URL;
    }
});

// data/app.js
const SITE_URL = 'https://zen.mint.as';

// The `type="content"` attribute is used for security purposes to avoid
// giving the iframe a privileged context that could be used to
// access browser (cookies, history, etc) or user files.
// See https://mdn.io/Displaying_web_content_in_an_extension_without_security_issues
const content = `<iframe type="content" src="${SITE_URL}"></iframe>`;

document.body.innerHTML = content;

In addition to the Zen-specific extension I also created a generic extension that uses this technique to set your new tab page to any site you want! The full source is available on GitHub if you want to use this technique in your own extension.