Anatomy of a Chrome Extension

Jonny Kalambay
Nov 29, 2017 · 4 min read

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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store