For additional on working with Chrome augmentations, watch our ChromEngage Review instructional exercise Interacting with Browser Content From Your Chrome Extension.
One of my most loved things about the Chrome web program is the way extensible it is. It appears as though there is a Chrome module for pretty much all that you would ever conceivably need.
In any case, have you at any point needed to make your own Chrome expansion? Have you at any point considered how troublesome the procedure would be or what it would involve? All things considered, it turns out it is super simple—most likely a great deal less demanding than you at any point envisioned.
In this instructional exercise I am will demonstrate to you generally accepted methods to make a fundamental Chrome expansion in around 5 minutes—no joke!
What we will assemble
I'm truly fixated on the speed of my site,, so I regularly use destinations like GTmetrix to check my site speed, just to ensure it isn't backing off.
I'll regularly check different locales that I'm on too, so I can perceive how they look at.
Indeed, wouldn't it be decent if there was a Chrome augmentation that enabled you to utilize GTmetrix to check the site speed of whatever site you happened to be perusing, just by clicking a catch?
I checked the Chrome Web Store and there wasn't an augmentation that played out this activity, so's precisely what we will construct today.
What is a Chrome Extension?
Before we begin constructing our expansion, it's presumably a smart thought to have a fundamental comprehension of what a Chrome augmentation is and how Chrome expansions function.
At an exceptionally fundamental level, a Chrome augmentation is recently some HTML, CSS and JavaScript that enables you to add some usefulness to Chrome through a portion of the JavaScript APIs Chrome uncovered. An expansion is fundamentally only a website page that is facilitated inside Chrome and can get to some extra APIs.
In this instructional exercise, I will demonstrate to you generally accepted methods to make a fundamental Chrome expansion called a Browser Action augmentation. This sort of augmentation puts a catch in the Chrome toolbar that will demonstrate a HTML page when clicked and alternatively execute some JavaScript.
Chrome expansions can likewise be made to work just on specific pages using Page Actions, they can run code out of sight utilizing Background Pages, and they can even change a current page stacked in the program utilizing Content Scripts. In any case, for this instructional exercise we will keep things basic.
In the event that you are occupied with adapting more about Chrome augmentations all in all, look at Chrome's expansions documentation.
Step 1: Create the venture
The principal thing we have to do is make the venture and every one of the records we requirement for our expansion. We should begin by making another registry that we'll call "GTmetrix Extension." We'll put every one of the documents we requirement for our augmentation in this new envelope. Chrome enables us to stack up a module by pointing it at an organizer that contains the expansion documents.
All Chrome augmentations require a show record. The Manifest document advises Chrome all that it has to know to legitimately stack up the augmentation in Chrome. So we'll make a manifest.json document and place it into the envelope we made. You can leave the show record clear until further notice.
Next we'll require a symbol for our expansion. This simply should be a 19x19px PNG record. You can get an example symbol from Google's demo extend that you can adjust.
Next we'll require a HTML page to demonstrate when a client clicks our Browser Action, so we'll make a popup.html record and a popup.js document in our "GTmetrix Extension" index.
Because of security limitations, we can't put inline JavaScript into our HTML documents within our Chrome augmentations, so we need to make a different record to hold any JavaScript code we need and we'll reference it from the HTML record.
Step 2: Create the show document
Since we have our fundamental venture structure, we have to add the code to our show record to depict our module to Chrome.
Open up the manifest.json record and enter the accompanying code:
"manifest_version": 2,
"name": "GTmetrix Analyzer Plugin",
"depiction": "This expansion will break down a page utilizing GTmetrix",
"rendition": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
"authorizations": [
A large portion of the fields in this JSON document are obvious, so I won't squander your chance clarifying everything, except observe the browser_action area where we indicate what the default symbol is and what HTML page ought to be shown when the Browser Action catch is clicked.
You'll likewise see I've included a consents segment that determines that we need authorization to get to the activeTab. This is required keeping in mind the end goal to empower us to get the URL of the present tab to pass on to GTmetrix.
A significant number of the APIs Chrome opens for you to use with your expansions expect you to indicate any authorizations you require.
Step 3: Create the UI
The following stage is to make the UI that our Browser Action will show when it is clicked.
Our UI will be extremely straightforward and comprise of some content that says "GTmetrix Analyzer," trailed by a catch that a client can snap to play out the investigation on the present page.
Open up the popup.html page and include the accompanying:
<!doctype html>
<title>GTmetrix Analyzer</title>
<script src="popup.js"></script>
<h1>GTmetrix Analyzer</h1>
<button id="checkPage">Check this page now!</button>
You'll see in this HTML I've incorporated the popup.js content. This is the place we'll put the rationale for our expansion that will execute when the catch with the checkPage id is clicked.
Step 4: Implement the rationale
The exact opposite thing we have to do to make the module is to actualize the rationale that ought to execute when a client taps the "Check this page now!" catch within a tab.
We'll need to add an occasion audience to tune in for the snap occasion on the checkPage catch. When it is clicked, we'll have to make another frame to submit to GTmetrix that contains the URL of the present page, submits it, and after that shows the outcome.
Open up the popup.js record and include the accompanying code:
document.addEventListener('DOMContentLoaded', work() {
var checkPageButton = document.getElementById('checkPage');
checkPageButton.addEventListener('click', work() {
chrome.tabs.getSelected(null, function(tab) {
d = archive;
var f = d.createElement('form');
f.action = '';
f.method = 'post';
var i = d.createElement('input');
i.type = 'covered up'; = 'url';
i.value = tab.url;
}, false);
}, false);
I obtained the greater part of the code to make and present the shape from the bookmarklet gave on the GTmetrix site. I simply adjusted the code to take in the URL from the at present dynamic tab.
On the off chance that you analyze the code above, you'll see that we are first enlisting a handler for the snap occasion on the checkPage catch. At that point, when the catch is clicked, we get the as of now chose tab and execute some JavaScript to make a shape with some concealed fields that is submitted to GTmetrix. We utilize the URL from the present tab to reveal to GTmetrix which page to execute the test for.
Testing it out
It's truly simple to test another expansion in Chrome. Sort "chrome://augmentations" in a tab to raise the expansions page.
Once on this page, check "Engineer mode" to empower stacking unloaded expansions. This will enable you to stack your augmentation from an organizer. At last, click "Load unloaded expansion" or just drag the "GTmetrix Extension" organizer onto the page to stack up the augmentation. You ought to quickly observe the augmentation appear as a Browser Action with your symbol in the toolbar window of the present tab.
To try out the expansion, explore to a page you need to test with GTmetrics. At that point, simply ahead and tap the symbol for our GTmetrix augmentation. At the point when the HTML page comes up, click "Check this page now!" and you ought to instantly observe the demand and results from the present page being shown.
What's more, that is it! On the off chance that you have any issues or inquiries, don't hesitate to add to the dialog beneath. I trust this prologue to making Chrome expansions has been adequate to kick you off.