Building a Chrome Extension in Minutes
Tags: webdev, javascript, programming, tutorial
Published: 2021-10-01 07:52:35


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:

{% gist https://gist.github.com/LiorB-D/e9e058dd1101980fcb63766e1f396a8d %}

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`.

{% gist https://gist.github.com/LiorB-D/d2b390bacd18067dd9393af9d8d365e4 %}

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.

{% gist https://gist.github.com/LiorB-D/ae5e53db51ccf980c0d7ac19e1e6fbea %}

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

{% gist https://gist.github.com/LiorB-D/6e33fbffb473ef1fa019799fbf640043 %}

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".

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/641jfkygw95jvd7490v9.png)

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7gygftv2fu0iuc53e8rq.gif)

###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](https://chrome.google.com/webstore/detail/open-in-codesphere/ckanolmgmldllabkgmnalmgjhihohhog?hl=en-US).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58l1wpxx3pm9jkmdemfu.png)

Thanks for reading! Happy Coding from your good friends at [Codesphere](https://link.codesphere.com/EE), the next-generation cloud platform.