Building a Chrome Extension in Minutes

#webdev #javascript #programming #tutorial

Ever wondered how you can build your own Chrome Extension? It's not as hard as you might think!

In this tutorial, we'll create a simple Chrome Extension that converts all the text on a webpage into comic sans. Why would you ever want to do that? Because some people just like to see the world burn.

Let's get started!

Setting up Our Manifest

First, let's create an empty folder to house the contents of our extension. The minimum necessary file to define your extension is your manifest, which tells Chrome the defining characteristics of your extension.

Create a file in your folder called manifest.json and fill it with the following fields:

Let's go over what the non-straightforward ones mean:

Manifest_version: You're most likely going to want to put 3, but in case you might need to have your manifest in a different format you can check out the other Manifest versions that Chrome accepts
Background: Here you can put scripts that run in the background of your extension
Permissions: These are the APIs that you are accessing with your extension. Here we are going to use storage, to store persistent data, activeTab, to check the active tab, and scripting, to run operations on our active tab
Action: Here you can put different types of components of your extension. For this example, we are just going to create a popup menu, and tell Chrome to grab the popup menu from popup.html

The Code

The first part of this is by no means necessary, but I think it's helpful to show you how persistent data storage and background scripts work. Let's create a file called background.js.

Next, let's create our popup.html file. You can of course create a separate CSS file, but for simplicity's sake, we'll just use style tags.

Finally, let's actually do the conversion to Comic Sans when the button is pressed. Create a popup.js file with the following code:

And there you have it! The next step is loading it into Chrome.

Using Our Extension

Loading our extension into chrome couldn't be easier. Go to the extensions menu with the url:

chrome://extensions/

Make sure developer mode is enabled (can be done in the top right corner), and then press "Load unpacked".

From there, you can select the folder where all of our extension files are, and the extension will be loaded in!

We can now use it like so:

Uploading to the Chrome Store

Getting your app in the public Chrome store is a whole different ordeal, that Chrome documents very well. You can learn more about that here:

https://developer.chrome.com/docs/webstore/publish/

Next Steps

So what extension are you going to make? At Codesphere, we actually just released an extension that allows you to open a Github repo in Codesphere straight from Github. You can check it out here.