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.
Thanks for reading! Happy Coding from your good friends at Codesphere, the next-generation cloud platform.
Top comments (5)
Do you realise this is also a tutorial for building Firefox addons?
Yeah, its pretty much same. I have created some extensions recently, have a look
github.com/omkar787/Simple-Bookmar...
github.com/omkar787/Memes-Extension
Same thing I was about to say
You switched up the code between manifest.json and the background.js
The first code sample is wrong. It is the same as for
background.js
bellow.