I l❤ve Game of Thrones, so I built a GOT Stars Chrome extension
By: Uduak Obong-Eren
Tags: JavaScript, Game of Thrones, Chrome, Chrome Extension, GoT

If only Chrome extensions were just another extension type for files 🤔

The final episode of Game of Thrones starts in a few days and I’m excited. I’ve always been a huge fan of Game of Thrones and I plan to enjoy every minute of this final episode and so in preparation for that, I built a GOT Stars Chrome extension that would allow me change the background of my webpage to the image of a GOT star 🤦.

Since a Chrome extension isn’t just another extension type for files (see what I did there?), what then is a Chrome extension and how did I build my GOT stars extension? To answer that, let’s try to understand what an extension is.

What is a browser extension?

Extensions are small software programs that customize the browsing experience.

That’s it? Yeah that’s it. Wait what did you expect? That was the most official definition you’d get of what an extension is and I pulled that right from Chrome’s official documentation of what extensions are.

In my words, extensions, are software programs that allow you extend the functionality of a browser. So a Chrome extension is a software program that allows you extend the functionality of a Chrome browser.

So is there something more you think your browser can be doing?

Anything from technical things like optimizing page speed, to added features for a web app then maybe, just maybe, Chrome extensions are the way to go.

Anatomy of the GOT Stars extension

The GOT Stars extension, like any other Chrome (browser) extension, has the following main parts:

Manifest

Popup page

Background Scripts (previously referred to as Event Pages)

Content scripts

Options page

And every thing else UI-related (stylesheet files, images etc). I’ll briefly explain what these are:

Manifest

The manifest file provides important metadata about an extension. Important information included in the manifest file include: name, version, page_action, permissions etc. Here is the manifest file for the GOT extension I built.

Manifest file for a GOT stars extension

Simple innit? So I guess one can say a manifest file is akin to a package.json file for an NPM project.

Popup Page

As the name suggests, this popup page the interface you see when you click on an extension. It comprises the markup (HTML) and the script for the page. The popup page for the GOT stars extension has a dropdown that allows me select the GOT star whose image I want to use as the background from a list of GOT stars; I intend to do this every week of this final season.

Image showing Popup page and default icon for GOT stars extension

The popup page is registered in the manifest file with the "browser_action:" attribute, where you can specify the default icon, the default title, and the default page.

Background Scripts

One thing to understand about browser extensions is that they are event-based programs. The background script is the core of an extension and is responsible for registering listeners that listen for and respond to specific events (button clicks, page navigations, opening tabs etc) while orchestrating messaging between other components of an extension.

The background script for the GOT stars extension first registers a listener for a GoTStarChanged event that is fired whenever you change your GoT star. When it receives that it creates Chrome notification and clicking on that notification takes you to HBO’s Game of Thrones.

Content Scripts

Content scripts are basically scripts that run in the context of the webpage and have access to the DOM. This is where the magic to enhance the functionality of a webpage happens; for my GOT stars extension, this is where the logic to change the page background happens

Take a moment to think of how powerful that can be.

Content scripts can be injected into a page programmatically or declaratively. The change background logic for this extension was done programmatically: