Ever wondered what it would be like to create a Chrome extension? Well, I’m here to tell you just how easy it is. Follow these steps and your idea will turn into reality and you’ll be able to publish a real extension in the Chrome Web Store in no time.
What is a Chrome extension?
Chrome extensions allow you to add functionality to the Chrome web browser without diving deeply into native code. That’s awesome because you can create new extensions for Chrome with core technologies that web developers are very familiar with - HTML, CSS, and JavaScript. If you’ve ever built a web page, you’ll will be able to create an extension faster than you can have lunch. The only thing you need to learn is how to add some functionality to Chrome through some of the JavaScript APIs that Chrome exposes.
If you’re not experienced yet in building web pages, I recommend you first dive into some free resources to learn how to code, like freeCodeCamp.
What do you want to build?
Before you start, you should have a rough idea of what you want to build. It doesn’t need to be some new groundbreaking idea, we can just do this for fun. In this article, I’ll be telling you about my idea and how I implemented it into a Chrome extension.
The plan
I’ve used the Unsplash Chrome extension for a while which allows me to have nice background images of Unsplash in my default tab. I later replaced it with the Muzli Chrome extension that turns the default tab into a feed of design news and shots from around the web.
Let’s use these two extensions as inspiration to build something new, but this time, for movie lovers. My idea is to show a random background image of a movie every time you open a new tab. On scroll it should turn into a nice feed of popular movies and TV shows. So let’s get started.
Step 1: Setting things up
The first step is to create a manifest file named manifest.json. This is a metadata file in JSON format that contains properties like your extension’s name, description, version number and so on. In this file we tell Chrome what the extension is going to do, and what permissions it requires.
For the movie extension we need to have permission to control activeTab, so our manifest.json file looks something like this:
{
"manifest_version": 1,
"name": "The name of your amazing project",
"short_name": "Lil shorty",
"description": "Superdope Chrome extension for bad-ass devs",
"version": "1.0",
"author": "My Name",
"chrome_url_overrides": {
"newtab": "index.html"
},
"browser_action": {
"default_icon": "your-icon.png",
"default_title": "Have a nice day"
},
"permissions": ["activeTab"]
}
As you can see, we say that newtab.html will be the HTML file that should be rendered every time a new tab gets opened. To do this we need to have permission to control the activeTab, so when a user tries to install the extension they will be warned with all the permissions the extension needs.
Another interesting thing inside the manifest.json are the browser actions. In this example, we use it to set the title, but there are more options. For instance, to show a popup whenever you click on the app icon inside the address bar, all you have to do is something like this:
"browser_action": { "default_popup": "popup.html", },
Now, popup.html will be rendered inside the popup window that's created in response to a user's click on the browser action. It's a standard HTML file so it’s giving you free reign over what the popup displays. Just put some of your magic inside a file named popup.html.
Step 2: Test if it works
The next step is to create the newtab.html file and put in a ‘Hello world’:
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
To test if it works, visit chrome://extensions in your browser and ensure that the Developer mode checkbox in the top right-hand corner is checked.
Click Load unpacked extension and select the directory in which your extension files live. If the extension is valid, it will be active straight away so you can open a new tab to see your ‘Hello world’.
Step 3: Making things nice
Now that we got our first feature working, it’s time to make it nice. We can simply style our new tab by creating a main.css file in our extension directory and load it in our newtab.html file. The same goes when including a JavaScript file for any active functionality that you would like to include. Assuming that you have created a web page before, you can now use your magic to show your users whatever you want.
Finishing up the plan
All I further needed to finish the movie extension was HTML, CSS and JavaScript, so I don’t think it’s relevant to dive deep into the code, but I’d like to go through it quickly.
Here is what I did:
For my idea, I needed some nice background images, so in the JavaScript file, I used the TMDb API to fetch some popular movies, took their backdrop images and put them in an array. Whenever the page loads it now randomly picks one image from that array and sets it as the background of the page. To make this page a little more interesting I also added some more info on the left corner with a link to open a modal to watch a trailer.
When the user tries to scroll down I'm replacing the screen with a nice feed of popular movies. I used the same API to build cards of movies with an image, title, rating and vote count. Then, on clicking one of those cards, it shows the overview with a button to watch a trailer.
The result
Now with that little manifest.json file and just some HTML, CSS and JavaScript, every new tab that you open is looking a lot more interesting:
View the end result here.
Step 4: Publish your extension
When your first Chrome extension looks nice and works as it should, it’s time to publish it to the Chrome Store. Simply follow this link to go to your Chrome Web Store dashboard (you’ll be asked to sign in to your Google account if you’re not). Then click the Add new item button, accept the terms and you will go to the page where you can upload your extension. Now compress the folder that contains your project and upload that ZIP file.
After successfully uploading your file, you will see a form in which you should add some information about your extension. You can add an icon, a detailed description, upload some screenshots, and so on.
Make sure you provide some nice images to show off your project. The store can use these images to promote your groundbreaking project. The more images you provide, the more prominently your extension will be featured. You can preview how your extension looks inside the web store by clicking the Preview changes button. When you’re happy with the result, hit Publish changes and that’s it, your done!
Now go to the Chrome Web Store and search for your extension by its title (It might take some time before it’s up there). If you’re interested, you can find mine here.
The only thing left to do is get some users. So you might want to share a post about your life-changing Chrome extension on social media. Tell your friends to check it out. Add it to ProductHunt. And don’t forget to share your project here in the comments. I’m curious to see what you came up with!
Conclusion
As a web developer, it’s very easy to create a Chrome extension in a short amount of time. All you need is some HTML, CSS, JavaScript and basic knowledge of how to add functionality through some of the JavaScript APIs that Chrome exposes. Your initial setup can be published inside the Chrome Web Store within just 20 minutes. Building an extension that’s new, worthwhile or looks nice will take some more time. But it’s all up to you!
Use your creativity to come up with something interesting and if you ever get stuck, the excellent Chrome extension documentation can probably help you out.
So what are you waiting for? It’s time to start working on your own Chrome extension and turning your idea into reality.
Don’t forget to share your project in the comments and hit the like button if this article was useful to you. If you got some time and want to be a hero, give my extension a positive rating. That would be highly appreciated!
Thanks for reading! Got questions or feedback? Let me know in the comments
Top comments (2)
Good work! You have given me curiosity about, so I made a simple one that shows 12 top articles from dev.to in a new tab. It's not published yet, but if anyone wants to take a look to the code here it is:
github.com/bristoll/devToTab
dev.to/bristoll/devto-top-12-artic...
Cool!😁