How to Create Chrome Extension that works! [10 Minutes or Less]

It is beyond simple to create a Chrome browser extension! In this article and video guide, I will take you every step of the way through How to Create Chrome Extension that Works, in 10 Minutes Flat; or even faster if you are quick at copy and paste.

It may seem like there is a Chrome plugin for just about everything you could ever possibly want. But I bet you can think of some handy feature to create, that brings added functions to your own browsing experience and to that of others.

What are Extensions in Chrome?

Before you get started building your first extension, it’s probably a good idea for you to have a basic understanding of what a Chrome Extension is and how Chrome browser extensions actually work.

Chrome Browser Extensions are handy plugins that you can add into your local Chrome browsing experience; expanding the ability of your browser and incorporating useful additional features and functionality.

At a very basic level, a Chrome extension is just some HTML, CSS and JavaScript that allows you to add some functionality to Chrome; through some of the JavaScript APIs Chrome exposes. An extension is basically just a web page, that is hosted within Chrome and can access some additional APIs. – John Sonmez

Chrome Browser Extensions are handy plugins that you can add into your local Chrome browsing experience Share on X

Which Chrome Extension are we Making?

Something similar to White Rabbit’s SEO Tools extension for Chrome; we’ll create a browser plugin that provides just one of the tools available in the full plugin we created.

Everybody is pretty obsessed about the speed of their website, so we often use sites like GTmetrix to check website speed, just to make sure it’s not slowing down for any reason. We often check other sites, like those of our competitors, so we can see how they compare.

Well, wouldn’t it be nice if there was a Chrome extension that allows you to use GTmetrix and check the site speed of which ever site you happen to be browsing, just by clicking a button?

This makes for a great example to base our tutorial and video guide on. Combining the core files and structure of any Chrome browser plugin; besides using some neat JavaScript functionality, to easily integrate with other online tool and apps.

How to Create Chrome Extension

In this tutorial, I will show you how to create a basic Chrome plugin called a Browser Action extension. This type of extension puts a button icon in the Chrome browser toolbar; that will pop out an HTML page when clicked and then optionally triggers some JavaScript.

Most of the code for this article was first published on a post by John Sonmez, titled How to Create a Chrome Extension in 10 Minutes Flat. However, I found that his piece was incomplete and not up to date with the latest requirements from Chrome.

Step 1: Create a Chrome Extension Project Folder

The first thing we need to do is create the project folder and all the files we need for our extension within it. Let’s start by creating a new directory on our computer that we’ll call “GTmetrix Extension”. We’ll put all the files we need for our extension in this new folder.

Step 2: Define the File Structure

Next you will need a few icon files for your browser extension. Create the following versions of your icon in the “GTmetrix Extension” directory.

• icon.png
• icon16.png
• icon32.png
• icon48.png
• icon128.png

It seems that Chrome is intelligent enough to downsize any icon files that are not bang on in the size department. So I found it quickest to just create one version of the icon and duplicate it, giving each file the different name listed above.

Top Tip: Make sure your original icon file is at least 128×128 then it should be fine for all versions.

Now we need to create the following new files in the extension directory:

• Manifest – All Chrome extensions require a manifest file. The Manifest file tells Chrome everything it needs to know, to properly load up the extension in your Chrome browser. 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.
• HTML Page – Next we’ll need an HTML page, to show when a user clicks our Browser Action button, so we’ll create a popup.html file.
• JavaScript – Due to security constraints, we can’t put inline JavaScript in our HTML files, inside of our Chrome extensions; so instead we have to create a separate file to hold any JavaScript code we need and we’ll reference it from the HTML file. Create a file called popup.js in our “GTmetrix Extension” directory.

Step 3: Write the Core Manifest File

Now that we have our basic project structure, we need to add the code to our manifest file and describe our plugin to Chrome.

Open up the manifest.json file in a plain text editor and enter the following code:

