Creating a Chrome Extension in less than 10 minutes
Getting Started 🎊
The first thing you’ll need to start creating your Chrome extension is a piece of software to write your code. Any IDE will work, but since I use Visual Studio Code, that is the interface that you will see in the images for this tutorial. But again, it really doesn’t matter what IDE you use for this beginning tutorial.
Once you have your IDE of choice open (and you know what directory to store your code in), start by creating a file called manifest.json. This file is used by Chrome to understand what your extension is called and how to run it. There are only a few things that are required, so let’s add them right away.
The first line declares that we are working with v3 of the manifest. This is the latest version as of writing and is the recommended version by Chrome. This is needed so Chrome knows how to interact with your extension. The next line is the name of your extension. Then comes the version , which helps you and your users know when your extension has changed and what version you are using.
Those are the required fields, but there are also some others we added.
The action field allows you to control what happens when a user clicks your extension icon in the toolbar. The title is the text shown when hovering over the icon. To start with we’ll just keep it the same as the name of our extension. The default_popup is what should be displayed when they click the icon. In this case we are going to display a simple html file.
Lastly we give a short description. (Yes, it’s not very helpful but I’m sure you’ll find good use for this field in your actual extension)
That’s the manifest.json file done. 👏 👏 👏
Creating our popup
Now, let’s create that popup file we mentioned in the manifest. Create a new file next to manifest.json and name it popup.html.
In this file we are going to show a message: “I made this extension! Yay!” (Who doesn’t like some positive encouragement? 😁)
That’s it! Super simple.
Loading the extension
Open up you extensions page and toggle the Developer mode option in the top right. This makes a new button appear at the top left: Load unpacked . Click that button and navigate to the directory where you created your files. Load that directory and you will now see your extension.
Note: the ID of your extension will most likely be different since that is unique for each extension.
Finally you can click on extension from the toolbar and see your extension in the list. Pin it for easy access and the click on it!
🎊 Hurray! 🎊
Congrats on making your first extension!