DEV Community

Cover image for Building a Chrome Extension in Minutes
Simon Pfeiffer for Codesphere Inc.

Posted on • Edited on

Building a Chrome Extension in Minutes

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

Alt Text

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

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.

Alt Text

Thanks for reading! Happy Coding from your good friends at Codesphere, the next-generation cloud platform.

Top comments (5)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Do you realise this is also a tutorial for building Firefox addons?

Collapse
 
omkar878 profile image
omkar878

Yeah, its pretty much same. I have created some extensions recently, have a look

github.com/omkar787/Simple-Bookmar...

github.com/omkar787/Memes-Extension

Collapse
 
w3ndo profile image
Patrick Wendo

Same thing I was about to say

Collapse
 
wahidn profile image
WahidN

You switched up the code between manifest.json and the background.js

Collapse
 
storytellercz profile image
Jan Dvorak

The first code sample is wrong. It is the same as for background.js bellow.