Anatomy of a Chrome Extension

Chrome extensions are life.

My life, at least. I use them for everything from ad blocking, to time management, language learning, development, saving articles, and countless other things.

Although I’ve used many, I never thought about building one. That is, until last week. I read an article by Mackenzie Higa about how to make one and realized how easy it can be. I then built an extension that allows me add songs to my Spotify.

To use the extension, first I select any piece of text on the page I’m on, that represents the song or artist I want to look up. Then, I right click and select ‘Add to Spotify’, and an iframe opens with the search based on whatever text I highlighted. I can then select a song from the results and add it to any of my playlists directly.

While making this, I learned a lot about how extensions are structured, and so today I’d like to share a brief overview of just that.

Most chrome extensions have 4 main parts, to it, and in this article I’l go over what they are, and how they work together, with my extension as an example.

1. The Manifest

This json file is the blueprint of the extension. It defines the architecture of your app, the resources that it uses, the permissions that it needs, as well as other important details such as the name, description and version number.

2. The Background

The background page is a page that is always active when the browser is running. It‘s main purpose is to control the behavior of the extension. There is also what are called event pages, which work the same way, but are only run when triggered by certain events. Unless you absolutely need your background script to be running at all times, an event page might be the better way to go.

In my case, instead of an html page with a script, my background is simply a javascript file. It’s the control center of my extension, through which the content script and the iframe communicate with each other with messages, and it’s also in charge of saving and retrieving user’s Spotify account data, so that they only have to log in once.

3. The Pop Up

This is the easiest part of the extension to set up and understand. It’s nothing more than an html page. Most extensions interact with web pages, and for the popup to do so, it needs to send code to be executed via the chrome.tabs.executeScript() method. For example, you could send a script to change the background color of the page you’re on to whatever color you click from a dropdown menu in the popup. However, on it’s own, the popup can’t actually read the DOM from your main window. To do that, you need a content script.

3. The Content Script

This is the part of the extension that will be executed in the web page loaded in your browser. It has full access to the DOM, just as if it were part of that page. This means, however, that it does not have access to the extension’s other scripts and pages. To have them communicate, you and send messages using chrome.runtime.SendMessage, with corresponding listeners in the background script.

In the case of Add-to-Spotify, the content script opens and closes the iframe, and it keeps track of the text selected, so that it can appear in the search query.

Try it yourself!

The Chrome Developer site has much more detailed explanations, as well as some tutorials and examples you can play around with in order easily understand what’s going on, so I highly recommend you try it out.

Also, if you have a Spotify Premium Account, then try my extension and let me know what you think :)

Thanks for reading!