How to Create a Chrome Extension in 10 Minutes
One of my favorite things about the Chrome web browser is how extensible it is. It seems like there is a Chrome plugin for just about everything you could ever possibly want.
But, have you ever wanted to create your own Chrome extension? Have you ever wondered how difficult the process would be or what it would entail? Well, it turns out it is super easy—probably a lot easier than you ever imagined.
In this tutorial I am going to show you how to create a basic Chrome extension in about 5 minutes—no joke!
What we are going to build
The classic “Hello World” program is a rite of passage for getting started with any language, framework, or project, and its goal is simply to create something capable of outputting the text “Hello World”.
What is a Chrome Extension?
Before we get started building our extension, it’s probably a good idea to have a basic understanding of what a Chrome extension is and how Chrome extensions work.
In this tutorial, I’m going to show you how puts a button in the Chrome toolbar that will show an HTML page when clicked. Chrome extensions can also be created to work only on certain pages through the use of Page Actions, they can run code in the background using Background Pages, and they can even modify an existing page loaded in the browser using Content Scripts. But for this tutorial we are going to keep things simple.
If you are interested in learning more about Chrome extensions in general, check out Chrome’s extensions documentation.
Step 1: Create the project
The first thing we need to do is create the project and all the files we need for our extension. Let’s start by creating a new directory that we’ll call “Hello_World” We’ll put all the files we need for our extension in this new folder. Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files.
All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know to properly load up the extension in Chrome. So we’ll create a
manifest.json file and put it into the folder we created. You can leave the manifest file blank for now.
Next we’ll need an icon for our extension. This just needs to be a 19x19px PNG file. You can get a sample icon from Google’s demo project that you can modify.
Next we’ll need an HTML page to show when a user clicks our Browser Action, so we’ll create a
popup.html file in our “Hello_World” directory.
Step 2: Create the manifest file
Now that we have our basic project structure, we need to add the code to our manifest file to describe our plugin to Chrome.
Open up the manifest.json file and enter the following code:
"name": "Hello World",
"description": "Hoo hoo, my first chrome extension",
Most of the fields in this JSON file are self-explanatory, so I won’t waste your time explaining everything, but take note of the
browser_action section where we specify what the default icon is and what HTML page should be displayed when the Browser Action button is clicked.
Step 3: Create the UI
The next step is to create the user interface that our Browser Action will display when it is clicked.
Our user interface is going to be very simple and consist of only “Hello World” followed by message “Time for beer, first chrome extension is ready”.
Open up the
popup.html page and add the following:
<p style="width:350px">Time for beer, first chrome extension is ready<p>
Testing it out
It’s really easy to test a new extension in Chrome. Type “chrome://extensions” in a tab to bring up the extensions page.
Once on this page, check “Developer mode” to enable loading unpacked extensions. This will allow you to load your extension from a folder. Finally, click “Load unpacked extension” or simply drag the “Hello_World” folder onto the page to load up the extension. You should immediately see the extension show up as a Browser Action with your icon in the toolbar window of the current tab.
To test out the extension, go ahead and click the icon for our “Hello World” extension and you will see the message.
And that’s it! If you have any problems or questions, feel free to add to the discussion below. I hope this introduction to creating Chrome extensions has been sufficient to get you started.