{
"manifest_version": 2,

"name": "GTmetrix Speed Tester",
"description": "This extension will analyse a page using GTmetrix.",
"version": "1.0",

"icons": {
"16": "icon16.png",
"32": "icon32.png",
"48": "icon48.png",
"128": "icon128.png"
},

"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}

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 which HTML page should pop out when the Browser Action button is clicked.

You’ll also notice a permissions section that specifies we need to have permission to access the activeTab. This is required for us to get the URL of the current browser tab and pass it on to the GTmetrix speed test page. Most of the APIs Chrome exposes for you to use with your extensions require you to specify any permissions you need.

Step 4: Build the Chrome Extension UI

The next step is to create the user interface that our Browser Action will display when it is clicked. It will look something like this:

Our user interface is going to be very simple and consist of some text that says “GTmetrix Speed Test”, followed by a button that a user can click to perform the analysis on the current page.

Open up the popup.html page in your text editor and add the following:

<!doctype html>
<html>
<head>
<title>GTmetrix Speed Tester</title>
<script src="popup.js"></script>
</head>
<body>
<div style="min-width:250px;text-align:center;">
<h2>GTmetrix Speed Test</h2>
<button id="checkPage" style="border-radius:10px;padding:3%;margin-bottom:3%;cursor:pointer">Check Speed on GTmetrix</button>
</div>
</body>
</html>

You can add any additional HTML code into the file at this point; maybe a background colour, header image, text colour or footer content and copyright if the desire takes you. Edit the style of the button if you like too.

You’ll notice in this HTML the popup.js script is included. This is where we’ll put the JavaScript logic for our extension, this will execute when the button with the checkPage id is clicked.

Step 5: Implement the JavaScript Logic

The last thing we need to do to create the Chrome plugin, is to implement the logic that should execute when a user clicks the “Check Speed on GTmetrix” button inside of a browser tab. This could be any JavaScript you want, but for this example tutorial, we want to open a new tab and run a GTmetrix page speed analysis.

Here we have to add an event listener, to listen out for the user’s click event, on the checkPage button. When this button is clicked, we need to create a new form. This form has to contain the URL of the current page, submits it and then displays the result in a new tab.

Open up the popup.js file in your text editor and add the following code:

document.addEventListener('DOMContentLoaded', function() {
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', function() {

chrome.tabs.getSelected(null, function(tab) {
d = document;

var f = d.createElement('form');
f.action = 'https://gtmetrix.com/analyze.html?bm';
f.method = 'post';
f.target='_blank';
var i = d.createElement('input');
i.type = 'hidden';
i.name = 'url';
i.value = tab.url;
f.appendChild(i);
d.body.appendChild(f);
f.submit();
});
}, false);
}, false);

I updated the code from the original post to create and submit the form, using the bookmarklet provided on the GTmetrix website. John had just modified the code to take in the URL from the currently active tab and I had to adjustment it; so that the extension actually worked correctly and fired in the current Chrome browser.

How does this Code Work?

If you examine the JavaScript code above, you’ll see that we are first registering a handler for the click event on the checkPage button. When the button is clicked, we get the currently selected tab and execute the JavaScript to create a form (with some hidden fields), which is then submitted to GTmetrix. We append the URL from the current tab to tell GTmetrix which page to execute the speed test for.

Test Extension in local Chrome Browser

You have to install your Chrome Extension in your local browser to test it out.

1. Type “chrome://extensions” in a Chrome browser window to bring up the extensions page.
2. In the top right corner switch on “Developer mode” to enable installing unpacked extensions.
3. Finally, click “Load unpacked extension” and browse to your development folder; or simply drag the “GTmetrix Extension” folder onto the page to load up the extension.

You should immediately see the extension show up in your active extensions and as a Browser Action button; with your icon in the toolbar window of the current browser tab.

To test out the new extension, navigate your browser to a page you want to test with GTmetrics. Then go ahead and click your icon button for our GTmetrix extension. When the HTML page comes up, click “Check Speed on GTmetrix” and you should immediately see the request open in a new tab and speed test results from the current page will be processed shortly (subject to GTmetrix server load).

Publishing your Browser Extension

Although beyond the scope of this post about How to Make a Chrome Extension that Works; I have put together a quick list of the steps needed to publish your newly created Browser Extension, for people to use in their Chrome browser.

Every publicly available extension for Chrome is published to the Chrome Web Store. Think of it like the equivalent to Google’s Play Store for Android or Apple’s App Store, but only for Chrome browser extensions and themes.

To publish your browser extension in the Chrome Web Store, follow these steps:

1. Create your app’s zip file
2. Create a developer account
3. Pay the developer signup fee (currently $5)
4. Upload your app
5. Pick a payments system
6. Get app constraints and finish your code
7. Get the app ID
8. Get the OAuth token
9. Finish the app
10. Provide store content
11. Publish your app

Get the full lowdown on how to do this in Google’s own developer pages about Publishing Chrome Extensions.

Tutorial Conclusion

We thank John for his original post on how to Create Chrome Extension and hope you find this updated version of more use in current times.

So that’s it! If you have any problems or questions, feel free to ask in the comments below. Don’t forget to check out our blog for more free tutorials like this one on How to Create a Chrome Extension That Works, in 10 Minutes or Less.

I hope this updated introduction to creating Chrome extensions has been useful to get you started.