nrk.no

Browser extension as an admin interface

Kategori: Dev


We lost something on the way while upgrading our search feature on NRK TV. At first glance, our transition to Elasticsearch was nothing but successfull. We introduced auto-complete, fuzzy matching and increased the speed and accuracy of the search considerably. However, a tiny little feature I was using every day went AWOL.

I didn’t even know how much I relied on it untill it was abruptly taken away: I could no longer navigate to programs by searching for program codes.

chrome_1
Searching for a program code gives 0 hits.

This may not seem like much, but we troubleshoot and investigate issues with programs and their metadata every day. The program code is what we use when we reference a program internally, and hence what we receive in that e-mail which says that subtitles are missing or the video is not playing. No longer able to search for it, I now need to meddle with the address bar to navigate to that specific program. PAIN!

The argument for removing the feature was that it would clutter and slow down our newly implemented elastic implementation. The functionality can be considered a admin feature and is not something the end-user will use. Hence, it should probably not be part of our frontend code. Don’t mix concerns! I duly accepted.

The solution

Fast forward 6 months, and the lack of quick navigation to a program was slowly driving me mad. Then one day it dawned on me: I am a programmer, and programmers make, fix and automate stuff.

What if I make my own search field?

I had never built a Chrome extension before, but I had the impression that it was pretty straightforward. Thankfully I was right. After some initial confusion around the difference between content scripts, background pages, browser actions and event pages, I got around to make something that worked.

My first implementation contained a manifest.json, an import of jQuery, a html-file to inject, and a content script which injected the html. The content script looked something like this:

https://gist.github.com/oyvindholmstad/6fd339f54829b0569a5d

That was it. And it worked beautifully. I was able to insert my own search field on the top of of our application, and was even able to reuse the stylesheet of NRK TV. Problem solved!

chrome_2
An extra menu bar, with an extra search field.

Why this is a great idea

After building my little search field I realized that I have the opportunity to inject whatever functionality I want straight into our frontend, without worrying about creating bugs or messing up for the end-user. Wow. This is actually really huge.

Browser extensions can be really valueable in an administration context.

  • Add functionality on top of your existing application, without the possibility to break the stuff that is already there.
  • Runs in the context where our content meets our end-users. Being able to administrate our application in this context can help us become more user-centric.
  • Develop and deploy independently. Completely separate source code and deployment process makes it trivial do develop and distribute orthogonaly to the everyday work on the application.
  • Voluntary to use. If you don’t need it, don’t deploy it. No clutter for people which find the functionality unecessary.
  • Small cost, big payoff. Building an extension is easy, and does not require a lot of time and effort. But it can save you and your colleagues a lot of pain every day.

We want more

Needless to say, I immediatly started expanding my extension.

I added a link from the program page in NRK TV directly to that programs page in our CMS, Oda (you can read more about Oda and our other internal services in this blogpost in Norwegian). I added another link to the Oda-log for the program, where we can see the recent changes and their source systems. Ridiculously small and simple stuff, but really effective.

I also added some functionality in which our editorial staff can add the program to a short list of programs in Oda, to be promoted to the front page or to be part of an editorial package. All within 2 days of work. This was the most hard part to develop, as it required some cross-tab messaging. Nevertheless, with good help from the well-documented Chrome APIs the development went smoothly and the end-result worked flawlessly.

Our editorial staff has used the extension every day ever since, and I will keep updating the extension as more pain points materialize. Happy days. My biggest concern right now is distribution of updates of the extension. As of today the users needs to get hold of the .crx package (through a network share), and install it manually. Not the most sound strategy. However, Google have support for private applications in the web store, which might be worth considering if we make more extensions.

What do you think? Is browser extensions a good way to implement administration functionality?

chrome_3
More features in the extension.

3 kommentarer

    • Øyvind Holmstad (NRK) (svar til G)

      Nice find. This is definitely an option for smaller modifications. However, it was fun to learn how to make a small extension from the bottom 🙂

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *. Les vår personvernserklæring for informasjon om hvilke data vi lagrer om deg som kommenterer.