EXTENSIS FONTS CHROME EXTENSION HOW TO
EXTENSIS FONTS CHROME EXTENSION CODE

You should immediately see the extension show up as a Browser Action with your icon in the toolbar window of the current tab. Finally, click “Load unpacked extension” or simply drag the “GTmetrix Extension” folder onto the page to load up the extension. This will allow you to load your extension from a folder. Once on this page, check “Developer mode” to enable loading unpacked extensions. Type “chrome://extensions” in a tab to bring up the extensions page. It’s really easy to test a new extension in Chrome. We use the URL from the current tab to tell GTmetrix which page to execute the test for. Then, when the button is clicked, we get the currently selected tab and execute some JavaScript to create a form with some hidden fields that is submitted to GTmetrix.

EXTENSIS FONTS CHROME EXTENSION CODE

If you examine the code above, you’ll see that we are first registering a handler for the click event on the checkPage button. I just modified the code to take in the URL from the currently active tab. I borrowed most of the code to create and submit the form from the bookmarklet provided on the GTmetrix website. Open up the manifest.json file and enter the following code:, false ) Now that we have our basic project structure, we need to add the code to our manifest file to describe our plugin to Chrome. Next we’ll need an HTML page to show when a user clicks our Browser Action, so we’ll create a popup.html file and a popup.js file in our “GTmetrix Extension” directory.ĭue to security constraints, we can’t put inline JavaScript into our HTML files inside of our Chrome extensions, so we have to create a separate file to hold any JavaScript code we need and we’ll reference it from the HTML file. You can get a sample icon from Google’s demo project that you can modify. This just needs to be a 19x19px PNG file. Next we’ll need an icon for our extension. You can leave the manifest file blank for now. So we’ll create a manifest.json file and put it into the folder we created. The Manifest file tells Chrome everything it needs to know to properly load up the extension in Chrome. Chrome allows us to load up a plugin by pointing it at a folder that contains the extension files.Īll Chrome extensions require a manifest file. Let’s start by creating a new directory that we’ll call “GTmetrix Extension.” We’ll put all the files we need for our extension in this new folder. The first thing we need to do is create the project and all the files we need for our extension. If you are interested in learning more about Chrome extensions in general, check out Chrome’s extensions documentation. But for this tutorial we are going to keep things simple. This kind of extension puts a button in the Chrome toolbar that will show an HTML page when clicked and optionally execute some JavaScript.Ĭhrome extensions can also be created to work only on certain pages through the use of Page Actions, they can run code in the background using Background Pages, and they can even modify an existing page loaded in the browser using Content Scripts.

EXTENSIS FONTS CHROME EXTENSION HOW TO

In this tutorial, I’m going to show you how to create a basic Chrome extension called a Browser Action extension. An extension is basically just a web page that is hosted within Chrome and can access some additional APIs.

Before we get started building our extension, it’s probably a good idea to have a basic understanding of what a Chrome extension is and how Chrome extensions work.Īt 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.

Extensis fonts chrome extension