Let's get you excited - To build your first Chrome extension you're only going to need to create four files and an icon image!
What is a browser extension?
A browser extension is a handy piece of software that sits on the top bar of your browser, you probably have plenty installed already. They can be things such as screenshot tools, ad blockers, password managers, VPN's and so on.
They are special in that they can control and action things on pages that you're browsing, this can be really handy for automating long and boring tasks such as unfollowing everyone on Twitter.
If you've new to coding and looking for something that will inspire you to start your journey then this could be ideal. Shortly, you'll have your own piece of software running in your browser - Cool eh!
What we're going to build today is super simple and a really basic introduction into browser extensions. We'll build an extension that once pressed will fetch and display your IP address.
Knowing your IP address can sometimes be useful, certain servers and systems will only give access to IP's that they have white listed.
Right, lets get to it!
Code editor - If you haven't coded anything before, you might be wondering what software to use to write code in. You could use something simple as Notepad if you're crazy enough, but most people use IDE's (program to write code in). Visual Studio Code is a free, light and simple to use IDE.
- Create a folder on your computer for your extension, something like
- Start your IDE and open the folder.
- Now in there, we're going to create four empty files in our folder:
- Create another folder inside
imageswhich is where we'll store the icons for the extension.
- In the images folder, we'll create four image files. This will be the same icon but different sizes, we'll have
logo128.pngsized at 128x128 pixels.
logo48.pngsized at 48x48 pixels and so on.
Once you're done with these steps, your folder structure should look like this:
Okay, let's get to a fun part. Each extension needs an icon or a logo. We want it to be unique and identifiable, it's where we can get really creative.
I'm sure you could use Paint or any standard software that comes with your laptop, but there are lots of free tools out there which have more functionality such as GIMP, KRITA or you could use an online tool such as PIXLR.
6. In the software of your choice, load up
logo128.png, set the size to make sure it's square and 128 by 128 pixels and then design away!
Once you're happy, save it and then resize and save a 48x48, 32x32 and 16x16 version.
Alternatively, you can just save the image below and resize that if you don't have any creative juices flowing right now :)
The manifest file is where you can configure your extension, setting it's name, description, version, etc. It's also where you can setup permissions and actions, you can learn more about this in the official documentation.
7. Update your manifest.json file to the following, of course you can change the name and description if you like!
You can see that we set the
default_popup to our empty HTML file
popup.html. We also set the location for the extension icons.
Our popup is going to look very simple, all we want to have to display is the user's IP Address and a button so that they can copy the address.
8. Update your popup.html file to the following:
You'll see that we have a
<div> element with
We also reference our
popup.js files here which we'll look at next.
Now it's time to style our popup, we're wanting to make sure that we have a nice looking button to copy the IP address and both elements align next to each other.
You could play around with the design a bit, make your extension unique.
9. Update your popup.css file to the following:
Right, to the juicy stuff, JS is where we can control what happens when our extension is accessed.
We're going to need our popup to go and fetch the IP address from a server somewhere, we can use the awesome free API service Ipify. The other thing we'd like is a button so that the user can copy the address to their clipboard.
What's an API? Think of it as a service that can return data when it's called. For example, you could ask a weather API to return you information on your city 'New York'.
10. Update your popup.js file to the following:
If you're new to software development, any line starting with
//is a comment to help you understand what the code is for.
Job done - add to Chrome!
Boom boom, we're ready to test out what we've built, following the next few steps and we're there.
11. In Chrome navigate to:
Settings > Extensions
12. Turn on
Developer mode which can be found in the top right hand corner.
13. Then click on
Load unpacked and select the folder we've been working in
Congrats! You can now see your first Chrome extension loaded into your browser.
The possibilities are endless, maybe you have an idea of something you'd like to build, now that you've seen how easy it is to get started.
Here's a few more suggestions:
- Change the design and add information about the IP Address, such as it's geographical location. Ipify can help with that!
- Use a different API, such as Coindesk to show the latest Bitcoin price or something like that
- Read through the official documentation to learn a lot more about the power of browser extensions. It includes information about publishing to the store and monetization, etc.
- Check out more of our tutorials!