How to build a Chrome Extension: A beginner's guide

Roughly a 3 minute read by Rob

Chrome Extension Chuck

Overview

The process of creating any Chrome Extension can be broken down into 4 key steps:

  • Declaring a manifest file
  • Loading an unpacked extension into Chrome (for debugging)
  • Writing meta details for your extension as “browser actions
  • Writing code specific to your goals!

In this blog post, I will cover how to create an extension that will communicate with an API and request random Chuck Norris facts.

The manifest.json

A manifest.json file is responsible for telling Chrome how your extension is going to run and what permissions it needs to facilitate this.

Create a new directory for your project and create a `manifest.json` file inside it with the following content:

Now we have a manifest file, we can load our extension into Chrome.

Uploading to Chrome

Open Chrome and visit `chrome://extensions/`, click “Developer mode” (toggle located in the top right corner).

Developer Tools

Choose “Load unpacked extension”, select the folder where you created your manifest file. If your code is valid, you will see your extension appear in the installed list.

Every time you save your project, revisit this tab and refresh the page - doing so will reload your extension with the latest changes!

Browser action

A browser action tells Chrome some basic details about your extension, such as how you would like to load it.

The “default_icon” is the icon for our Chrome Extension and the “default_title” is the text that appears when you hover over the icon.

The “default_popup” references the HTML file that will be rendered when you click on your extension in the browser.

Permissions

In order for your extension to run, we must declare our intent in the permissions field of the manifest.

For this example, we need to tell Chrome where we intend to get the latest and greatest Chuck Norris facts from. I chose to use api.chucknorris.io as my source of “facts”.

Next steps

Now we need to fill out an HTML template to hold our content. Note the references to a stylesheet and javascript file.

Finally

When you are happy with your styles, it’s time to write some javascript. Our button needs to have an event listener attached and when it is pressed we want to go retrieve a fact from the API.

You can view the source code on my Github.

If you are curious about how to take your extension to the next level then the official documentation is a great place to continue your learning.

And speaking of learning, if you’d like to know more about our development services click here.

Rob is responsible for delivering cutting edge new projects as well as continuously improving some of our longer-lived applications. With an interest in infrastructure as code and being at the forefront of deployment and technical processes he can usually be found telling people that there "is a Docker container for that". In his spare time he loves nothing more than a game of cricket and a night in the pub after.