How we fast-tracked the implementation of a Google Chrome Extension at Neue Zürcher Zeitung
Google Chrome Extensions: They’re the marble collections of our time.
There are so many pretty little extensions out there, with some of them being more helpful than others (looking at you, Millennials to Snake People), but all of them captivating attention and providing support through simplicity. They help us remember things, extract styles, collect bookmarks, insert emojis, block ads, delete cookies — or consume news.
The latter is where we have been wanting to get involved in the extension game for quite some time now. Chrome Extensions offer users a refreshing, autonomous and beautifully inoffensive way to consume news: Users are simply shown article blurbs when they open a new tab, a space that goes unused without any browser extensions installed. Users can then decide if they want to read the article or not. The user doesn’t have to call up the newspapers’ website, wait for the daily newsletter or receive a push notification while busy with other things. With an article in a chrome extension, it’s just there, ready to be read, ready to be ignored — whichever floats your boat.
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 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.
You can install our Chrome Extension here.
