How we fast-tracked the implementation of a Google Chrome Extension at Neue Zürcher Zeitung
By: Luisa Bider
Tags: Innovation, Data Science, Google Chrome Extensions, Web Development, Journalism

With simple extensions already offered by The Atlantic, The New Yorker and The Washington Post, there were some great benchmarks out there that we could already lean for developing our own. What we really didn’t expect, though, was for it to be as easy as it turned out to be.

The core of the extension: A smart article list

Naturally, the first question that arises when developing a service for article suggestions rotates around the suggestions themselves: Which articles do we want to suggest to our readers? What should the logic behind the suggestions be? Will we output one of the most-read articles, or should there be some other logic behind it?

Luckily, loads of prework surrounding this question had already been done within the company, with our data team exploring possibilities around personalization and automatic content creation for some years now. During this time, different products around personalization and automatic content creation have been launched, including the “NZZ Companion” and personalized newsletters.

As a part of “NZZ Companion”, different content streams were created — each with their own criteria for selection and intended use. The streams are put together through different scores: The editorial score (how long and in what position do editors place a story on the front page), the crowd score (how often is an article read and shared), and the user score (a personalized score). One of the output streams is intended for new users — the “zero user” — and uses an average user score of all users and therefore offers articles that could be relevant for everyone. This is exactly the stream we used. It is output as a JSON and could therefore easily be used to pull data from for our extension.

The implementation

Our original idea was to get an outside agency to build our Chrome extension. In order to be able to estimate the approximate effort and brief them accordingly, we had a little browse through the prerequisites.

This is when we came across a handy little tool called Extensionizr, which allows you to download all the basic documents you need to create your extension: A manifest.json and several subdirectories for JavaScript, CSS and HTML files. Ahhh, the beauty! The simplicity!

With the discovery of the Extensionizr tool, we realized that this extension thing might be simpler than we thought. And after playing around on a simple extension that displays a quote and changes background images one morning, we decided to just build the whole thing ourselves. Who doesn’t love a little coding project from time to time, after all?

The design

When we got to the design of the extension, we had one main focus: simplicity. This is why we decided to only offer one article at a time instead of three or more, as seen in the extensions by other publishers. The user can simply refresh the page to get a different article, after all — or open a new tab.

We leant on the design from NZZ’s brand book to create the design for our Chrome Extension.

We also decided to strip the suggestion from photos and to let the titles speak for themselves — the last thing we would want is to overwhelm our users with a Chrome Extension.

We leaned on NZZ’s brand book for the colours and used a simple JavaScript Math.random() function to pick one of the three colours from an array.

Et voilà! Our Chrome Extension was born.

We tested a first version of it within our team to gather some feedback on the design and got in touch with our data team to implement tracking. Some weeks later, our changes were made and the tracking implemented — it’s been one smooth ride! Thanks to Niklaus Gerber for his help on making the animations more delightful, Georg Schneider for his help with implementing the tracking and Vovka Fertak for his quick bug-spotting in my code.